C# WPF MaterialDesign学习笔记：DrawerHost+PopupBox（持续更新）

• NuGet包使用：

1. MaterialDesignThemes 4.9.0
2. MaterialDesignColors 2.1.4

 

• 效果图

 

App.xaml

<Application x:Class="PP.Test.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:PP.Test"
             StartupUri="MainWindow.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.DeepPurple.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

MainWindow.xaml

<Window x:Class="PP.Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:md="http://materialdesigninxaml.net/winfx/xaml/themes"
        xmlns:local="clr-namespace:PP.Test"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">


    <md:DrawerHost IsRightDrawerOpen="{Binding IsRightDrawerOpen.Value}">

        <md:DrawerHost.LeftDrawerContent>
            <Grid Width="400">
                <Grid.RowDefinitions>
                    <RowDefinition Height="36"/>
                    <RowDefinition Height="36"/>
                    <RowDefinition Height="36"/>
                    <RowDefinition/>
                </Grid.RowDefinitions>

                <Label Grid.Row="0" Content="真菜"/>
                <Label Grid.Row="1" Content="真机拔菜"/>
                <Label Grid.Row="2" Content="真真机拔菜"/>
            </Grid>

        </md:DrawerHost.LeftDrawerContent>

        <Grid HorizontalAlignment="Left" Width="800">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

            <Button Grid.Row="0"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Top"
                        Command="{x:Static md:DrawerHost.OpenDrawerCommand}"
                        CommandParameter="{x:Static Dock.Left}"
                        md:ButtonAssist.CornerRadius="5"
                        BorderBrush="MediumSlateBlue">
                <md:PackIcon Kind="Menu"/>
            </Button>

            <md:PopupBox Grid.Row="1" 
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"
                         PlacementMode="RightAndAlignTopEdges" Margin="10">
                <md:PopupBox.ToggleContent>
                    <md:PackIcon Kind="MenuOpen" Width="20" Height="20" />
                </md:PopupBox.ToggleContent>
                <StackPanel Margin="10" md:ButtonAssist.CornerRadius="5">
                    <Button Content="平A"/>
                    <Button Content="一技轮"/>
                    <Button Content="二技轮"/>
                    <Button Content="大招"/>
                </StackPanel>
            </md:PopupBox>
        </Grid>

    </md:DrawerHost>

</Window>

• 引用

1. Material icons Material Design icons全图标代码及使用教程 - 白超华 - 博客园
2. WPF Material Design UI框架：部分常用控件简单使用_materialdesignin最新版-CSDN博客
3. materialDesign:PopupBox 使用方式 - 马什么梅 - 博客园