WPF 在 6 个堆栈面板之间切换可见性并在一个打开时隐藏所有其他面板

WPF toggle visibility between 6 stack panels and hide all others when one is opened

我有六个堆栈面板元素,它们全部由一个单独的切换按钮切换,这正是我所需要的。但是,当用户打开其中一个堆栈面板时,我想关闭所有其他面板,只显示他们点击的面板。

<Grid HorizontalAlignment="Left" Height="504" Margin="-1,1,0,0" VerticalAlignment="Top" Width="760">

    <Grid.Resources>
        <BooleanToVisibilityConverter x:Key="boolConverter" />
    </Grid.Resources>

    <StackPanel HorizontalAlignment="Left" Height="505" VerticalAlignment="Top" Width="124" Background="#FF45B8F9" Margin="1,-1,0,0"/>

    <StackPanel HorizontalAlignment="Left" Height="505" VerticalAlignment="Top" Width="124" Background="#FFF95545" Margin="636,0,0,-1" Visibility="{Binding ElementName=button, Path=IsChecked, Converter={StaticResource boolConverter}}"/>

    <StackPanel HorizontalAlignment="Left" Height="505" VerticalAlignment="Top" Width="124" Background="#FFF9F945" Margin="507,-1,0,0" Visibility="{Binding ElementName=button_Copy, Path=IsChecked, Converter={StaticResource boolConverter}}"/>

    <StackPanel HorizontalAlignment="Left" Height="505" VerticalAlignment="Top" Width="124" Background="#FF76F945" Margin="378,-1,0,0" Visibility="{Binding ElementName=button1, Path=IsChecked, Converter={StaticResource boolConverter}}"/>

    <ToggleButton x:Name="button" Content="Green" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="105" Click="button_Click"/>

    <ToggleButton x:Name="button_Copy" Content="Yellow" HorizontalAlignment="Left" Margin="10,55,0,0" VerticalAlignment="Top" Width="105" Click="button_Click"/>

    <ToggleButton x:Name="button1" Content="Red" HorizontalAlignment="Left" Margin="10,114,0,0" VerticalAlignment="Top" Width="105"/>

</Grid>

制作 RadioButton 自定义模板以像扩展器一样显示:

<Style TargetType="{x:Type RadioButton}">
    <Setter Property="GroupName" Value="MyToggleButtonGroupName"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RadioButton}">
                <Expander IsExpanded="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsChecked}">
                    <ContentPresenter/>
                </Expander>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<RadioButton>
    <StackPanel>...</StackPanel>
</RadioButton>
<RadioButton>
    <StackPanel>...</StackPanel>
</RadioButton>
<RadioButton>
    <StackPanel>...</StackPanel>
</RadioButton>