The Image control allows you to display pictures inside your applications. The Source property, which points to specify the image that should be displayed, is the most important property of this control. We could point to a remote image on the Internet. Images can exist inside your current Visual Studio project and be seen in the Solution Explorer just like any other WPF-related file. You can copy the image to a folder inside your Visual Studio project and then Add it to the project. Right-click the project in Solution Explorer, Add, Existing Item…

Here is the results of a simple program.

Below is the XAML that produced the above screenshot.

<Window x:Class="ImageControlSimple.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:ImageControlSimple"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Title="ImageControlSimple" Height="150" Width="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Image Grid.Column="0" Source="https://begincodingnow.com/wp-content/uploads/2015/12/DSC00034.jpg"
               Stretch="Uniform"
               Opacity="0.9"
               Margin="4"
               ToolTip="https://begincodingnow.com/wp-content/uploads/2015/12/DSC00034.jpg">
        </Image>
        <Image Grid.Column="1" Source="/moose.jpg"
               Stretch="Uniform"
               Opacity="0.9"
               Margin="4"
               ToolTip="moose.jpg">
        </Image>
    </Grid>
</Window>

Stretch Property

Here is what WPF Tutorial says:

• Uniform: This is the default mode. The image will be automatically scaled so that it fits within the Image area. The Aspect ratio of the image will be preserved.
• UniformToFill: The image will be scaled so that it completely fills the Image area. The Aspect ratio of the image will be preserved.
• Fill: The image will be scaled to fit the area of the Image control. Aspect ratio might NOT be preserved, because the height and width of the image are scaled independently.
• None: If the image is smaller than the Image control, nothing is done. If it’s bigger than the Image control, the image will simply be cropped to fit into the Image control, meaning that only part of it will be visible.

Loading images dynamically (Code-behind)

XAML is great but you may need to use code to load an image. Perhaps the program asks the user for an image to load.

<Window x:Class="ImageControlDynamic.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:ImageControlDynamic"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Title="ImageControlDynamic" Height="250" Width="400">
    <StackPanel>
        <Button Name="BtnLoadFromFile" Height="23" Width="80" 
                Click="BtnLoadFromFile_Click"
                Margin="4">
            Browse for Pic</Button>
        <Image Name="imgDynamic" Margin="4" Stretch="Uniform"></Image>
    </StackPanel>
</Window>

The code-behind. We use the OpenFileDialog.

using Microsoft.Win32;
using System;
using System.Windows;
using System.Windows.Media.Imaging;
namespace ImageControlDynamic
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void BtnLoadFromFile_Click(object sender, RoutedEventArgs e)
        {
            OpenFileDialog openFileDialog = new OpenFileDialog();
            if (openFileDialog.ShowDialog() == true)
            {
                Uri fileUri = new Uri(openFileDialog.FileName);
                imgDynamic.Source = new BitmapImage(fileUri);
            }
        }
    }
}