WPF ListBox

The Listbox in windows form contains the text value only. In ListBox, we can’t display the list of the images with the text.

Example of the ListBox

The ListBox class in C# and WPF shows the Listbox control. ListBox in WPF has contained the collection of the items in the ListBox. Here we will show how to add the items, remove the item from the Listbox, and bind the Listbox to the data source.

The height and width properties will show us the width and height of the Listbox. The name property of the ListBox will show us the name of the control, for the control name is known as the unique identifier. Margin property of the ListBox shows us the margin of the Listbox on the parent control. Horizontal and VerticalAlignment properties of ListBox are used to set the horizontal and vertical alignment.

The below code is used to set the name, height, and width of the ListBox Control.

  <ListBox Margin=”10,10,0,13″ Name=”listBox1″ HorizontalAlignment=”Left” VerticalAlignment=”Top” Width=”194″ Height=”200″/>  

Here we will perform the different functions on the Listbox.

Statically addition of the item to the ListBox Control

ListBox control is a collection of the ListBox item. To add the item in the ListBox control, we will write the following code:

To add the item in the ListBox control in WPF, we will follow the following steps:

For the WPF application, click on File->New->Project as shown in the below screenshot:

WPF ListBox

When you click on the project, following window will appear as shown in the below screenshot:

WPF ListBox

As per the above screenshot, click on Visual C#->WPF App (.NET Framework)->Name of App (WPF_App1)->Click OK.

After this, the following window will appear as shown in the below screenshot:

WPF ListBox

To add the ListBox control statically, we will write the following code in the MainWindow.XAML window:

  <Window x:Class=”WPF_App1.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_App1″          mc:Ignorable=”d”          Title=”MainWindow” Height=”450″ Width=”800″>      <Grid>          <ListBox Margin=”10,10,0,13″ Name=”listBox1″ HorizontalAlignment=”Left” VerticalAlignment=”Top” Width=”194″ Height=”200″>              <ListBoxItem Content=”Coffie”></ListBoxItem>              <ListBoxItem Content=”Tea”></ListBoxItem>              <ListBoxItem Content=”Orange Juice”></ListBoxItem>              <ListBoxItem Content=”Milk”></ListBoxItem>              <ListBoxItem Content=”Iced Tea”></ListBoxItem>              <ListBoxItem Content=”Mango Shake”></ListBoxItem>          </ListBox>          </Grid>  </Window>  

Design of the above code is as shown below:

WPF ListBox

In the above code, we add the item in the ListBox at the time of the design from XAML.

OutPut

WPF ListBox

Adding ListBox Dynamically in WPF

Here we will show how to add the items in the listbox from the code. For this we will change the UI and add the textbox and the button control on the page.

To add the TextBox and Button, we will write the following XAML code:

MainWindow.XAML

XAML Coding

  <Window x:Class=”WPF_App1.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_App1″          mc:Ignorable=”d”          Title=”MainWindow” Height=”450″ Width=”800″>      <Grid>          <ListBox Margin=”10,10,0,3″ Name=”listbox1″ HorizontalAlignment=”Right” VerticalAlignment=”Top” Width=”240″ Height=”200″></ListBox>          <TextBox Height=”23″ HorizontalAlignment=”Left” Margin=”8,14,0,0″ Name=”textBox1″ VerticalAlignment=”Top” Width=”127″ />          <Button Height=”23″ Margin=”140,14,0,0″ Name=”button1″ VerticalAlignment=”Top” HorizontalAlignment=”Left” Width=”76″ Click=”Button1_Click”>Add Item</Button>          </Grid>  </Window>  

Design View

WPF ListBox

After clicking on the button event handler, we will add the contents of the textbox to the listbox after calling the ListBox.Items.Add method.

