Home
Search
Image ExampleUse the WPF Image control to display JPG, PNG files. Understand the BitmapImage type.
WPF
This page was last reviewed on Sep 29, 2022.
Image. How can we render a picture in a WPF program? With an Image control, we display bitmaps of all types, including PNG and JPG. Other forms of images (drawings) are even supported.
To begin, please create a WPF project and drag the Image control to your Window. Now edit the XAML markup for the Image element. Add a Loaded event handler by typing "Loaded".
In Image_Loaded, we want to assign the Source property of the Image object. We first create a BitmapImage object. We then assign the Source property to the BitmapImage reference.
BitmapImage Using the BitmapImage requires some nuance. We must call BeginInit() before, and EndInit() after, setting the UriSource.
Warning If you omit the BeginInit and EndInit calls, nothing will happen. If you don't believe me, try it and find out.
Note Please change the Uri object to point to a file that exists on your computer system.
Uri
Example markup, XAML:
<Window x:Class="WpfApplication11.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525"> <Grid> <Image HorizontalAlignment="Left" Height="100" Margin="10,10,0,0" VerticalAlignment="Top" Width="100" Loaded="Image_Loaded"/> </Grid> </Window>
using System; using System.Windows; using System.Windows.Controls; using System.Windows.Media.Imaging; namespace WpfApplication11 { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void Image_Loaded(object sender, RoutedEventArgs e) { // ... Create a new BitmapImage. BitmapImage b = new BitmapImage(); b.BeginInit(); b.UriSource = new Uri("c:\\plus.png"); b.EndInit(); // ... Get Image reference from sender. var image = sender as Image; // ... Assign Source. image.Source = b; } } }
For simple shapes, consider Ellipse or Rectangle. These are easier to use than Image, but only support simple visual effects. A shape (or Image) can also be transformed with RenderTransform.
Ellipse
Rectangle
RenderTransform
A summary. Programs tend to be composed of simple parts. The Image type is also composed of simple parts. With it, we display pictures and other graphics—with a minimum of custom code.
Dot Net Perls is a collection of tested code examples. Pages are continually updated to stay current, with code correctness a top priority.
Sam Allen is passionate about computer languages. In the past, his work has been recommended by Apple and Microsoft and he has studied computers at a selective university in the United States.
This page was last updated on Sep 29, 2022 (simplify).
Home
© 2007-2022 sam allen.
see site info on the changelog.