боковая панель с несколькими складными подменю в боковой панели wpf

Question

У меня есть две кнопки переключения, которые я привык использовать для опции подменю сворачиваемой боковой панели. Я хочу, чтобы оба изначально были свернуты. когда из них нажимается, он кричит «развернуть», а при нажатии на другое подменю первое должно свернуться, а другое должно открыться.

                                <ToggleButton Grid.Column="0" Height="50" Style="{StaticResource CategoryButton}" FontSize="14" FontWeight="Regular" Foreground="{StaticResource SupremeFontColor}" Margin="6,2,6,0"
                                        FontFamily="{StaticResource FontFamily}" Content="Report Group" ToolTip="Report Group" x:Name="reportToggleButton"  BorderBrush="Transparent" Click="reportToggleButton_Click">
                                </ToggleButton>
                                <Grid  Height="60" Visibility="{Binding IsChecked, ElementName=reportToggleButton, Converter={StaticResource BoolToVisibilityConverter}}">
                                    <Grid.RowDefinitions>
                                        <RowDefinition/>
                                        <RowDefinition/>
                                    </Grid.RowDefinitions>
                                    <TextBlock Text="Fail Reports." Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,0,0,0" Width="Auto" Height="30">
                                        <TextBlock.Style>
                                            <Style TargetType="TextBlock">
                                                <Setter Property="Background" Value="white" />
                                                <Style.Triggers>
                                                    <Trigger Property="IsMouseOver" Value="True">
                                                        <Setter Property="Background" Value="{StaticResource SupremeprimaryDarkBlue}" />
                                                    </Trigger>
                                                </Style.Triggers>
                                            </Style>
                                        </TextBlock.Style>
                                    </TextBlock>
                                    <TextBlock Text="Other Reports." Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,0,0,0" Width="Auto" Height="30">
                                        <TextBlock.Style>
                                            <Style TargetType="TextBlock">
                                                <Setter Property="Background" Value="white" />
                                                <Style.Triggers>
                                                    <Trigger Property="IsMouseOver" Value="True">
                                                        <Setter Property="Background" Value="{StaticResource SupremeprimaryDarkBlue}" />
                                                    </Trigger>
                                                </Style.Triggers>
                                            </Style>
                                        </TextBlock.Style>
                                    </TextBlock>
                                </Grid>
                                
                                <!--Sales Report-->
                                <ToggleButton Grid.Column="0" Height="50" Style="{StaticResource CategoryButton}" FontSize="14" FontWeight="Regular" Foreground="{StaticResource SupremeFontColor}"  Margin="6,2,6,0"
                                        FontFamily="{StaticResource FontFamily}" Content="Sales Report" ToolTip="Sales Report"  x:Name="salesToggleButton"  BorderBrush="Transparent" Click="salesToggleButton_Click">
                                </ToggleButton>
                                <Grid  Height="60" Visibility="{Binding IsChecked, ElementName=salesToggleButton, Converter={StaticResource BoolToVisibilityConverter}}">
                                    <Grid.RowDefinitions>
                                        <RowDefinition/>
                                        <RowDefinition/>
                                    </Grid.RowDefinitions>
                                    <TextBlock Text="Daily Course Summary" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Center" Width="Auto" Height="30">
                                        <TextBlock.Style>
                                            <Style TargetType="TextBlock">
                                                <Setter Property="Background" Value="white" />
                                                <Style.Triggers>
                                                    <Trigger Property="IsMouseOver" Value="True">
                                                        <Setter Property="Background" Value="{StaticResource SupremeprimaryDarkBlue}" />
                                                    </Trigger>
                                                </Style.Triggers>
                                            </Style>
                                        </TextBlock.Style>
                                    </TextBlock>
                                    <TextBlock Text="Finalize Event Payment Report" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center" Width="Auto" Height="30">
                                        <TextBlock.Style>
                                            <Style TargetType="TextBlock">
                                                <Setter Property="Background" Value="white" />
                                                <Style.Triggers>
                                                    <Trigger Property="IsMouseOver" Value="True">
                                                        <Setter Property="Background" Value="{StaticResource SupremeprimaryDarkBlue}" />
                                                    </Trigger>
                                                </Style.Triggers>
                                            </Style>
                                        </TextBlock.Style>
                                    </TextBlock>
                                </Grid>

Answer 1

Сначала я бы хоть немного убрал ваш беспорядок:

<!--I used StackPanel, but it can be any container you have-->
            <StackPanel>
                <StackPanel.Resources>
                    <Style TargetType="TextBlock" x:Key="myTextbox">
                        <Setter Property="Background" Value="White" />
                        <Setter Property="VerticalAlignment" Value="Center"/>
                        <Setter Property="HorizontalAlignment" Value="Center"/>
                        <Setter Property="Margin" Value="0"/>
                        <Setter Property="Width" Value="Auto"/>
                        <Setter Property="Height" Value="30"/>
                        <Style.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background"  Value="White"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>

                    <Style TargetType="ToggleButton" x:Key="myToggleButton">
                        <Setter Property="Height" Value="50" />
                        <Setter Property="FontSize" Value="14"/>
                        <Setter Property="FontWeight" Value="Regular"/>
                        <Setter Property="Margin" Value="6,2,6,0"/>
                        <Setter Property="BorderBrush" Value="Transparent"/>
                    </Style>
                </StackPanel.Resources>


                <ToggleButton Content="Report Group" ToolTip="Report Group" x:Name="reportToggleButton" Click="reportToggleButton_Click" Style="{StaticResource myToggleButton}"/>

                <StackPanel Orientation="Horizontal" Height="60" Visibility="{Binding IsChecked, ElementName=reportToggleButton, Converter={StaticResource boolToVisibilityConverter}}">
                    <TextBlock Text="Fail Reports."   Style="{StaticResource myTextbox}"/>
                    <TextBlock Text="Other Reports." Style="{StaticResource myTextbox}"/>
                </StackPanel>

                <!--Sales Report-->
                <ToggleButton Content="Sales Report" ToolTip="Sales Report"  x:Name="salesToggleButton" Click="salesToggleButton_Click" Style="{StaticResource myToggleButton}"/>

                <StackPanel Orientation="Horizontal" Height="60" Visibility="{Binding IsChecked, ElementName=salesToggleButton, Converter={StaticResource boolToVisibilityConverter}}">
                    <TextBlock Text="Daily Course Summary" Style="{StaticResource myTextbox}"/>
                    <TextBlock Text="Finalize Event Payment Report" Style="{StaticResource myTextbox}"/>
                </StackPanel>

            </StackPanel>

А потом добавил бы что-то вроде этого в ваши обработчики событий:

        private void reportToggleButton_Click(object sender, RoutedEventArgs e)
        {
            salesToggleButton.IsChecked = !(sender as ToggleButton).IsChecked;
        }

        private void salesToggleButton_Click(object sender, RoutedEventArgs e)
        {
            reportToggleButton.IsChecked = !(sender as ToggleButton).IsChecked;
        }

Однако я бы рекомендовал вы должны узнать, как использовать стандартные компоненты (возможно, MenuItem или TreeItem подойдут вам), прежде чем рассматривать создание чего-то подобного.