For this we will write the following code:

  using System;  using System.Collections.Generic;  using System.Linq;  using System.Text;  using System.Threading.Tasks;  using System.Windows;  using System.Windows.Controls;  using System.Windows.Data;  using System.Windows.Documents;  using System.Windows.Input;  using System.Windows.Media;  using System.Windows.Media.Imaging;  using System.Windows.Navigation;  using System.Windows.Shapes;    namespace WPF_App1  {      /// <summary>      /// Interaction logic for MainWindow.xaml      /// </summary>      public partial class MainWindow : Window      {          public MainWindow()          {              InitializeComponent();          }            private void Button1_Click(object sender, RoutedEventArgs e)          {              listbox1.Items.Add(textBox1.Text);          }              }  }  

Output

WPF ListBox

Formatting the ListBox item

The Foreground and Background attributes of the ListBoxItem shows the background and foreground colors of the item. To set the background and foreground color, we will write the following code for the ListBox item.

For the formatting of the listbox, we will write the following code.

MainWindow.XAML

  <Window x:Class=”WPF_App1.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_App1″          mc:Ignorable=”d”          Title=”MainWindow” Height=”450″ Width=”800″>      <Grid>              <TextBox Height=”23″ HorizontalAlignment=”Left” Margin=”8,14,0,0″ Name=”textBox1″ VerticalAlignment=”Top” Width=”127″ />          <Button Height=”23″ Margin=”140,14,0,0″ Name=”button1″ VerticalAlignment=”Top” HorizontalAlignment=”Left” Width=”76″ Click=”Button1_Click”>Add Item</Button>          <Button Height=”23″ Margin=”226,14,124,0″ Name=”DeleteButton” VerticalAlignment=”Top” Click=”DeleteButton_Click”>Delete Item</Button>          <ListBox Margin=”10,53,0,111″ Name=”listBox1″ HorizontalAlignment=”Left” VerticalAlignment=”Center” Width=”194″ Height=”255″>              <ListBoxItem Background=”LightCoral” Foreground=”Red” Content=”Coffie” FontFamily=”Verdana” FontSize=”12″ FontWeight=”Bold” Height=”20″ RenderTransformOrigin=”0.5,0.5″ Width=”188″>              </ListBoxItem>              <ListBoxItem Background=”LightGray” Foreground=”Black” Content=”Tea” FontFamily=”Georgia” FontSize=”14″ FontWeight=”Bold”></ListBoxItem>              <ListBoxItem Background=”LightBlue” Foreground=”Purple” Content=”Orange Juice” FontFamily=”Verdana” FontSize=”12″ FontWeight=”Bold”></ListBoxItem>              <ListBoxItem Background=”LightGreen” Foreground=”Green” Content=”Milk” FontFamily=”Georgia” FontSize=”14″ FontWeight=”Bold”></ListBoxItem>              <ListBoxItem Background=”LightBlue” Foreground=”Blue” Content=”Iced Tea” FontFamily=”Verdana” FontSize=”12″ FontWeight=”Bold”></ListBoxItem>              <ListBoxItem Background=”LightSlateGray” Foreground=”Orange” Content=”Mango Shake” FontFamily=”Georgia” FontSize=”14″ FontWeight=”Bold”></ListBoxItem>          </ListBox>          </Grid>  </Window>  

Design View of the above code

WPF ListBox

The output of the above code is as shown below:

OutPut

WPF ListBox

Loading of Image in ListBox

Loading of the image in the ListBox is one of the advantages of the WPF, which is not supported by the Windows Form.

We can put any control in the WPF in the ListBoxItem like image and text. If we want to display the images with the text, we have to keep the text block and image control within the StackPanel. The Image. Source property contains the name of the image which we want to display in the image control. The TextBlock.Text property takes the string, which we want to show in the TextBlock.

Here we have a code through which we will show the text and image to the ListBoxItem.

  <Window x:Class=”WPF_App1.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_App1″          mc:Ignorable=”d”          Title=”MainWindow” Height=”450″ Width=”800″>      <Grid>              <TextBox Height=”23″ HorizontalAlignment=”Left” Margin=”8,14,0,0″ Name=”textBox1″ VerticalAlignment=”Top” Width=”127″ />          <Button Height=”23″ Margin=”140,14,0,0″ Name=”button1″ VerticalAlignment=”Top” HorizontalAlignment=”Left” Width=”76″ Click=”Button1_Click”>Add Item</Button>          <Button Height=”23″ Margin=”226,14,124,0″ Name=”DeleteButton” VerticalAlignment=”Top” Click=”DeleteButton_Click”>Delete Item</Button>          <ListBox Margin=”10,53,0,111″ Name=”listBox1″ HorizontalAlignment=”Left” VerticalAlignment=”Center” Width=”194″ Height=”255″>              <ListBoxItem Background=”LightCoral” Foreground=”Red” FontFamily=”Verdana” FontSize=”12″ FontWeight=”Bold” Height=”20″ RenderTransformOrigin=”0.5,0.5″ Width=”188″>                  <StackPanel Orientation=”Horizontal”>                      <Image Source=”C:UsersHPsourcereposWPF_App1WPF_App1ImagesCoffee.jpg” Height=”30″></Image>                      <TextBlock Text=”Coffee”></TextBlock>                  </StackPanel>              </ListBoxItem>              <ListBoxItem Background=”LightGray” Foreground=”Black” FontFamily=”Georgia” FontSize=”14″ FontWeight=”Bold”>                  <StackPanel Orientation=”Horizontal”>                      <Image Source=”C:UsersHPsourcereposWPF_App1WPF_App1Imagestea.jpg” Height=”30″></Image>                      <TextBlock Text=”Tea”></TextBlock>                  </StackPanel>              </ListBoxItem>              <ListBoxItem Background=”LightBlue” Foreground=”Purple” FontFamily=”Verdana” FontSize=”12″ FontWeight=”Bold”>                  <StackPanel Orientation=”Horizontal”>                      <Image Source=”C:UsersHPsourcereposWPF_App1WPF_App1Imagesorangejuice.jpg” Height=”30″></Image>                      <TextBlock Text=”Orange Juice”></TextBlock>                  </StackPanel>              </ListBoxItem>              <ListBoxItem Background=”LightGreen” Foreground=”Green” FontFamily=”Georgia” FontSize=”14″ FontWeight=”Bold”>                  <StackPanel Orientation=”Horizontal”>                      <Image Source=”C:UsersHPsourcereposWPF_App1WPF_App1ImagesMilk.jpg” Height=”30″></Image>                      <TextBlock Text=”Milk”></TextBlock>                  </StackPanel>              </ListBoxItem>              <ListBoxItem Background=”LightBlue” Foreground=”Blue” FontFamily=”Verdana” FontSize=”12″ FontWeight=”Bold”>                  <StackPanel Orientation=”Horizontal”>                      <Image Source=”C:UsersHPsourcereposWPF_App1WPF_App1ImagesIcedTea.jpg” Height=”30″></Image>                      <TextBlock Text=”Ice Tea”></TextBlock>                  </StackPanel>              </ListBoxItem>              <ListBoxItem Background=”LightSlateGray” Foreground=”Orange” FontFamily=”Georgia” FontSize=”14″ FontWeight=”Bold”>                  <StackPanel Orientation=”Horizontal”>                      <Image Source=”C:UsersHPsourcereposWPF_App1WPF_App1ImagesMangoShake.jpg” Height=”30″></Image>                      <TextBlock Text=”Mango Shake”></TextBlock>                  </StackPanel>              </ListBoxItem>                        </ListBox>          </Grid>  </Window>  

OUTPUT

WPF ListBox

CheckBox in ListBox

If we keep the checkbox control inside the ListBoxItems, here we will generate the ListBox control which contains the checkbox in it. CheckBox will host the controls. Image and text block can be used as a content of the checkbox in the form of the object.

Here we will change the code of the ListBoxItems and add the CheckBoxes to the items. The property Name will use to name of the checkbox. CheckBox can be accessed by using the Name property.

MainWindow.XAML

  <Window x:Class=”WPF_App1.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_App1″          mc:Ignorable=”d”          Title=”MainWindow” Height=”450″ Width=”800″>      <Grid>              <TextBox Height=”23″ HorizontalAlignment=”Left” Margin=”8,14,0,0″ Name=”textBox1″ VerticalAlignment=”Top” Width=”127″ />          <Button Height=”23″ Margin=”140,14,0,0″ Name=”button1″ VerticalAlignment=”Top” HorizontalAlignment=”Left” Width=”76″ Click=”Button1_Click”>Add Item</Button>          <Button Height=”23″ Margin=”226,14,124,0″ Name=”DeleteButton” VerticalAlignment=”Top” Click=”DeleteButton_Click”>Delete Item</Button>          <ListBox Margin=”10,53,0,111″ Name=”listBox1″ HorizontalAlignment=”Left” VerticalAlignment=”Center” Width=”194″ Height=”255″>              <ListBoxItem Background=”LightCoral” Foreground=”Red” FontFamily=”Verdana” FontSize=”12″ FontWeight=”Bold” Height=”20″ RenderTransformOrigin=”0.5,0.5″ Width=”188″>                  <CheckBox Name=”CoffeeCheckBox”>                  <StackPanel Orientation=”Horizontal”>                      <Image Source=”C:UsersHPsourcereposWPF_App1WPF_App1ImagesCoffee.jpg” Height=”30″></Image>                      <TextBlock Text=”Coffee”></TextBlock>                  </StackPanel>                  </CheckBox>              </ListBoxItem>              <ListBoxItem Background=”LightGray” Foreground=”Black” FontFamily=”Georgia” FontSize=”14″ FontWeight=”Bold”>                  <CheckBox Name=”TeaCheckBox”>                  <StackPanel Orientation=”Horizontal”>                      <Image Source=”C:UsersHPsourcereposWPF_App1WPF_App1Imagestea.jpg” Height=”30″></Image>                      <TextBlock Text=”Tea”></TextBlock>                  </StackPanel>                  </CheckBox>              </ListBoxItem>              <ListBoxItem Background=”LightBlue” Foreground=”Purple” FontFamily=”Verdana” FontSize=”12″ FontWeight=”Bold”>                  <CheckBox Name=”OrangeCheckBox”>                  <StackPanel Orientation=”Horizontal”>                      <Image Source=”C:UsersHPsourcereposWPF_App1WPF_App1Imagesorangejuice.jpg” Height=”30″></Image>                      <TextBlock Text=”Orange Juice”></TextBlock>                  </StackPanel>                  </CheckBox>              </ListBoxItem>              <ListBoxItem Background=”LightGreen” Foreground=”Green” FontFamily=”Georgia” FontSize=”14″ FontWeight=”Bold”>                  <CheckBox Name=”MilkCheckBox”>                      <StackPanel Orientation=”Horizontal”>                      <Image Source=”C:UsersHPsourcereposWPF_App1WPF_App1ImagesMilk.jpg” Height=”30″></Image>                      <TextBlock Text=”Milk”></TextBlock>                      </StackPanel>                  </CheckBox>              </ListBoxItem>              <ListBoxItem Background=”LightBlue” Foreground=”Blue” FontFamily=”Verdana” FontSize=”12″ FontWeight=”Bold”>                  <CheckBox Name=”IceTeaCheckBox”>                  <StackPanel Orientation=”Horizontal”>                      <Image Source=”C:UsersHPsourcereposWPF_App1WPF_App1ImagesIcedTea.jpg” Height=”30″></Image>                      <TextBlock Text=”Ice Tea”></TextBlock>                  </StackPanel>                  </CheckBox>              </ListBoxItem>              <ListBoxItem Background=”LightSlateGray” Foreground=”Orange” FontFamily=”Georgia” FontSize=”14″ FontWeight=”Bold”>                  <CheckBox Name=”MangoCheckBox”>                  <StackPanel Orientation=”Horizontal”>                      <Image Source=”C:UsersHPsourcereposWPF_App1WPF_App1ImagesMangoShake.jpg” Height=”30″></Image>                      <TextBlock Text=”Mango Shake”></TextBlock>                  </StackPanel>                  </CheckBox>              </ListBoxItem>                        </ListBox>          </Grid>  </Window>  

OUTPUT

WPF ListBox

WrapUP

Here we have created the listbox control and apply the different method to show the different functionalities of the WPF listbox control. WPF listbox control is a collection of the itemcontrol in it.

Next TopicWPF vs. WinForm

features of wpf what is wpf wpf wpf border wpf canvas wpf controls wpf groupbox wpf imagesource wpf listbox wpf richtextbox wpf timer wpf treeview wpf viewbox wpf vs winforms wpf xaml

WPF ListBox

WPF ListBox

Example of the ListBox

Statically addition of the item to the ListBox Control

Adding ListBox Dynamically in WPF

Formatting the ListBox item

MainWindow.XAML

Loading of Image in ListBox

CheckBox in ListBox

MainWindow.XAML

WrapUP

How to Install WordPress

CDATA PCDATA

You may also like