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: