C# WPF Tutorial – Image control

By
Junaid
-
0
680

The WPF (Windows Presentation Foundation) Image control is used to display images in a graphical user interface (GUI) application. The Image control is typically used to display bitmap images, such as PNG or JPEG files. It can display both static images, such as icons or logos, and dynamic images, such as videos or animations.

To use an Image control in WPF, you must first add the control to your window or user control. Then, you can specify the image to display using the Source property of the Image control. The Source property takes a value of type ImageSource, which represents the image to display. The ImageSource class provides several derived classes for different types of images, such as BitmapImage for bitmap images and DrawingImage for vector graphics.

Here is an example of how to use an Image control in WPF:

<Image x:Name="myImage" Source="{Binding MyImageSource}" />

In this example, we have added an Image control to our window or user control and given it the name “myImage”. We have then bound the Image’s Source property to a property named “MyImageSource”, which could be of type ImageSource or one of its derived classes (such as BitmapImage). When the window or user control is displayed, the Image control will display the image specified by the MyImageSource property.

C# WPF Tutorial – Image control example

Here is an example of how to use a WPF Image control with XAML and C# code to display an image:

<Window x:Class="MyApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MyApp"
        mc:Ignorable="d"
        Title="Main Window" Height="450" Width="800">
  <Grid>
    <Image x:Name="myImage" Source="{Binding MyImageSource}" />
  </Grid>
</Window>

C# Code:

using System.Windows;
using System.Windows.Media;

namespace MyApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            // Bind the Image control to an image source
            myImage.DataContext = this;
            MyImageSource = new BitmapImage(new Uri("/Images/MyImage.png", UriKind.Relative));
        }

        // The image source for the Image control
        public ImageSource MyImageSource { get; set; }
    }
}

In this example, we have defined a Window with an Image control named “myImage”. In the XAML code for the window, we have bound the Image’s Source property to a property named “MyImageSource”.

In the MainWindow constructor, we have set the DataContext of the Image to the current Window instance and assigned a BitmapImage object to the MyImageSource property. The BitmapImage is constructed with the URI of the image file, which in this case is located in a folder named “Images” in the project directory.

When the window is displayed, the Image control will display the image specified by the MyImageSource property. You can customize the appearance of the Image control by setting other properties, such as the Width and Height, or by using other controls, such as buttons or checkboxes, in the same container. You can also add event handlers to respond to user interactions with the image, such as clicking or hovering over it.