（一）环境搭建

1. 环境准备

1. 新建WPF应用程序
2. 安装插件在nuget程序包，Prism.DryIoc，MaterialDesignThemes

1.1 配置app.xaml

https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit

<prism:PrismApplication x:Class="命名空间.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:命名空间"
             xmlns:prism="http://prismlibrary.com/"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <materialDesign:BundledTheme 
                    BaseTheme="Light" 
                    PrimaryColor="DeepPurple" 
                    SecondaryColor="Lime" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</prism:PrismApplication>

app.xaml.cs

 public partial class App : PrismApplication
 {
     protected override Window CreateShell()
     {
        return Container.Resolve<MainWindow>();
     }

     protected override void RegisterTypes(IContainerRegistry containerRegistry)
     {
     }
 }

测试：加一个按钮看是否有颜色

1.2 添加WebApi

在解决方案中新建

设为启动项目然后启动一下

看到这个即启动成功

1.3 MaterialDesignInXAML编译

可以把MaterialDesignInXAMLgit到本地运行一下，查看需要的代码会更方便

解决方案和启动项设置如图

运行后

设计首页导航条

1. 在MaterialDesignInXAML找到mainwindow，复制导航栏部分代码

引入命名空间和样式代码（用于切换样式的功能）
xmlns:materialDesign=“http://materialdesigninxaml.net/winfx/xaml/themes”

<Window x:Class="命名空间.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:local="clr-namespace:MyToDo"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        mc:Ignorable="d"
        Title="MainWindow" 
        Height="768" 
        Width="1280"
        AllowsTransparency="True"
        WindowStyle="None"
        WindowStartupLocation="CenterScreen"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        Background="{DynamicResource MaterialDesignPaper}"
        TextElement.FontWeight="Regular"
        TextElement.FontSize="13"
        TextOptions.TextFormattingMode="Ideal"
        TextOptions.TextRenderingMode="Auto"
        FontFamily="{materialDesign:MaterialDesignFont}">

将代码中报错的删除

2. Ui整体逻辑

• materialDesign:DialogHost：materialDesignUi框架
  • materialDesign:DialogHost：第二层Ui
  • materialDesign:DrawerHost.LeftDrawerContent:左侧列表
  • DockPanel：
    • materialDesign:ColorZone ：顶部导航栏
    • Grid：中间主内容

3. 修改后的代码

 <materialDesign:DialogHost DialogTheme="Inherit"
                    Identifier="RootDialog"
                    SnackbarMessageQueue="{Binding ElementName=MainSnackbar, Path=MessageQueue}">

     <materialDesign:DrawerHost IsLeftDrawerOpen="{Binding ElementName=MenuToggleButton, Path=IsChecked}">
         <!--左侧菜单栏-->
         <materialDesign:DrawerHost.LeftDrawerContent>
             <DockPanel MinWidth="220">
             </DockPanel>
         </materialDesign:DrawerHost.LeftDrawerContent>
         <!--容器-->
         <DockPanel>
             <!--顶部导航栏-->
             <materialDesign:ColorZone
                 Padding="16" x:Name="ColorZone"
                 DockPanel.Dock="Top"
                 Mode="PrimaryMid">
                 <DockPanel LastChildFill="False"><!--自动填充最后元素区域False-->
                     <!--放大、缩小、关闭、头像-->
                     <StackPanel DockPanel.Dock="Right" Orientation="Horizontal">
                         <Image 
                             Source="/Images/user.jpg" 
                             Width="25" 
                             Height="25">
                             <Image.Clip><!--圆角设置-->
                                 <EllipseGeometry
                                     Center="12.5,12.5"
                                     RadiusX="12.5"
                                     RadiusY="12.5"/>
                             </Image.Clip>
                         </Image>

                         <Button x:Name="btnMin" Content="―" Style="{StaticResource MaterialDesignFlatMidBgButton}"/>
                         <Button x:Name="btnMax" Content="ᝰᝰᝰ☐" Style="{StaticResource MaterialDesignFlatMidBgButton}"/>
                         <Button x:Name="btnClose" Content="✕" Style="{StaticResource MaterialDesignFlatMidBgButton}"/>
                     </StackPanel>
                     <StackPanel Orientation="Horizontal">
                         <ToggleButton x:Name="MenuToggleButton"
                          AutomationProperties.Name="HamburgerToggleButton"
                         
                          IsChecked="False"
                          Style="{StaticResource MaterialDesignHamburgerToggleButton}" />
                         
                         <Button Margin="24,0,0,0"
                          materialDesign:RippleAssist.Feedback="{Binding RelativeSource={RelativeSource Self}, Path=Foreground, Converter={StaticResource BrushRoundConverter}}"
                          Command="{Binding MovePrevCommand}"
                          Content="{materialDesign:PackIcon Kind=ArrowLeft,
                                                            Size=24}"
                          Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}"
                          Style="{StaticResource MaterialDesignToolButton}"
                          ToolTip="Previous Item" />
                         
                         <Button Margin="16,0,0,0"
                          materialDesign:RippleAssist.Feedback="{Binding RelativeSource={RelativeSource Self}, Path=Foreground, Converter={StaticResource BrushRoundConverter}}"
                          Command="{Binding MoveNextCommand}"
                          Content="{materialDesign:PackIcon Kind=ArrowRight,
                                            Size=24}"
                          Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type FrameworkElement}}, Path=(TextElement.Foreground)}"
                          Style="{StaticResource MaterialDesignToolButton}"
                          ToolTip="Next Item" />
                         <!--标题-->
                         <TextBlock Margin="16,0"
                            HorizontalAlignment="Center"
                            VerticalAlignment="Center"
                            AutomationProperties.Name="Material Design In XAML Toolkit"
                            FontSize="22"
                            Text="笔记本" />
                     </StackPanel>
                 </DockPanel>
             </materialDesign:ColorZone>
             <!--内容区域-->
         </DockPanel>
     </materialDesign:DrawerHost>
 </materialDesign:DialogHost>

4. 点击事件

因为之前设置了WindowStyle="None"

 public MainWindow()
 {
     InitializeComponent();

     //三个按钮事件：最大化，最小化，关闭
     //+=是在委托链上增加一个委托，(s,e) =>是一个lambda表达式，这个表达式创建一个委托，委托处理的主体就是=> 后面的部分。
     btnMin.Click += (s, e) => { this.WindowState = WindowState.Minimized; };
     btnMax.Click += (s, e) =>
     {
         if (this.WindowState == WindowState.Maximized)
             this.WindowState = WindowState.Normal;
         else
             this.WindowState = WindowState.Maximized;
     };
     btnClose.Click += (s, e) =>
     {
         this.Close();
     };

     //鼠标拖动窗体 
     ColorZone.MouseMove += (s, e) =>
     {
         if (e.LeftButton == MouseButtonState.Pressed)
             this.DragMove();
     };
     //双击窗体放大缩小
     ColorZone.MouseDoubleClick += (s, e) =>
     {
         if (this.WindowState == WindowState.Maximized)
             this.WindowState = WindowState.Normal;
         else
             this.WindowState = WindowState.Maximized;
     };
 }