我是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。谢谢!
答案 0 :(得分:14)
<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>
这是结果