源码Demo下载链接:https://download.csdn.net/download/liyu3519/16620649
使用C#-WPF实现抽屉效果-炫酷漂亮的侧边栏导航菜单-SplitView+MD主题重绘原生控件的美观效果-提供源码Demo下载
1.使用Nuget安装MaterialDesignThemes
2.在App.xaml的<Application.Resources>中的添加以下代码
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml"/>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml"/>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml"/>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Indigo.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
3.界面XAML中添加以下代码
<Window.Resources>
<Storyboard x:Key="MenuOpen">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu">
<EasingDoubleKeyFrame KeyTime="0" Value="60"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="200"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="MenuClose">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu">
<EasingDoubleKeyFrame KeyTime="0" Value="200"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="60"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonOpenMenu">
<BeginStoryboard Storyboard="{StaticResource MenuOpen}"/>
</EventTrigger>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonCloseMenu">
<BeginStoryboard Storyboard="{StaticResource MenuClose}"/>
</EventTrigger>
</Window.Triggers>
<Grid Background="LightGray">
<Grid x:Name="GridTitle" Height="50" VerticalAlignment="Top" Background="#FF1368BD" MouseDown="GridTitle_MouseDown" Margin="60,0,0,0">
<TextBlock Text="抽屉式菜单风格-材料设计主题控件" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="22" Foreground="White"/>
<StackPanel VerticalAlignment="Center" Orientation="Horizontal" HorizontalAlignment="Right">
<TextBlock Text="欢迎使用" VerticalAlignment="Center" FontSize="14" Foreground="White"/>
<materialDesign:PopupBox Foreground="White" Margin="10" PlacementMode="BottomAndAlignRightEdges" StaysOpen="False">
<StackPanel Width="150">
<Button Content="账号"/>
<Button Content="设置"/>
<Button Content="帮助"/>
<Separator/>
<Button Content="最小化"/>
<Button Content="最大化"/>
<Button x:Name="ButtonPopUpLogout" Content="退出" Click="ButtonPopUpLogout_Click"/>
</StackPanel>
</materialDesign:PopupBox>
</StackPanel>
</Grid>
<Grid x:Name="GridMenu" Width="60" HorizontalAlignment="Left" Background="#FF1B3861" Margin="0" SizeChanged="GridMenu_SizeChanged">
<StackPanel>
<Grid Background="#FF1368BD">
<Button x:Name="ButtonCloseMenu" Width="60" Height="50" Background="{x:Null}" BorderBrush="{x:Null}" VerticalAlignment="Top" HorizontalAlignment="Right" Visibility="Collapsed" Click="ButtonCloseMenu_Click">
<materialDesign:PackIcon Kind="ArrowLeft" Foreground="#FF1B3861" Width="25" Height="25"/>
</Button>
<Button x:Name="ButtonOpenMenu" Width="60" Height="50" Background="{x:Null}" BorderBrush="{x:Null}" VerticalAlignment="Top" HorizontalAlignment="Right" Click="ButtonOpenMenu_Click">
<materialDesign:PackIcon Kind="Menu" Foreground="#FF1B3861" Width="25" Height="25"/>
</Button>
</Grid>
<ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled" Foreground="#FF1368BD">
<ListViewItem Height="60" MouseLeftButtonUp="ListViewItem_MouseLeftButtonUp">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="ViewDashboard" Width="25" Height="25" Margin="10" VerticalAlignment="Center" />
<TextBlock Text="系统首页" VerticalAlignment="Center" Margin="20 10" Foreground="White"/>
</StackPanel>
</ListViewItem>
<ListViewItem Height="60" MouseLeftButtonUp="ListViewItem_MouseLeftButtonUp">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="DebugStepOver" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/>
<TextBlock Text="设备调试" VerticalAlignment="Center" Margin="20 10" Foreground="White"/>
</StackPanel>
</ListViewItem>
<ListViewItem Height="60" MouseLeftButtonUp="ListViewItem_MouseLeftButtonUp">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="Settings" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/>
<TextBlock Text="参数设置" VerticalAlignment="Center" Margin="20 10" Foreground="White"/>
</StackPanel>
</ListViewItem>
<ListViewItem Height="60" MouseLeftButtonUp="ListViewItem_MouseLeftButtonUp">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="Text" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/>
<TextBlock Text="工作记录" VerticalAlignment="Center" Margin="20 10" Foreground="White"/>
</StackPanel>
</ListViewItem>
<ListViewItem Height="60" MouseLeftButtonUp="ListViewItem_MouseLeftButtonUp">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="User" Width="25" Height="25" Margin="10" VerticalAlignment="Center"/>
<TextBlock Text="用户中心" VerticalAlignment="Center" Margin="20 10" Foreground="White"/>
</StackPanel>
</ListViewItem>
</ListView>
</StackPanel>
</Grid>
<Grid x:Name="gdMian" Background="White" Margin="60,50,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<GroupBox>
<GroupBox.Header>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" >
<materialDesign:PackIcon Kind="Billboard" HorizontalAlignment="Center" VerticalAlignment="Center" Width="18" Height="18" Foreground="White"/>
<TextBlock Text="控件效果1" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White"/>
</StackPanel>
</GroupBox.Header>
<TabControl>
<TabItem>
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="Tab"/>
<TextBlock Text="选项卡1"/>
</StackPanel>
</TabItem.Header>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="0" Grid.Column="0">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<materialDesign:PackIcon Kind="GestureTapButton" HorizontalAlignment="Center" VerticalAlignment="Center" Width="18" Height="18"/>
<TextBlock Text="按钮控件" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
</Button>
<Button HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="0" Grid.Column="1" Background="#FFB821F3" BorderBrush="#FFB821F3">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<materialDesign:PackIcon Kind="GestureTapButton" HorizontalAlignment="Center" VerticalAlignment="Center" Width="18" Height="18"/>
<TextBlock Text="按钮控件" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
</Button>
<Button HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="0" Grid.Column="2" Background="#FFF39421" BorderBrush="#FFF39421">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<materialDesign:PackIcon Kind="GestureTapButton" HorizontalAlignment="Center" VerticalAlignment="Center" Width="18" Height="18"/>
<TextBlock Text="按钮控件" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
</Button>
<Button HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.Column="0" Background="{x:Null}" Foreground="#2196F3">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<materialDesign:PackIcon Kind="GestureTapButton" HorizontalAlignment="Center" VerticalAlignment="Center" Width="18" Height="18"/>
<TextBlock Text="按钮控件" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
</Button>
<Button HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" BorderBrush="#FFB821F3" Background="{x:Null}" Foreground="#FFB821F3">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<materialDesign:PackIcon Kind="GestureTapButton" HorizontalAlignment="Center" VerticalAlignment="Center" Width="18" Height="18"/>
<TextBlock Text="按钮控件" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
</Button>
<Button HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.Column="2" Background="{x:Null}" BorderBrush="#FFF39421" Foreground="#FFF39421">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
<materialDesign:PackIcon Kind="GestureTapButton" HorizontalAlignment="Center" VerticalAlignment="Center" Width="18" Height="18"/>
<TextBlock Text="按钮控件" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</StackPanel>
</Button>
<CheckBox Content="复选框1" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#2196F3"/>
<CheckBox Content="复选框2" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#FFB821F3"/>
<CheckBox Content="复选框3" Grid.Row="2" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#FFF39421"/>
<RadioButton Content="单选框1" Grid.Row="3" Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#2196F3" Cursor=""/>
<RadioButton Content="单选框2" Grid.Row="3" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#FFB821F3"/>
<RadioButton Content="单选框3" Grid.Row="3" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#FFF39421"/>
<ComboBox Grid.Row="4" Grid.Column="0" Margin="10,0,10,0" SelectedIndex="0" Foreground="Black" HorizontalContentAlignment="Center" >
<ComboBoxItem Content="下拉选项1"/>
<ComboBoxItem Content="下拉选项2"/>
<ComboBoxItem Content="下拉选项3"/>
<ComboBoxItem Content="下拉选项4"/>
<ComboBoxItem Content="下拉选项5"/>
</ComboBox>
<materialDesign:TimePicker Grid.Row="4" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center" Width="120" SelectedTime="12:30:30" SelectedTimeFormat="Long" Cursor="" />
<materialDesign:ColorPicker Grid.Row="8" Grid.ColumnSpan="3"/>
<materialDesign:RatingBar Grid.Row="4" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" Max="8" Value="5"/>
<materialDesign:Card Grid.Row="5" Background="#2196F3" Foreground="White">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Card" />
</materialDesign:Card>
<materialDesign:Card Grid.Row="5" Grid.Column="1" Background="#FFB821F3" Foreground="White">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Card" />
</materialDesign:Card>
<materialDesign:Card Grid.Row="5" Grid.Column="2" Background="#FFF39421" Foreground="White">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Card" />
</materialDesign:Card>
<Slider Grid.Row="6" VerticalAlignment="Center" Maximum="100" Value="60"/>
<ProgressBar Grid.Row="6" Grid.Column="1" VerticalAlignment="Center" Maximum="100" Value="60" Height="12"/>
<PasswordBox Grid.Row="6" Grid.Column="2" Password="123456" VerticalAlignment="Center" HorizontalContentAlignment="Center" />
<TextBox Grid.Row="7" Grid.Column="0" Text="文本框" VerticalAlignment="Center" HorizontalContentAlignment="Center"/>
<TextBox Grid.Row="7" Grid.Column="1" Text="文本框" VerticalAlignment="Center" HorizontalContentAlignment="Center" IsEnabled="False"/>
<TextBox Grid.Row="7" Grid.Column="3" Text="文本框" VerticalAlignment="Center" HorizontalContentAlignment="Center" MaxLength="36"/>
</Grid>
</TabItem>
<TabItem>
<TabItem.Header>
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="Tab"/>
<TextBlock Text="选项卡2"/>
</StackPanel>
</TabItem.Header>
<Grid>
<TextBlock Text="选项卡2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</TabItem>
</TabControl>
</GroupBox>
<GroupBox Grid.Column="1">
<GroupBox.Header>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" >
<materialDesign:PackIcon Kind="Billboard" HorizontalAlignment="Center" VerticalAlignment="Center" Width="18" Height="18" Foreground="White"/>
<TextBlock Text="控件效果2" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White"/>
</StackPanel>
</GroupBox.Header>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="460"/>
<RowDefinition Height="31*"/>
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Calendar Margin="0,0,0,0" Grid.RowSpan="1" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<materialDesign:Clock Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center" />
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="50"/>
<RowDefinition Height="159*"/>
</Grid.RowDefinitions>
</Grid>
<!--<materialDesign:DialogHost Grid.Column="1" />-->
</Grid>
<DataGrid Grid.Row="1" CanUserAddRows="True">
<DataGrid.Columns>
<materialDesign:DataGridTextColumn Header="编号" Width="*"/>
<DataGridTextColumn Header="姓名" Width="*"/>
<materialDesign:DataGridComboBoxColumn Header="性别" Width="*"/>
<materialDesign:DataGridTextColumn Header="年龄" Width="*"/>
</DataGrid.Columns>
</DataGrid>
</Grid>
</GroupBox>
</Grid>
</Grid>
4.在代码中添加事件定义代码
private void ButtonPopUpLogout_Click(object sender, RoutedEventArgs e)
{
Application.Current.Shutdown();
}
private void ButtonOpenMenu_Click(object sender, RoutedEventArgs e)
{
ButtonOpenMenu.Visibility = Visibility.Collapsed;
ButtonCloseMenu.Visibility = Visibility.Visible;
}
private void ButtonCloseMenu_Click(object sender, RoutedEventArgs e)
{
ButtonOpenMenu.Visibility = Visibility.Visible;
ButtonCloseMenu.Visibility = Visibility.Collapsed;
}
private void GridTitle_MouseDown(object sender, MouseButtonEventArgs e)
{
if (e.ChangedButton == MouseButton.Left)
DragMove();
}
private void GridMenu_SizeChanged(object sender, SizeChangedEventArgs e)
{
gdMian.Margin = new Thickness(e.NewSize.Width, 50, 0, 0);
}
private void ListViewItem_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
}
5.程序效果源码Demo下载地址:https://download.csdn.net/download/liyu3519/16620649
打开侧边栏菜单效果
关闭侧边菜单栏效果