wpf - 侧边栏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>

标签： wpfxaml

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 会为您工作）。