Posted by: Zeeshan Amjad | July 20, 2011

Using DisplayMemberPath in ListBox


Sometimes we want to display different value in Listbox but want to store different value as an id. For example we want to display the state name, but internally uses the state code as a value in list box. We can do this with the help of DisplayMemberPath property to set the display property and SelectedValuePath to store internal value. Suppose here is our class to store state information.

Code Snippet
public class States
{
    public String Code
    { get; set; }

    public String Name
    { get; set; }
}

 

Here is simple XAML code to set the Name to display and Code to store as a value.

Code Snippet
<ListBox Grid.Row="0" Margin="5" Name="lstStates"
         ItemsSource="{Binding}" DisplayMemberPath="Name" SelectedValuePath="Code"/>

 

Let’s display the value of selected item in textbox to confirm this. Now we are doing a data binding between the value of selected item in list box with the text property of text block. Here is a code of it.

Code Snippet
<TextBlock Grid.Row="1" Margin="5" Text="{Binding ElementName=lstStates, Path=SelectedValue}"/>

 

Here is complete C# code of the program.

Code Snippet
using System;
using System.Collections.ObjectModel;
using System.Windows;

namespace WpfItemsControl
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        private ObservableCollection<States> states = new ObservableCollection<States>();

        public MainWindow()
        {
            InitializeComponent();

            states.Add(new States() { Code = "MD", Name = "Maryland" });
            states.Add(new States() { Code = "VA", Name = "Virginia" });
            states.Add(new States() { Code = "CA", Name = "California" });
            states.Add(new States() { Code = "WA", Name = "Washington" });

            DataContext = states;
        }
    }

    public class States
    {
        public String Code
        { get; set; }

        public String Name
        { get; set; }
    }
}

 

And here is complete XAML code of the program.

Code Snippet
<Window x:Class="WpfItemsControl.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml&quot;
        Title="DisplayMemberPath" Height="300" Width="400">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="4*"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <ListBox Grid.Row="0" Margin="5" Name="lstStates"
                 ItemsSource="{Binding}" DisplayMemberPath="Name" SelectedValuePath="Code"/>
        <TextBlock Grid.Row="1" Margin="5" Text="{Binding ElementName=lstStates, Path=SelectedValue}"/>
    </Grid>
</Window>

 

This is the output of the program if we select Maryland from the list box. DisplayMemberPathOutput

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: