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: