c# - WPF 如何创建这样的横向菜单(现代 UI)

Question

我是 WPF 的新手，我想为我的应用程序创建一个横向菜单。搜索想法我找到了这张图片:

我的想法是像图片中那样添加一个按钮。当用户单击按钮时，它会展开按钮以显示子菜单选项。一次只能展开一个菜单。我的第一个测试是使用列表框，在内部为每个按钮使用扩展器，然后使用堆栈面板添加子菜单选项。它看起来像这样:

这是我的 XAML:

<Window x:Class="InterfazOhmio.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" Background="Gray">    
    <Grid>       
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <ListBox>
            <ListBox.Resources>
                <Style TargetType="{x:Type Expander}">
                    <Setter Property="IsExpanded"
           Value="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"/>
                </Style>
            </ListBox.Resources>
            <ListBox.Template>
                <ControlTemplate TargetType="{x:Type ListBox}">
                    <ItemsPresenter/>
                </ControlTemplate>
            </ListBox.Template>
            <ListBox.ItemContainerStyle>
                <Style TargetType="{x:Type ListBoxItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                <ContentPresenter Content="{TemplateBinding Content}"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>

            <Expander Background="GreenYellow"  Width="243" Header="Pedidos">                
                <StackPanel>                    
                    <RadioButton Margin="20,5,5,5" Content="Nuevo Pedido" GroupName="Two"/>
                    <RadioButton Margin="20,5,5,5" Content="Consultar Pedidos" GroupName="Two"/>
                    <RadioButton Margin="20,5,5,5" Content="Pedidos Pendientes" GroupName="Two"/>
                </StackPanel>
            </Expander>
            <Expander Background="BurlyWood" Width="243" Header="Remitos" Expanded="Expander_Expanded">
                <StackPanel>
                    <RadioButton Content="Nuevo Remito" GroupName="Two"/>
                    <RadioButton Content="Consulta de Remitos" GroupName="Two"/>
                    <RadioButton Content="Remitos Pendientes de Facturar" GroupName="Two"/>
                </StackPanel>
            </Expander>
            <Expander Background="OrangeRed" Width="243" Header="Facturas de Ventas">
                <StackPanel>
                    <RadioButton Content="Nueva Factura" GroupName="Two"/>
                    <RadioButton Content="Consulta Facturas" GroupName="Two"/>                    
                </StackPanel>
            </Expander>
        </ListBox>        
    </Grid>    
</Window>

所以它具有我想要的行为，但在方面不是很相似。我如何改进它以使其更像第一张图片？谢谢!

更新

我想要的是在每个组标题旁边添加一个图标，如上面的按钮，理想情况下替换扩展器图标，然后我用超链接替换 ​​RadioButtons。谢谢!

Answer 1

经过多次测试，我明白了!!!!发布解决方案以便其他人可以使用它:

<Window x:Class="InterfazOhmio.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" Background="Gray">    
    <Grid>       
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <ListBox ScrollViewer.VerticalScrollBarVisibility="Auto">
            <ListBox.Resources>
                <Style TargetType="{x:Type Expander}">
                    <Setter Property="IsExpanded"
           Value="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"/>
                </Style>
            </ListBox.Resources>
            <ListBox.Template>
                <ControlTemplate TargetType="{x:Type ListBox}">
                    <ItemsPresenter/>
                </ControlTemplate>
            </ListBox.Template>
            <ListBox.ItemContainerStyle>
                <Style TargetType="{x:Type ListBoxItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ListBoxItem}">
                                <ContentPresenter Content="{TemplateBinding Content}"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ListBox.ItemContainerStyle>            

            <Expander Background="OliveDrab">                
                <Expander.Header>
                    <BulletDecorator>
                        <BulletDecorator.Bullet>
                            <Image Source="Iconos/Pedidos.png" Width="64" Height="64" HorizontalAlignment="Left" VerticalAlignment="Top" />                            
                        </BulletDecorator.Bullet>                        
                        <TextBlock Margin="10,0,0,0" Text="Pedidos" VerticalAlignment="Center" HorizontalAlignment="Stretch" Foreground="White" />
                    </BulletDecorator>
                </Expander.Header>
                <WrapPanel>
                    <Label Margin="20,5,5,5" Foreground="white" Content="Nuevo Pedido"/>
                    <Label Margin="20,5,5,5" Foreground="white" Content="Consultar Pedidos"/>
                    <Label Margin="20,5,5,5" Foreground="white" Content="Pedidos Pendientes"/>                    
                </WrapPanel>
            </Expander>

            <Expander Background="OrangeRed">
                <Expander.Header>
                    <BulletDecorator>
                        <BulletDecorator.Bullet>
                            <Image Source="Iconos/Remitos.png" Width="64" Height="64" HorizontalAlignment="Left" VerticalAlignment="Top" />
                        </BulletDecorator.Bullet>
                        <TextBlock Margin="10,0,0,0" Text="Remitos" VerticalAlignment="Center" HorizontalAlignment="Stretch" Foreground="White" />
                    </BulletDecorator>
                </Expander.Header>
                <WrapPanel>
                    <Label Margin="20,5,5,5" Foreground="white" Content="Nuevo Remito"/>
                    <Label Margin="20,5,5,5" Foreground="white" Content="Consultar Remitos"/>
                    <Label Margin="20,5,5,5" Foreground="white" Content="Remitos Pendientes de Facturar"/>
                </WrapPanel>
            </Expander>

            <Expander Background="Teal">
                <Expander.Header>
                    <BulletDecorator>
                        <BulletDecorator.Bullet>
                            <Image Source="Iconos/Facturas.png" Width="64" Height="64" HorizontalAlignment="Left" VerticalAlignment="Top" />
                        </BulletDecorator.Bullet>
                        <TextBlock Margin="10,0,0,0" Text="Facturas" VerticalAlignment="Center" HorizontalAlignment="Stretch" Foreground="White" />
                    </BulletDecorator>
                </Expander.Header>
                <WrapPanel>
                    <Label Margin="20,5,5,5" Foreground="white" Content="Nueva Factura"/>
                    <Label Margin="20,5,5,5" Foreground="white" Content="Consultar Facturas Normales y Anuladas"/>                    
                </WrapPanel>
            </Expander>          

        </ListBox>        
    </Grid>    
</Window>

这是结果