Collapsing inner expanders when outer expander collapsed

Question

I am trying to collapse expanded expanders when a toggle button gets unchecked. Using DataTriggers doesn't work. How can I achieve this? And why the DataTrigger doesn't work?

Here's the code.

<Window x:Class="WpfApp4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp4"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel>
            <ToggleButton Name="TheToggle">Collapse expanders when unchecked</ToggleButton>
                    <Expander Header="Menu 1">
                        <Expander.Style>
                            <Style TargetType="Expander">
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding ElementName=TheToggle,Path=IsChecked}" Value="False">
                                        <Setter Property="IsExpanded" Value="False"/>
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Expander.Style>
                        <StackPanel>
                            <Button>Menu Item 1</Button>
                            <Button>Menu Item 2</Button>
                            <Button>Menu Item 3</Button>
                            <Button>Menu Item 4</Button>
                        </StackPanel>
                    </Expander>
                    <Expander Header="Menu 2">
                        <StackPanel>
                            <Button>Menu Item 1</Button>
                            <Button>Menu Item 2</Button>
                            <Button>Menu Item 3</Button>
                            <Button>Menu Item 4</Button>
                        </StackPanel>
                    </Expander>
            <Expander Header="Menu 3">
                <StackPanel>
                    <Button>Menu Item 1</Button>
                    <Button>Menu Item 2</Button>
                    <Button>Menu Item 3</Button>
                    <Button>Menu Item 4</Button>
                </StackPanel>
            </Expander>
        </StackPanel>
    </Grid>
</Window>

Answer 1

I modified your example to collapse/expand all Expander on Buttonclick:

  <Grid>
        <StackPanel>
            <ToggleButton Name="TheToggle" Content="Collapse expanders when unchecked">

            </ToggleButton>
            <Expander Header="Menu 1" IsExpanded="{Binding IsChecked, ElementName=TheToggle, Mode=TwoWay}">
                <StackPanel>
                    <Button>Menu Item 1</Button>
                    <Button>Menu Item 2</Button>
                    <Button>Menu Item 3</Button>
                    <Button>Menu Item 4</Button>
                </StackPanel>
            </Expander>
            <Expander Header="Menu 2" IsExpanded="{Binding IsChecked, ElementName=TheToggle, Mode=TwoWay}">
                <StackPanel>
                    <Button>Menu Item 1</Button>
                    <Button>Menu Item 2</Button>
                    <Button>Menu Item 3</Button>
                    <Button>Menu Item 4</Button>
                </StackPanel>
            </Expander>
            <Expander Header="Menu 3" IsExpanded="{Binding IsChecked, ElementName=TheToggle, Mode=TwoWay}">
                <StackPanel>
                    <Button>Menu Item 1</Button>
                    <Button>Menu Item 2</Button>
                    <Button>Menu Item 3</Button>
                    <Button>Menu Item 4</Button>
                </StackPanel>
            </Expander>
        </StackPanel>
    </Grid>

Is this the wanted behavior?