Add Image to ListBox Item in WPF Step by Step

In this tutorial, I’ll show you How to display Images in a WPF ListBox.

Step 1: Open Visual Studio, start a new WPF Application and give any name you want.

Step 2: Create New Folder for image files in Solution Explorer.

Step 3: add some images to the folder that you created.

Step 4: XAML Code


<Window x:Class="wpf_listbox_image.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:wpf_listbox_image"
        mc:Ignorable="d"
        Title="MainWindow" Height="480" Width="800">
    <Grid>
        <ListBox HorizontalAlignment="Left" Height="380" VerticalAlignment="Top" Width="535" Margin="125,29,0,0">
            <ListBoxItem Margin="0,0,0,10">
                <StackPanel Orientation="Horizontal">
                    <Image Source="Images/canada.jpg" Stretch="Fill" Height="80"></Image>
                    <TextBlock VerticalAlignment="Center" FontSize="18" Margin="100,0,0,0">Flag of Canada</TextBlock>
                </StackPanel>
            </ListBoxItem>
            <ListBoxItem Margin="0,0,0,10">
                <StackPanel Orientation="Horizontal">
                    <Image Source="Images/uk.jpg" Stretch="Fill" Height="80"></Image>
                    <TextBlock VerticalAlignment="Center" FontSize="18" Margin="100,0,0,0">Flag of United Kingdom</TextBlock>
                </StackPanel>
            </ListBoxItem>
            <ListBoxItem>
                <StackPanel Orientation="Horizontal">
                    <Image Source="Images/usa.jpg" Stretch="Fill" Height="92" Width="160"/>
                    <TextBlock VerticalAlignment="Center" FontSize="18" Margin="100,0,0,0">Flag of United States</TextBlock>
                </StackPanel>
            </ListBoxItem>

        </ListBox>


    </Grid>
</Window>

<Window x:Class="wpf_listbox_image.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:wpf_listbox_image"

mc:Ignorable="d"

Title="MainWindow" Height="480" Width="800">

<Grid>

<TextBlock VerticalAlignment="Center" FontSize="18" Margin="100,0,0,0">Flag of Canada</TextBlock>

</StackPanel>

</ListBoxItem>

<TextBlock VerticalAlignment="Center" FontSize="18" Margin="100,0,0,0">Flag of United Kingdom</TextBlock>

</StackPanel>

</ListBoxItem>

<TextBlock VerticalAlignment="Center" FontSize="18" Margin="100,0,0,0">Flag of United States</TextBlock>

</StackPanel>

</ListBoxItem>

</ListBox>

</Grid>

</Window>

Output:

Add Image to ListBox Item in WPF Step by Step

Like this:

1 Comment

Leave a Comment X

Like this:

You may also like

1 Comment

Leave a Comment X