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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<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> |
Output:
