public class MenuItem
{
public char Icon { get; set; }
public string Name { get; set; }
public string Text { get; set; }
public string Target { get; set; }
public List<MenuItem> Children { get; set; }
public DelegateCommand<string> ClickCommand { get; set; }
}
_MenuItems = new ObservableCollection<MenuItem>
{
new MenuItem { Name = "Home", Text = "首页", Icon = (Char)0xf80c, Target = "Core.Home", ClickCommand = NavigateCommand },
new MenuItem { Name = "Modules", Text = "工作台", Target = "Core.ModuleCenter", Icon = (Char)0xf21e, ClickCommand = NavigateCommand },
new MenuItem { Name = "Work Bench", Text = "模块中心", Target = "ModuleA.ViewA", Icon = (char)0xf6ee, ClickCommand = NavigateCommand,
Children = new List<MenuItem>{
new MenuItem{ Name = "Home", Text = "首页", Icon = (Char)0xf80c, Target = "Core.Home", ClickCommand = NavigateCommand },
new MenuItem{ Name = "Home", Text = "首页", Icon = (Char)0xf80c, Target = "Core.Home", ClickCommand = NavigateCommand },
new MenuItem{ Name = "Home", Text = "首页", Icon = (Char)0xf80c, Target = "Core.Home", ClickCommand = NavigateCommand },
new MenuItem{ Name = "Home", Text = "首页", Icon = (Char)0xf80c, Target = "Core.Home", ClickCommand = NavigateCommand },
}
},
new MenuItem { Name = "DashBoard", Text = "设置&帮助", Target = "ModuleB.ViewB", Icon = (char)0xf6ee, ClickCommand = NavigateCommand },
};
<Menu Grid.Column="1"
Margin="10 0 10 0"
ItemsSource="{Binding MenuItems}">
<Menu.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</Menu.ItemsPanel>
<Menu.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Children}">
<Label Content="Children"></Label>
</HierarchicalDataTemplate>
</Menu.ItemTemplate>
<Menu.Resources>
<Style TargetType="Menu">
<Setter Property="Background"
Value="Transparent" />
</Style>
<Style TargetType="MenuItem">
<Setter Property="Height"
Value="45" />
<Setter Property="BorderBrush"
Value="Transparent" />
<Setter Property="BorderThickness"
Value="2" />
<Setter Property="Background"
Value="#fff" />
<Setter Property="Foreground"
Value="#ccc" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="MenuItem">
<Grid Margin="{TemplateBinding Margin}"
Height="{TemplateBinding Height}"
Cursor="Hand">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseUp">
<i:InvokeCommandAction Command="{Binding ClickCommand}"
CommandParameter="{Binding Target}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<Border BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}" />
<StackPanel x:Name="content"
Margin="10 0 10 0"
Orientation="Horizontal"
HorizontalAlignment="Center"
VerticalAlignment="Stretch">
<TextBlock x:Name="iconText"
Margin="0 0 5 0"
Text="{Binding Icon}"
FontSize="16"
Foreground="{TemplateBinding Foreground}"
Block.TextAlignment="Center"
VerticalAlignment="Center"
FontFamily="{StaticResource FontAwesomeFamily}" />
<TextBlock x:Name="titleText"
Margin="5 0 0 0"
Text="{Binding Text}"
Foreground="{TemplateBinding Foreground}"
Block.TextAlignment="Center"
VerticalAlignment="Center" />
</StackPanel>
<Border x:Name="indicator"
VerticalAlignment="Bottom"
HorizontalAlignment="Center"
Height="2"
Background="Red"
Width="{TemplateBinding ActualWidth}">
<Border.RenderTransform>
<ScaleTransform x:Name="indicatorTransform"
ScaleX="0" />
</Border.RenderTransform>
</Border>
<Popup AllowsTransparency="True"
IsOpen="{Binding Path=IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}">
<Border Margin="2"
Background="#fff">
<Border.Effect>
<DropShadowEffect ShadowDepth="2"
Color="#aaa"
Opacity="0.5"
BlurRadius="120"
Direction="-90" />
</Border.Effect>
<Grid Margin="10">
<StackPanel IsItemsHost="True"
VerticalAlignment="Stretch"
KeyboardNavigation.DirectionalNavigation="Cycle">
</StackPanel>
</Grid>
</Border>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver"
Value="false" />
</MultiTrigger.Conditions>
<MultiTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="(Foreground).Color"
To="#AAA" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetName="indicatorTransform"
Storyboard.TargetProperty="ScaleX"
From="1"
To="0" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.EnterActions>
<MultiTrigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.2"
Storyboard.TargetProperty="(Foreground).Color"
To="Red" />
<DoubleAnimation Duration="0:0:0.2"
Storyboard.TargetName="indicatorTransform"
Storyboard.TargetProperty="ScaleX"
From="0"
To="1" />
</Storyboard>
</BeginStoryboard>
</MultiTrigger.ExitActions>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Menu.Resources>
</Menu>