C# WPF抽屉式侧边栏导航栏炫酷漂亮效果 MD主题重绘原生控件的美观效果提供源码Demo下载

置顶程序猎人-007

已于 2023-04-23 10:02:00 修改

阅读量6.3k

点赞数 1

分类专栏：服务器，tcp，c# 文章标签： wpf c# 开发语言抽屉风格侧边菜单栏

于 2020-06-09 15:18:03 首次发布

本文链接： https://blog.csdn.net/liyu3519/article/details/106642997

版权

服务器，tcp，c# 专栏收录该内容

4 篇文章 5 订阅

订阅专栏

源码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

打开侧边栏菜单效果