How do I change the WPF Expander Header Text when expanded or collapsed?

Question

Using a WPF expander, I want the Header to change from See More to See Less when the control is expanded, and back to See More when it's collapsed again. I'd prefer a WPF pure solution, rather than a C# or other code behind method. I get the feeling this should be easy, but I'm struggling for the right terms to get a solution via google.

Thanks!

score 23 · Accepted Answer · answered Apr 09 '10 at 00:06

23

You could probably do this in a style trigger:

<Expander>
    <Expander.Style>
        <Style TargetType="Expander">
            <Setter Property="IsExpanded" Value="False" />
            <Setter Property="Header" Value="See More" />

            <Style.Triggers>
                <DataTrigger Binding="{Binding IsExpanded,RelativeSource={RelativeSource Self}}" Value="True">
                    <Setter Property="Header" Value="See Less" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Expander.Style>
</Expander>

That's untested, but it should give you something to go on.

answered Apr 09 '10 at 00:06

Matt Hamilton

200,371
61
386
320

1

Consider it tested, and working exactly as I wanted. Thank you very much. :) – Scott Ferguson Apr 09 '10 at 01:56
2

Make sure you set the Header in the Style, and not in the Expander itself, otherwise the value in the Expander will take precedence over the Style Trigger. – Darren Jun 19 '13 at 14:59
You can use `Trigger` instead of `DataTrigger` if you want to use the control's `IsExpanded` property, like this: `` – g t Nov 04 '15 at 08:52

score 9 · Answer 2 · answered Jul 08 '15 at 09:29

Old (I know), but this can be done with using two simple Trigger without binding:

<Expander>
    <Expander.Style>
        <Style TargetType="Expander" >
            <Style.Triggers>
                <Trigger Property="IsExpanded" Value="True">
                    <Setter Property="Header" Value="See Less" />
                </Trigger>
                <Trigger Property="IsExpanded" Value="False">
                    <Setter Property="Header" Value="See More" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Expander.Style>
</Expander>

How do I change the WPF Expander Header Text when expanded or collapsed?

2 Answers2