How to bind a Dictionary to a Listbox in apps based in XAML

Article
1/17/2024

Introduction

This sample as the goal to show how to bind a Dictionary to a Lisbox in apps based in XAML, using the MVVM pattern.

Building the Sample

You only need Visual Studio 2012/2013 running in Windows 7, 8, 8.1 or later.

Description

Suppose we have a resource dictionary with some data that we need to show in an application and for each item in listbox we want to show the key/value.

We will start by create a model class called "Company" that has only two properties: Name and Url.

      /// <summary> 
 /// Define the Company. 
 /// </summary> 
 public class Company 
 { 
 /// <summary> 
 /// Gets or sets the name. 
 /// </summary> 
 /// <value>The name.</value> 
 public string Name { get; set; } 
  
 /// <summary> 
 /// Gets or sets the URL. 
 /// </summary> 
 /// <value>The URL.</value> 
 public string Url { get; set; } 
 }

In the MainViewModel we will create the resource dictionary where the Company is the key and the value will be an int, and we will have a SelectedCompany property for get the company selected in listbox.

The MainViewModel will be defined by

public class MainViewModel : ViewModelBase 
 { 
 private Company _selectedCompany; 
  
 /// <summary> 
 /// Initializes a new instance of the MainViewModel class. 
 /// </summary> 
 public MainViewModel() 
 { 
 Companies = new Dictionary<Company, int> 
 { 
 { 
 new Company  
 { 
 Name = "Microsoft", Url="www.microsoft.com" 
 }, 1 
 }, 
 { 
 new Company  
 { 
 Name = "Google", Url="www.google.com" 
 }, 2 
 }, 
 { 
 new Company  
 { 
 Name = "Apple", Url="www.apple.com" 
 }, 3 
 } 
 }; 
 } 
  
 /// <summary> 
 /// Gets or sets the selected company. 
 /// </summary> 
 /// <value>The selected company.</value> 
 public Company SelectedCompany 
 { 
 get { return _selectedCompany; } 
 set { Set(() => SelectedCompany, ref _selectedCompany, value); } 
 } 
  
 /// <summary> 
 /// Gets or sets the companies. 
 /// </summary> 
 /// <value>The companies.</value> 
 public Dictionary<Company, int> Companies { get; set; } 
 }

The MainWindow will defined as following

<mui:ModernWindow x:Class="BindingResourceDictionarySample.MainWindow"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:mui="http://firstfloorsoftware.com/ModernUI"
 Title="Sample"
 Width="525"
 Height="350"
 DataContext="{Binding Main, 
 Source={StaticResource Locator}}" 
 Style="{StaticResource BlankWindow}"> 
 <StackPanel> 
 <TextBlock Margin="20,20,0,0" Text="How to bind a Dictionary to a Listbox" /> 
 <ListBox Width="250"
 Margin="20,20,0,0"
 HorizontalAlignment="Left"
 ItemsSource="{Binding Companies}"
 SelectedValue="{Binding ItemIndex}"
 SelectedValuePath="Key"
 SelectionMode="Single"> 
 <ListBox.ItemTemplate> 
 <DataTemplate> 
 <Border Width="245"
 BorderBrush="Orange"
 BorderThickness="2"> 
 <StackPanel Orientation="Horizontal"> 
 <TextBlock Margin="20,0,0,0" Text="{Binding Path=Value}" /> 
 <TextBlock Margin="20,0,0,0" Text="{Binding Path=Key.Name}" /> 
 </StackPanel> 
 </Border> 
 </DataTemplate> 
 </ListBox.ItemTemplate> 
 </ListBox> 
 </StackPanel> 
</mui:ModernWindow>

To get the selected Company the SelectedValue property from the Listbox will be used that will use the SelectedValuePath to understand which value to return. To get the value instead of the Company we should change the Key to Value.

Note:

1. For have a nice look, was used the ModernWindow from the ModernUI (for WPF). For see more about ModernUI see the following Modern UI Samples.

2. The sample is similar for any XAML app, where we show the UI for WPF.

Running the sample

https://i1.code.msdn.s-msft.com/how-to-binding-a-030f635a/image/file/127102/1/1.png

Source Code Files

**ViewModelLocator **class contains static references to all the view model in application and provides an entry point for the bindings.
**MainViewModel **class for binding to MainView.xaml
MainWindow represents the view.
Company defines the model.

Source

The source code can be find in MSDN Samples.

Share via