WPF Expander with DataGrid

WPF has a very useful control called Expander. Expander allows you to hide or show any content that is inside of it. Today I'll show you how to use Expander with DataGrid and how to apply a Style to Expander's Header.

Collapsed state

Expanded state

In this particular example I put a DataGrid inside of Expander. I also applied a Style to Expander Header. The Style actually changes Header's text from "Click to See More" to "Click to See Less" when clicking on collapsed Expander and vice versa. Let's see the XAML:

<StackPanel>       
    <Expander Name="MyExpander" Margin="10,10" >
        <Expander.Content>
            <DataGrid Name="dataGrid1" Cursor="Hand" ItemsSource="{Binding Employees}" />
        </Expander.Content>
        <Expander.Style>
            <Style TargetType="Expander">
                <Setter Property="IsExpanded" Value="False" />
                <Setter Property="Header" Value="Click to See More" />
                <Style.Triggers>
                    <DataTrigger Binding="{Binding IsExpanded,RelativeSource={RelativeSource Self}}"                                 Value="True">
                        <Setter Property="Header" Value="Click to See Less" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Expander.Style>
    </Expander>
</StackPanel>

Download the source code (Visual Studio 2010 project).