1.首先引入包MaterialDesignColors和MaterialDesignThemes
2.主页面布局
左侧菜单显示在窗体外,点击左上角菜单图标通过简单的动画呈现出来
3.左侧窗体外菜单
<Grid x:Name="GridMenu" Width="150" HorizontalAlignment="Left" Margin="-150 0 0 0" RenderTransformOrigin="0.5,0.5" Background="#4169E1">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<StackPanel>
<Image Source="../Images/head.png"/ Margin="50,20">
<ListView Foreground="White" FontFamily="Champagne & Limousines" FontSize="18" ItemsSource="{Binding MenuList}">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,10,0,0">
<Button Style="{DynamicResource MenuButtonStyle}"
Command="{Binding DataContext.ShowRegionCommand, RelativeSource={RelativeSource AncestorType={x:Type ListView}}}"
CommandParameter="{Binding ElementName=txtRegion}"/>
<TextBlock Text="{Binding Path = RegionName}" Visibility="Collapsed" Name="txtRegion"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackPanel>
<Button x:Name="ButtonClose" HorizontalAlignment="Right" VerticalAlignment="Top" Background="{x:Null}" Foreground="White" BorderBrush="{x:Null}" Width="30" Height="30" Padding="0">
<materialDesign:PackIcon Kind="Close"/>
</Button>
</Grid>
这里头像的图片写死了,需要的自己替换。
4.菜单样式
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes">
<Storyboard x:Key="CloseMenu">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="GridMenu">
<EasingDoubleKeyFrame KeyTime="0" Value="150"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="GridBackground">
<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
<