<howto>Create an Expander Group without Code</howto>

August 4, 2008

2 comments

Introduction: You have a collection of items and you want to display them as an expander group. Only one expander should be opened at a time.

 

Problem: There is no expander group in WPF such as panel for RadioButton, also you don’t want to write custom code, only XAML.

 

Solution: Bind the collection of items to a ListBox. Create a DataTemplate to display each item as an expander. Bind the expander IsExpanded property to the ListBoxItem.IsSelected. Override the default ListBoxItem style so it wont visualize selected state.

 

image image image

 

Code Snippet:

<DataTemplate DataType="{x:Type local:Sign}">
    <Expander Padding="4"
              IsExpanded="{Binding RelativeSource={
                    RelativeSource Mode=FindAncestor, AncestorType={
                       x:Type ListBoxItem}}, Path=IsSelected}">

        <Expander.Header>
            <TextBlock Text="{Binding Name}" ... />
        </Expander.Header>
        <DockPanel LastChildFill="True">
            <Border DockPanel.Dock="Left" CornerRadius="16" BorderBrush="WhiteSmoke" Background="AliceBlue" BorderThickness="5" HorizontalAlignment="Center" VerticalAlignment="Center">
                <Image Source="{Binding Icon}" Width="90" Height="90" Stretch="Fill" />
            </Border>
            ...
        </DockPanel>                
    </Expander>
</DataTemplate>

 
<ListBox ItemsSource="{Binding Path=Signs}" />

 

* There is another solution, you can create a RadioButton control template to be displayed as expander

Download the code from here.

Add comment
facebook linkedin twitter email

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

2 comments

  1. FlynnJanuary 29, 2010 ב 07:01

    exactly what I am looking for! Thanks

    Reply
  2. Luke November 7, 2012 ב 15:29

    Excellent post. It really helped me

    Reply