How to Use a Drawing as an Image Source in WPF

In this article, we show an example of how to use a drawing as an image source in WPF.

For this, first we write the following code in the .xaml page like this:

<Window x:Class="Image_Control_Examples_In_WPF.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:PresentationOptions="http://schemas.microsoft.com/winfx/2006/xaml/presentation/options"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="PresentationOptions"
Background="Red" Margin="20"
Title="Window1" Height="300" Width="300">

Here we set the background red and we use this (PresentationOptaions) to freeze the DrawingImage to enhance the performance benefits like this:

<DrawingImage PresentationOptions:Freeze="True">

Now we create a border to set the border of the image:

<Border BorderBrush="Blue" BorderThickness="2"
HorizontalAlignment="Left" VerticalAlignment="Top"
Margin="10">

Now we write the code for the image:

<Image>
<Image.Source>
<DrawingImage PresentationOptions:Freeze="True">
<DrawingImage.Drawing>
<GeometryDrawing>
<GeometryDrawing.Geometry>
<GeometryGroup>
<EllipseGeometry Center="50,50" RadiusX="30" RadiusY="30"
/>
<EllipseGeometry Center="50,50" RadiusX="10" RadiusY="10"
/>
</GeometryGroup>
</GeometryDrawing.Geometry>
<GeometryDrawing.Brush>
<LinearGradientBrush>
<GradientStop Offset="0.0" Color="PaleVioletRed" />
<GradientStop Offset="1.0" Color="Purple" />
</LinearGradientBrush>
</GeometryDrawing.Brush>
<GeometryDrawing.Pen>
<Pen Thickness="10" Brush="Indigo" />
</GeometryDrawing.Pen>
</GeometryDrawing>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>

Here we use the DrawingImage to display the drawing.

The Output Will be:

Now we provide an example of how to create an image by coding.

For this, first we take a Button (button1) when we click on the Button the code will be executed:

<Button HorizontalAlignment="Right" Margin="0,101,86,101" Name="button1" Width="93" Click="button1_Click">Image</Button>

Now we write the following code on the Click Event of the Button Control in the .cs page:

private void button1_Click(object sender, RoutedEventArgs e)
{

GeometryGroup myellipses = new GeometryGroup();
myellipses.Children.Add(
new EllipseGeometry(new Point(50, 50), 30, 30)
);
myellipses.Children.Add(
new EllipseGeometry(new Point(50, 50), 10, 10)
);

GeometryDrawing MyGeometryDrawing = new GeometryDrawing();
MyGeometryDrawing.Geometry = myellipses;
MyGeometryDrawing.Brush =
new LinearGradientBrush(
Colors.PaleVioletRed,
Color.FromRgb(204, 204, 255),
new Point(0, 0),
new Point(1, 1));
MyGeometryDrawing.Pen = new Pen(Brushes.Indigo, 10);
}

Here, the following code is used to generate the GeomatryDrawing:

GeometryDrawing MyGeometryDrawing = new GeometryDrawing();
MyGeometryDrawing.Geometry = myellipses;

Here we use the LinearGradientBrush to paint the image:

MyGeometryDrawing.Brush =
new LinearGradientBrush(
Colors.PaleVioletRed,
Color.FromRgb(204, 204, 255),
new Point(0, 0),
new Point(1, 1));

And the following Code is used for outline drawing:

MyGeometryDrawing.Pen = new Pen(Brushes.Indigo, 10);

Now we create a DrawingImage and Image Control in order to draw an image:

DrawingImage MyFirstGeometryImage = new DrawingImage(MyGeometryDrawing);
MyFirstGeometryImage.Freeze();

Image MyImage = new Image();
MyImage.Source = MyFirstGeometryImage;
MyImage.HorizontalAlignment = HorizontalAlignment.Left;

Now we write the code for place the image inside to border:

Border MyBorder = new Border();
MyBorder.Child = MyImage;
MyBorder.BorderBrush = Brushes.Gray;
MyBorder.BorderThickness = new Thickness(1);
MyBorder.HorizontalAlignment = HorizontalAlignment.Left;
MyBorder.VerticalAlignment = VerticalAlignment.Top;
MyBorder.Margin = new Thickness(10);

this.Margin = new Thickness(20);
this.Background = Brushes.Red;
this.Content = MyBorder;

The Output Will be:

After clicking on the Button: