Posted by: Zeeshan Amjad | September 3, 2009

Data binding of Combo Box in WPF Revisited


We saw earlier that binding combo box control with database is very easy. Now we are going one step ahead and do little bit more with Combo Box. We can use the data template to specify the each items of the combo box. It’s XAML code is something like this.

  1: <ComboBox.ItemTemplate>
  2:     <DataTemplate>
  3:         <TextBlock FontSize="14" Text="{Binding Path=Name}"/>
  4:     </DataTemplate>
  5: </ComboBox.ItemTemplate>
  6: 

Sometimes we need to bind one data set with more than control. If we want to share the data binding then we can use the DataContext property. This property is defined in FrameworkElement class and any class inherited by it can use it. Let’s take a look at the WPF class diagram.

wpf_06

Here is a partial class hierarchy of FrameworkElement class and each of this class has a DataContext property.

wpf_22

We can share the binding with DataContext property. Lets extend the same program we discussed earlier. Now we want are going to display the state name in combo box and display the other state related information at the bottom of the screen in textblock. Here is a simple XAML file for this.

  1: <Window x:Class="wpfComboBox.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="Combo Box Demo" Height="300" Width="400" Loaded="Window_Loaded">
  5:     <Grid>
  6:         <Grid.RowDefinitions>
  7:             <RowDefinition/>
  8:             <RowDefinition/>
  9:         </Grid.RowDefinitions>
 10:         
 11:         <DockPanel Grid.Row="0">
 12:             <TextBlock Margin="5" Foreground="Brown" FontSize="16" DockPanel.Dock="Top">
 13:                 Select State
 14:             </TextBlock>
 15:             <ComboBox Name="cmbCombo" Margin="5" 
 16:                       VerticalAlignment="Center" HorizontalContentAlignment="Stretch" 
 17:                       ItemsSource="{Binding colors}" >
 18:                 <ComboBox.ItemTemplate>
 19:                     <DataTemplate>
 20:                         <TextBlock FontSize="14" Text="{Binding Path=Name}"/>
 21:                     </DataTemplate>
 22:                 </ComboBox.ItemTemplate>
 23:             </ComboBox>
 24:         </DockPanel>
 25:         <DockPanel Grid.Row="1">
 26:             <TextBlock Margin="5" Foreground="Brown" FontSize="16" DockPanel.Dock="Top">
 27:                 State Information
 28:             </TextBlock>
 29:             <Border Margin="5" BorderBrush="Brown" BorderThickness="5" CornerRadius="10">
 30:                 <StackPanel DataContext="{Binding ElementName=cmbCombo, Path=SelectedItem}">
 31:                     <TextBlock Margin="5" Foreground="Blue" FontSize="12" Text="{Binding Path=Capital}"/>
 32:                     <TextBlock Margin="5" FontSize="12" Text="{Binding Path=BigCity}"/>
 33:                     <TextBlock Margin="5" FontSize="12" Text="{Binding Path=NickName}"/>
 34:                 </StackPanel>
 35:             </Border>
 36:         </DockPanel>
 37:     </Grid>
 38: </Window>
 39: 

Here is the C# code of this program.

  1: using System;
  2: using System.Collections.Generic;
  3: using System.Windows;
  4: using System.Windows.Controls;
  5: using System.Drawing;
  6: 
  7: namespace wpfComboBox
  8: {
  9:     /// <summary>
 10:     /// Interaction logic for Window1.xaml
 11:     /// </summary>
 12:     public partial class Window1 : Window
 13:     {
 14:         public Window1()
 15:         {
 16:             InitializeComponent();
 17:         }
 18: 
 19:         private void Window_Loaded(object sender, RoutedEventArgs e)
 20:         {
 21:             List<StateInfo> states = new List<StateInfo>();
 22: 
 23:             states.Add(new StateInfo("Maryland", "Annapolis", "Baltimore", "Old Line State"));
 24:             states.Add(new StateInfo("California", "Sacramento", "Los Angeles", "Golden State"));
 25:             states.Add(new StateInfo("Washington", "Olympia", "Seattle", "The Evergreen State"));
 26:             states.Add(new StateInfo("Taxes", "Austin", "Houston", "Lone Star State"));
 27:             states.Add(new StateInfo("New York", "Albany", "New York City", "Empire State"));
 28: 
 29:             cmbCombo.ItemsSource = states;
 30:         }
 31:     }
 32: 
 33:     public class StateInfo
 34:     {
 35:         public StateInfo(string name, string capital, string bigcity, string nickname)
 36:         {
 37:             Name = name;
 38:             Capital = capital;
 39:             BigCity = bigcity;
 40:             NickName = nickname;
 41:         }
 42: 
 43:         public string Name
 44:         { get; set; }
 45: 
 46:         public string Capital
 47:         { get; set; }
 48: 
 49:         public string BigCity
 50:         { get; set; }
 51: 
 52:         public string NickName
 53:         { get; set; }
 54:     }
 55: }
 56: 

 

Here is the output of this program.

 

ComboBox_02

Advertisements

Responses

  1. 10x a lot for this article. For those of us not having enough time to read hundreds of pages of documentation and then to test all that, having small tutorials like this to read it’s a real pleasure.

    • Thanks to like it. I will try my best to keep posting stuff like this that is helpful for the community.


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: