Posted by: Zeeshan Amjad | September 25, 2009

Embedded Expender control inside ListBox in WPF


I recently noticed one post in WPF form about how to make every element of list box expendable. We already have one control expender to do exactly the same thing now the only thing we have to do it make every element of list box expender.

There was already one solution there. That solution was using the control template. Here i am going to do the same thing with data template.

Both techniques has some advantages and disadvantages. If we have lots of list box control in our program and we want to make every control behave like this then control template is a good idea. On the other hand if we want to make different list box display data differently then we can do it easily with data template. Such as we want to display expander in one list box, but stack in another one and nothing at all in third list box then we can define the data template of each list box.

Let’s take a look at our old example of display state information in a list box. Now we are going to display the state name with expender control and when user press the expender then we will show rest of the information. Here is our simple XAML file to make list box with data template.

  1: <Window x:Class="WpfListBox2.Window1"
  2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4:     Title="ListBox Expender" Height="400" Width="400" Loaded="Window_Loaded">
  5:     <Grid>
  6:         <ListBox Name="lst" Margin="5" ItemsSource="{Binding}" HorizontalContentAlignment="Stretch">
  7:             <ListBox.ItemTemplate>
  8:                 <DataTemplate>
  9:                     <StackPanel>
 10:                         <TextBlock Margin="5" FontSize="16" FontWeight="Bold" Text="{Binding Path=Name}"/>
 11:                         <Expander Name="expender">
 12:                             <Border Margin="5" Background="Wheat" BorderThickness="5" BorderBrush="Brown">
 13:                                 <StackPanel>
 14:                                     <TextBlock Margin="5" FontSize="16" FontWeight="Bold" Text="{Binding Path=Name}"/>
 15:                                     <TextBlock Margin="5, 0"  Foreground="Blue" Text="{Binding Path=Capital}"/>
 16:                                     <TextBlock Margin="5, 0"  Text="{Binding Path=BigCity}"/>
 17:                                     <TextBlock Margin="5, 0" Text="{Binding Path=NickName}"/>
 18:                                 </StackPanel>
 19:                             </Border>
 20:                         </Expander>
 21:                     </StackPanel>
 22:                 </DataTemplate>
 23:                 
 24:             </ListBox.ItemTemplate>
 25:         </ListBox>
 26:     </Grid>
 27: </Window>
 28: 

Here is our C# code. We create our class to store information about the state and then create a list that class. At the time of loading the window we populate the list box and then assign it to the listbox.

  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 WpfListBox2
 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: 
 27:         private void Window_Loaded(object sender, RoutedEventArgs e)
 28:         {
 29:             List<StateInfo> states = new List<StateInfo>();
 30: 
 31:             states.Add(new StateInfo("Maryland", "Annapolis", "Baltimore", "Old Line State"));
 32:             states.Add(new StateInfo("Washington", "Olympia", "Seattle", "The Evergreen State"));
 33:             states.Add(new StateInfo("California", "Sacramento", "Los Angeles", "Golden State"));            
 34:             states.Add(new StateInfo("Taxes", "Austin", "Houston", "Lone Star State"));
 35:             states.Add(new StateInfo("New York", "Albany", "New York City", "Empire State"));
 36: 
 37:             lst.ItemsSource = states;
 38: 
 39:         }
 40:     }
 41: 
 42:     public class StateInfo
 43:     {
 44:         public StateInfo(string name, string capital, string bigcity, string nickname)
 45:         {
 46:             Name = name;
 47:             Capital = capital;
 48:             BigCity = bigcity;
 49:             NickName = nickname;
 50:         }
 51: 
 52:         public string Name
 53:         { get; set; }
 54: 
 55:         public string Capital
 56:         { get; set; }
 57: 
 58:         public string BigCity
 59:         { get; set; }
 60: 
 61:         public string NickName
 62:         { get; set; }
 63:     }
 64: 
 65: }
 66: 

Here is the output of this program.

ListBoxExpender

Advertisements

Responses

  1. Nice website, very helpful. I do have a question if you have time to help me. I’m just starting out in WPF. So please bare with me. I’m able to populate a Listbox with expander control, but having trouble data binding it to XML. The final results i want is to filters the name in the expander header and when you expand it shows the info of that name.

    any thoughts?

    Thanks
    Rick

    • Thanks to like my blog. If you can give me the sample of your code then it would be easy for me to help you out.

      Regards
      Zeeshan Amjad

  2. Zeeshan, thanks for this example. It was really helpful for me. I’m trying to generate a dynamic accordion-type control for WPF and this works GREAT!

    • Hi Andrew

      Thanks to visit my blog and like 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: