I have three BitmapImages that I would like to stitch together to create a composite image. The three images to be stitched together are aligned in the following way:
The images are of a type System.Windows.Media.Imaging.BitmapImage. I have looked at the following solution, but it uses System.Drawing.Graphics to perform stitching. I find it unintuitive to convert my BitmapImage to System.Drawing.Bitmap everytime I want to stich them together.
Is there a simple way to stitch three images of type System.Windows.Media.Imaging.BitmapImage together?
In addition to the options described in the other answer, the code below stitches three BitmapSource together into a single WriteableBitmap:
public BitmapSource StitchBitmaps(BitmapSource b1, BitmapSource b2, BitmapSource b3)
{
if (b1.Format != b2.Format || b1.Format != b3.Format)
{
throw new ArgumentException("All input bitmaps must have the same pixel format");
}
var width = Math.Max(b1.PixelWidth, b2.PixelWidth + b3.PixelWidth);
var height = b1.PixelHeight + Math.Max(b2.PixelHeight, b3.PixelHeight);
var wb = new WriteableBitmap(width, height, 96, 96, b1.Format, null);
var stride1 = (b1.PixelWidth * b1.Format.BitsPerPixel + 7) / 8;
var stride2 = (b2.PixelWidth * b2.Format.BitsPerPixel + 7) / 8;
var stride3 = (b3.PixelWidth * b3.Format.BitsPerPixel + 7) / 8;
var size = b1.PixelHeight * stride1;
size = Math.Max(size, b2.PixelHeight * stride2);
size = Math.Max(size, b3.PixelHeight * stride3);
var buffer = new byte[size];
b1.CopyPixels(buffer, stride1, 0);
wb.WritePixels(
new Int32Rect(0, 0, b1.PixelWidth, b1.PixelHeight),
buffer, stride1, 0);
b2.CopyPixels(buffer, stride2, 0);
wb.WritePixels(
new Int32Rect(0, b1.PixelHeight, b2.PixelWidth, b2.PixelHeight),
buffer, stride2, 0);
b3.CopyPixels(buffer, stride3, 0);
wb.WritePixels(
new Int32Rect(b2.PixelWidth, b1.PixelHeight, b3.PixelWidth, b3.PixelHeight),
buffer, stride3, 0);
return wb;
}
It really depends on what output type you want. Here are some options.
DrawingVisual
If you just need to render them to a visual, you could use a DrawingVisual
and render the three images. You could then render the visual in various ways depending on your use case (for example, using a VisualBrush
).
Rect bounds = new Rect(0.0, 0.0, 400.0, 300.0);
DrawingVisual visual = new DrawingVisual();
DrawingContext dc = visual.RenderOpen();
dc.DrawImage(mImage, new Rect(bounds.X, bounds.Y, bounds.Width, bounds.Height * 0.5));
dc.DrawImage(mImage, new Rect(bounds.X, bounds.Y + bounds.Height * 0.5, bounds.Width * 0.75, bounds.Height * 0.5));
dc.DrawImage(mImage, new Rect(bounds.X + bounds.Width * 0.75, bounds.Y + bounds.Height * 0.5, bounds.Width * 0.25, bounds.Height * 0.5));
dc.Close();
Custom Element
If you need an element that you can place in your UI directly, you can make a custom element that extends FrameworkElement
.
class CustomElement : FrameworkElement
{
public ImageSource Image1
{
get { return (ImageSource)GetValue(Image1Property); }
set { SetValue(Image1Property, value); }
}
public static readonly DependencyProperty Image1Property = DependencyProperty.Register("Image1", typeof(ImageSource), typeof(CustomElement),
new FrameworkPropertyMetadata((ImageSource)null, FrameworkPropertyMetadataOptions.AffectsRender));
public ImageSource Image2
{
get { return (ImageSource)GetValue(Image2Property); }
set { SetValue(Image2Property, value); }
}
public static readonly DependencyProperty Image2Property = DependencyProperty.Register("Image2", typeof(ImageSource), typeof(CustomElement),
new FrameworkPropertyMetadata((ImageSource)null, FrameworkPropertyMetadataOptions.AffectsRender));
public ImageSource Image3
{
get { return (ImageSource)GetValue(Image3Property); }
set { SetValue(Image3Property, value); }
}
public static readonly DependencyProperty Image3Property = DependencyProperty.Register("Image3", typeof(ImageSource), typeof(CustomElement),
new FrameworkPropertyMetadata((ImageSource)null, FrameworkPropertyMetadataOptions.AffectsRender));
protected override void OnRender(DrawingContext drawingContext)
{
drawingContext.DrawImage(Image1, new Rect(0.0, 0.0, ActualWidth, ActualHeight * 0.5));
drawingContext.DrawImage(Image2, new Rect(0.0, ActualHeight * 0.5, ActualWidth * 0.75, ActualHeight * 0.5));
drawingContext.DrawImage(Image3, new Rect(ActualWidth * 0.75, ActualHeight * 0.5, ActualWidth * 0.25, ActualHeight * 0.5));
}
}
You could then use it like this:
<local:CustomElement
Image1="{Binding SomeImage}"
Image2="{Binding SomeOtherImage}"
Image3="http://stackoverflow.com/favicon.ico" />
Images in a Grid
You always have the option of putting three Image
controls in a Grid
.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image
Grid.ColumnSpan="2"
Source="{Binding SomeImage}" />
<Image
Grid.Row="1"
Source="{Binding SomeOtherImage}" />
<Image
Grid.Row="1"
Grid.Column="1"
Source="http://stackexchange.com/favicon.ico" />
</Grid>
Creating an ImageSource
If you need the three images combined into a single ImageSource
for some reason, you could render into a DrawingVisual
(mentioned above) and then render that visual into a RenderTargetBitmap
.