WPF 如何创建这样的横向菜单（Modern-UI）

Posted 2023-03-30

【中文标题】WPF 如何创建这样的横向菜单（Modern-UI）

【英文标题】：WPF How to create a lateral menu like this (Modern-UI)

【发布时间】：2014-04-02 16:31:25

【问题描述】：

我是 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>

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

更新

我想要的是在每个组标题旁边添加一个图标，例如上面的 te 按钮，并理想地替换扩展器图标，然后将 RadioButtons 替换为超链接。谢谢！

【问题讨论】：

您可以先将图像放在WrapPanel 中，然后从那里开始

【参考方案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>

这就是结果

【讨论】：

配色方案之外。看起来棒极了。