How to Bind a Dictionary to a Listbox in Apps Based in XAML

Introduction

The purpose of this sample is to show how to bind a Dictionary 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 a Listbox, we want to show the key/value.

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

C#

/// <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 to get the company selected in the listbox.

The MainViewModel will be defined by:

C#

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 in the following:

XAML

<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 binding 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. To have a nice look, we will use the ModernWindow from the ModernUI (for WPF). For more see the ModerUI in Modern UI Samples.
   
   
2. The sample is similar to any XAML app, where we show the UI for WPF.

Running the sample

Source code files:

 

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

Source Code

The source code can be found in the MSDN Samples.