Posted by: Zeeshan Amjad | November 19, 2009

Using Expender control inside List View


Till now are are applying template only at the list view header. This time we are going to apply template in the list view item. In this example we are going to insert the expender control inside the cell of the grid view. We are using data template for this purpose. We are going to apply on GridViewColumn and use its CellTemplate property. CellTemplate is a DataTemplate type property. Here is a piece of code to insert expender inside the list view.

  1: <GridViewColumn.CellTemplate>
  2: 	<DataTemplate>
  3: 		<Expander ExpandDirection="Right">
  4: 			<TextBlock Foreground="Green" FontSize="14" Text="{Binding NickName}"/>
  5: 		</Expander>
  6: 	</DataTemplate>
  7: </GridViewColumn.CellTemplate>
  8: 

Rest of the code is almost same as we saw earlier. Here is a complete XAML code of the 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="400">
  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:                     
 31:                     <GridViewColumn Width="Auto" Header="State Name" DisplayMemberBinding="{Binding Path=Name}"/>
 32:                     <GridViewColumn Width="Auto" Header="State Capital" DisplayMemberBinding="{Binding Path=Capital}"/>
 33:                     <GridViewColumn Width="Auto" Header="State Nick Name">
 34:                         <GridViewColumn.CellTemplate>
 35:                             <DataTemplate>
 36:                                 <Expander ExpandDirection="Right">
 37:                                     <TextBlock Foreground="Green" FontSize="14" Text="{Binding NickName}"/>
 38:                                 </Expander>
 39:                             </DataTemplate>
 40:                         </GridViewColumn.CellTemplate>
 41:                     </GridViewColumn>
 42:                 </GridView>
 43:             </ListView.View>
 44:         </ListView>
 45:     </Grid>
 46: </Window>
 47: 

C# code of this project is also same as previous project. 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:             statesList.Add(new StateInfo("Maryland", "Annapolis", "Old Line State", "Eastern"));
 29:             statesList.Add(new StateInfo("California", "Sacramento", "Golden State", "Pacific"));
 30:             statesList.Add(new StateInfo("Washington", "Olympia", "Ever Green State", "Pacific"));
 31:             statesList.Add(new StateInfo("Taxes", "Austin", "Lone Star State", "Central"));
 32:             statesList.Add(new StateInfo("New York", "Albany", "Empire State", "Eastern"));
 33: 
 34:             list.ItemsSource = statesList;
 35:         }
 36:     }
 37: 
 38:     public class StateInfo
 39:     {
 40:         public StateInfo()
 41:         {
 42:         }
 43: 
 44:         public StateInfo(String name, String capital, String nickName, String timeZone)
 45:         {
 46:             Name = name;
 47:             Capital = capital;
 48:             NickName = nickName;
 49:             TimeZone = timeZone;
 50:         }
 51: 
 52:         public String Name
 53:         { get; set; }
 54: 
 55:         public String Capital
 56:         { get; set; }
 57: 
 58:         public String NickName
 59:         { get; set; }
 60: 
 61:         public String TimeZone
 62:         { get; set; }
 63:     }
 64: }
 65: 

Here is the output of this program.

ListViewOutput_05

With the help of horizontal expender, now we can make the state nick name demand base, means user can see the nick name of his/her selected states.

Advertisements

Responses

  1. I gone through you articles. I dont know where all to put comments. This is the comment for all the article “Great Blog on WPF”. I learnt a lot from you blog regarding Wpf.

    • Thanks a lot to like my Blog. I am glad that it is helpful to you and you learned something from it.

      Regards
      Zeeshan Amjad


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: