Posted by: Zeeshan Amjad | November 20, 2009

Display Hierarchical Data in List view using Nested Controls


 

If we have a simple grid form of data then we can simply display it in list view. We can even further customize the display of our data by using data template and display in different controls such as check box, text block etc.

If we have hierarchical data, such as the state information and list of big cities in each state then we can display this in the form of nested combo box inside the list view.

First we have to change our data structure. Now our class contains not only simple data, but also list of string to store more than one big cities in each state. Here is our class look like.

  1:     public class StateInfo
  2:     {
  3:         private List<String> list;
  4: 
  5:         public StateInfo()
  6:         {
  7:         }
  8: 
  9:         public StateInfo(String name, String capital, String nickName, String timeZone, Boolean visited)
 10:         {
 11:             Name = name;
 12:             Capital = capital;
 13:             NickName = nickName;
 14:             TimeZone = timeZone;
 15:             Visited = visited;
 16: 
 17:             list = new List<string>();
 18:         }
 19: 
 20:         public String Name
 21:         { get; set; }
 22: 
 23:         public String Capital
 24:         { get; set; }
 25: 
 26:         public String NickName
 27:         { get; set; }
 28: 
 29:         public String TimeZone
 30:         { get; set; }
 31: 
 32:         public Boolean Visited
 33:         { get; set; }
 34: 
 35:         public List<String> Cities
 36:         {
 37:             get { return list; }
 38:             set { list = value; }
 39:         }
 40:         
 41:     }
 42: 

Now we are going to populate some data in this class. In this example we are inserting data by code, but it can be loaded by database, LINQ or any other techniques. Here is an example of inserting data in this data structure.

  1: List<StateInfo> statesList = new List<StateInfo>();
  2: 
  3: StateInfo s1 = new StateInfo();
  4: s1.Name = "Maryland";
  5: s1.Capital = "Annapolis";
  6: s1.NickName = "Old Line State";
  7: s1.Visited = true;
  8: List<String> s1List = new List<string>();
  9: s1List.Add("Frederick");
 10: s1List.Add("Baltimore");
 11: s1List.Add("Rockville");
 12: s1List.Add("Hagerstown");
 13: s1.Cities = s1List;
 14: statesList.Add(s1);
 15: 
 16: StateInfo s2 = new StateInfo();
 17: s2.Name = "California";
 18: s2.Capital = "Sacramento";
 19: s2.NickName = "Golden State";
 20: s2.Visited = true;
 21: List<String> s2List = new List<string>();
 22: s2List.Add("Los Angeles");
 23: s2List.Add("San Franscico");
 24: s2List.Add("San Deiago");
 25: s2List.Add("San Jose");
 26: s2List.Add("Fresno");
 27: s2List.Add("Long Beach");
 28: s2.Cities = s2List;
 29: statesList.Add(s2);
 30: 
 31: StateInfo s3 = new StateInfo();
 32: s3.Name = "Taxes";
 33: s3.Capital = "Austin";
 34: s3.NickName = "Lone Star State";
 35: s3.Visited = true;
 36: List<String> s3List = new List<string>();
 37: s3List.Add("Houston");
 38: s3List.Add("Dallas");
 39: s3List.Add("San Antonio");
 40: s3List.Add("El Paso");
 41: s3.Cities = s3List;
 42: statesList.Add(s3);
 43: 
 44: StateInfo s4 = new StateInfo();
 45: s4.Name = "Ohio";
 46: s4.Capital = "Columbus";
 47: s4.NickName = "Buckeye State";
 48: s4.Visited = false;
 49: List<String> s4List = new List<String>();
 50: s4List.Add("Cleveland");
 51: s4List.Add("Cincinnati");
 52: s4.Cities = s4List;
 53: statesList.Add(s4);            
 54: 
 55: StateInfo s5 = new StateInfo();
 56: s5.Name = "Florida";
 57: s5.Capital = "Tallahassee";
 58: s5.NickName = "Sunshine State";
 59: s5.Visited = false;
 60: List<String> s5List = new List<string>();
 61: s5List.Add("Miami");
 62: s5List.Add("Jacksonville");
 63: s5List.Add("Tampa");
 64: s5.Cities = s5List;
 65: statesList.Add(s5);
 66: 

At XAML side we define one check box to display the Boolean variable.

  1: <GridViewColumn Width="Auto" Header="Visited">
  2: 	<GridViewColumn.CellTemplate>
  3: 		<DataTemplate>
  4: 			<CheckBox IsChecked="{Binding Visited}"/>
  5: 		</DataTemplate>
  6: 	</GridViewColumn.CellTemplate>
  7: </GridViewColumn>
  8: 

