WPF如何创建这样的（现代UI）的横向菜单 [英] WPF How to create a lateral menu like this (Modern-UI)
本文介绍了WPF如何创建这样的（现代UI）的横向菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在WPF新我想创建一个横向菜单我的应用程序。搜索的想法，我发现这样的画面：
I'm new on WPF and I want to create a lateral menu for my App. Searching for ideas i found this picture:
我的想法是在的效果，一个波纹管其他的像添加按钮。当用户点击一个按钮，它扩展按钮显示子菜单选项。只有一个菜单应在同一时间内展开。
我的第一个测试是使用一个列表框，里面使用的每个按钮扩展，然后一个StackPanel中添加子菜单选项。它是这样的：
My idea is to add buttons like in the picture one bellow the other. When user click a button it expand the button to show sub menu options. Only one menu should be expanded at a time. My first test is to use a listbox, inside use a Expander for each button and then a stackpanel to add sub menu options. It look like this:
这是我的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>
所以它拥有我想要的，但不方面非常相似的行为。我怎样才能提高这使它更像第一形象？谢谢！
So it has the behavior i wanted but not very similar in aspect. How can I improve this to make it more like the first image? Thanks!
更新
我要的是接下来的添加图标像上面和idealy TE按钮每个组标题替换扩展图标，然后我用超链接替换单选按钮。谢谢！
What i want is to add an icon next to every group title like te buttons above and idealy replace the expander icon, then I replace the RadioButtons with Hyperlinks. Thanks!
推荐答案
若干测试我得到了它之后!!!!邮政的解决方案，因此其他的都可以使用它：
After several test I got it!!!! Post the solution so other can use it:
<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>
这是结果。
< IMG SRC =http://i.stack.imgur.com/vUZeC.jpgALT =结果>
这篇关于WPF如何创建这样的（现代UI）的横向菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
