TheDeveloperBlog.com

Home | Contact Us

C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML

WPF Image Example

This WPF article uses the Image control to display a picture. It displays JPG, PNG files with the BitmapImage type.

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. But this control have some complexity.

Based on:

.NET 4.5

Example. 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". Visual Studio will create the Image_Loaded method.

In Image_Loaded, we want to assign the Source property of the Image object. This is a little tricky. 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>

Example code: C#

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;
	}
    }
}

Summary. Rarely are programs simple. But they tend to be composed of simple parts. And the Image type is also composed of simple parts. With it, we display pictures and other graphics—with a minimum of custom code.


Related Links

Adjectives Ado Ai Android Angular Antonyms Apache Articles Asp Autocad Automata Aws Azure Basic Binary Bitcoin Blockchain C Cassandra Change Coa Computer Control Cpp Create Creating C-Sharp Cyber Daa Data Dbms Deletion Devops Difference Discrete Es6 Ethical Examples Features Firebase Flutter Fs Git Go Hbase History Hive Hiveql How Html Idioms Insertion Installing Ios Java Joomla Js Kafka Kali Laravel Logical Machine Matlab Matrix Mongodb Mysql One Opencv Oracle Ordering Os Pandas Php Pig Pl Postgresql Powershell Prepositions Program Python React Ruby Scala Selecting Selenium Sentence Seo Sharepoint Software Spellings Spotting Spring Sql Sqlite Sqoop Svn Swift Synonyms Talend Testng Types Uml Unity Vbnet Verbal Webdriver What Wpf