Similarly we define one more data template to define the cities list in combo box.

  1: <GridViewColumn Width="100" Header="Cities">
  2: 	<GridViewColumn.CellTemplate>
  3: 		<DataTemplate>
  4: 			<ComboBox Width="75" ItemsSource="{Binding Cities}"/>
  5: 		</DataTemplate>
  6: 	</GridViewColumn.CellTemplate>
  7: </GridViewColumn>
  8: 

Rest of the code is quite straight forward. Here is complete XAML code of this project.

  1: <Window x:Class="UIElement.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     xmlns:local="clr-namespace:UIElement"
  5:     Title="ListView Example" Height="300" Width="525">
  6:     <Window.Resources>
  7:         <Style x:Key="myStyle" TargetType="{x:Type ListViewItem}">
  8:             <Setter Property="Background" Value="AliceBlue"/>
  9:             <Setter Property="FontSize" Value="14"/>
 10:             <Setter Property="Foreground" Value="Green"/>
 11:         </Style>
 12:     </Window.Resources>
 13:     <Grid>        
 14:         <ListView ItemContainerStyle="{StaticResource myStyle}" Name="list" Margin="5" HorizontalContentAlignment="Stretch">
 15:             <ListView.View>                
 16:                 <GridView>
 17:                     <GridView.ColumnHeaderTemplate>
 18:                         <DataTemplate>
 19:                             <Border BorderBrush="Brown" BorderThickness="2" CornerRadius="5">
 20:                                 <Border.Background>
 21:                                     <LinearGradientBrush>
 22:                                         <GradientStop Offset="0" Color="Wheat"/>
 23:                                         <GradientStop Offset="1" Color="LightCoral"/>
 24:                                     </LinearGradientBrush>
 25:                                 </Border.Background>
 26:                                 <TextBlock Foreground="Blue" FontSize="14" FontWeight="Bold" Margin="5" Text="{Binding}" Width="Auto"/>    
 27:                             </Border>                            
 28:                         </DataTemplate>
 29:                     </GridView.ColumnHeaderTemplate>
 30:                     <GridViewColumn Width="Auto" Header="Visited">
 31:                         <GridViewColumn.CellTemplate>
 32:                             <DataTemplate>
 33:                                 <CheckBox IsChecked="{Binding Visited}"/>
 34:                             </DataTemplate>
 35:                         </GridViewColumn.CellTemplate>
 36:                     </GridViewColumn>
 37:                     <GridViewColumn Width="Auto" Header="State Name" DisplayMemberBinding="{Binding Path=Name}"/>
 38:                     <GridViewColumn Width="Auto" Header="State Capital" DisplayMemberBinding="{Binding Path=Capital}"/>
 39:                     <GridViewColumn Width="Auto" Header="State Nick Name">
 40:                         <GridViewColumn.CellTemplate>
 41:                             <DataTemplate>
 42:                                 <Expander ExpandDirection="Right">
 43:                                     <TextBlock Foreground="Green" FontSize="14" Text="{Binding NickName}"/>
 44:                                 </Expander>
 45:                             </DataTemplate>
 46:                         </GridViewColumn.CellTemplate>
 47:                     </GridViewColumn>
 48:                     <GridViewColumn Width="100" Header="Cities">
 49:                         <GridViewColumn.CellTemplate>
 50:                             <DataTemplate>
 51:                                 <ComboBox Width="75" ItemsSource="{Binding Cities}"/>
 52:                             </DataTemplate>
 53:                         </GridViewColumn.CellTemplate>
 54:                     </GridViewColumn>
 55:                 </GridView>
 56:             </ListView.View>
 57:         </ListView>
 58:     </Grid>
 59: </Window>
 60: 

