Modify expander header children when expanded

Question

I can't figure out how to do it in XAML. I came up with workarounds that use Expanded/Collapsed events, but they just don't feel right.

I have a DataGrid, with groups, that are templated as expanders. I have a button inside expander, that's hidden by default, and only needs to be shown when an expander is expanded.

<GroupStyle.ContainerStyle>
    <Style TargetType="{x:Type GroupItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type GroupItem}">                                        
                    <Expander IsExpanded="True">
                        <Expander.Header>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="Some Text"/>
                                <Button Name="MyButton" Visibility="Collapsed" Content="Add All"/>                                                    
                            </StackPanel>
                        </Expander.Header>
                        <Expander.Content>
                            <ItemsPresenter />
                        </Expander.Content>
                    </Expander>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</GroupStyle.ContainerStyle>

So basically the code in question is right in the middle:

<Expander IsExpanded="True">
    <Expander.Header>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="Some Text"/>
            <Button Name="MyButton" Visibility="Collapsed" Content="Add All"/>                                                    
        </StackPanel>
    </Expander.Header>
    <Expander.Content>
        <ItemsPresenter />
    </Expander.Content>
</Expander>

I'm trying to set Visibility of the Button to false, when the expander is expanded. I tried using a trigger like the following:

<Expander.Style>
    <Style TargetType="Expander">
        <Style.Triggers>
            <DataTrigger Binding="{Binding IsExpanded, RelativeSource={RelativeSource Self}}" Value="False">
                <Setter TargetProperty="MyButton" Property="Visibility" Value="Visible" />
            </DataTrigger>
        </Style.Triggers>
    </Style>
</Expander.Style>

, but the compiler doesn't accept it, because it can't find MyButton (I'm guessing because it's inside a header). Any ideas on how I can get this to work?

Answer 1

You have to move the DataTrigger in a ControlTemplate like this:

<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type GroupItem}">
            <Expander Name="Expander" IsExpanded="True">
                <Expander.Header>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="Some Text" />

                        <Button Name="MyButton"
                                Visibility="Collapsed"
                                Content="Add All" />
                    </StackPanel>
                </Expander.Header>

                <Expander.Content>
                    <ItemsPresenter />
                </Expander.Content>
            </Expander>

            <ControlTemplate.Triggers>
                <DataTrigger Binding="{Binding Path=IsExpanded, ElementName=Expander}" Value="False">
                    <Setter TargetName="MyButton" Property="Visibility" Value="Visible" />
                </DataTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Setter.Value>
 </Setter>

Notes

• I explicitly set the name for the Expander, because the construction RelativeSource={RelativeSource Self} points to control himself, and there in GroupItem is no property IsExpanded.

• In Setter does not have a TargetProperty property, but there are TargetName.