And here is complete C# code of this project.

  1: using System;
  2: using System.Collections.Generic;
  3: using System.Linq;
  4: using System.Text;
  5: using System.Windows;
  6: using System.Windows.Controls;
  7: using System.Windows.Data;
  8: using System.Windows.Documents;
  9: using System.Windows.Input;
 10: using System.Windows.Media;
 11: using System.Windows.Media.Imaging;
 12: using System.Windows.Navigation;
 13: using System.Windows.Shapes;
 14: 
 15: namespace UIElement
 16: {
 17:     /// <summary>
 18:     /// Interaction logic for Window1.xaml
 19:     /// </summary>
 20:     public partial class Window1 : Window
 21:     {
 22:         public Window1()
 23:         {            
 24:             InitializeComponent();
 25: 
 26:             List<StateInfo> statesList = new List<StateInfo>();
 27: 
 28:             StateInfo s1 = new StateInfo();
 29:             s1.Name = "Maryland";
 30:             s1.Capital = "Annapolis";
 31:             s1.NickName = "Old Line State";
 32:             s1.Visited = true;
 33:             List<String> s1List = new List<string>();
 34:             s1List.Add("Frederick");
 35:             s1List.Add("Baltimore");
 36:             s1List.Add("Rockville");
 37:             s1List.Add("Hagerstown");
 38:             s1.Cities = s1List;
 39:             statesList.Add(s1);
 40: 
 41:             StateInfo s2 = new StateInfo();
 42:             s2.Name = "California";
 43:             s2.Capital = "Sacramento";
 44:             s2.NickName = "Golden State";
 45:             s2.Visited = true;
 46:             List<String> s2List = new List<string>();
 47:             s2List.Add("Los Angeles");
 48:             s2List.Add("San Franscico");
 49:             s2List.Add("San Deiago");
 50:             s2List.Add("San Jose");
 51:             s2List.Add("Fresno");
 52:             s2List.Add("Long Beach");
 53:             s2.Cities = s2List;
 54:             statesList.Add(s2);
 55: 
 56:             StateInfo s3 = new StateInfo();
 57:             s3.Name = "Taxes";
 58:             s3.Capital = "Austin";
 59:             s3.NickName = "Lone Star State";
 60:             s3.Visited = true;
 61:             List<String> s3List = new List<string>();
 62:             s3List.Add("Houston");
 63:             s3List.Add("Dallas");
 64:             s3List.Add("San Antonio");
 65:             s3List.Add("El Paso");
 66:             s3.Cities = s3List;
 67:             statesList.Add(s3);
 68: 
 69:             StateInfo s4 = new StateInfo();
 70:             s4.Name = "Ohio";
 71:             s4.Capital = "Columbus";
 72:             s4.NickName = "Buckeye State";
 73:             s4.Visited = false;
 74:             List<String> s4List = new List<String>();
 75:             s4List.Add("Cleveland");
 76:             s4List.Add("Cincinnati");
 77:             s4.Cities = s4List;
 78:             statesList.Add(s4);            
 79: 
 80:             StateInfo s5 = new StateInfo();
 81:             s5.Name = "Florida";
 82:             s5.Capital = "Tallahassee";
 83:             s5.NickName = "Sunshine State";
 84:             s5.Visited = false;
 85:             List<String> s5List = new List<string>();
 86:             s5List.Add("Miami");
 87:             s5List.Add("Jacksonville");
 88:             s5List.Add("Tampa");
 89:             s5.Cities = s5List;
 90:             statesList.Add(s5);
 91: 
 92:             list.ItemsSource = statesList;
 93:         }
 94:     }
 95: 
 96:     public class StateInfo
 97:     {
 98:         private List<String> list;
 99: 
100:         public StateInfo()
101:         {
102:         }
103: 
104:         public StateInfo(String name, String capital, String nickName, String timeZone, Boolean visited)
105:         {
106:             Name = name;
107:             Capital = capital;
108:             NickName = nickName;
109:             TimeZone = timeZone;
110:             Visited = visited;
111: 
112:             list = new List<string>();
113:         }
114: 
115:         public String Name
116:         { get; set; }
117: 
118:         public String Capital
119:         { get; set; }
120: 
121:         public String NickName
122:         { get; set; }
123: 
124:         public String TimeZone
125:         { get; set; }
126: 
127:         public Boolean Visited
128:         { get; set; }
129: 
130:         public List<String> Cities
131:         {
132:             get { return list; }
133:             set { list = value; }
134:         }
135:         
136:     }
137: }
138: 

The output of this program would be something like this.

ListViewOutput_06

Advertisements

Responses

  1. […] the List view We can easily insert progras bar inside the list view just like we added check box and combo box. We are again going to use the CellTemplate property of GridViewColumn. We are going to define data […]

  2. […] already saw couple of examples of combo box. Here we saw combo box inside tree view, here inside list view,  here inside tab control and here inside toolbar. Now we are going to insert […]

  3. […] how to display combo box in Data Grid. It is not different than displaying it in ListView we saw here. Similarly we have need to make a nested data structure first. Here is our data class. Code […]


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: