设计首页导航条

本节首页导航栏最终样式

导航条的样式，主要是从Material DesignThemes UI 拷贝过来修改的,项目用了这个UI组件库。就看项目需要什么，就去源码拷过来使用。 直接下载源码，编译运行就可以看到Demo 了

下载后且正常编译成功了，是能正常跑起来。接下来，就是要把圈红色那块拷出来，做为MyToDo 项目的主界面的导航条

Material DesignThemes

一.使用方法

1. 首先在MyToDo项目主界面的MainWindow.xaml 引入 Material DesignThemes UI 命名空间

如下：

 xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes" 

MainWindow.xaml 窗口需要设置以下几个属性

• WindowStyle="None" 隐藏原窗口的边框
• WindowStartupLocation="CenterScreen" 主窗口启动时居中
• AllowsTransparency="True" 设置窗口属性为透明，用于隐藏窗口出现白边

DockPanel 控件，主要介绍使用到的属性进行说明

• LastChildFill="False" 取消最后一个元素填充
• DockPanel.Dock="Right" 往右停靠。还有 Top(上), Bottom(下), Left(左) 等属性

使用 Material DesignThemes UI 中的MaterialDesignFlatMidBgButton样式，主要用来隐藏WPF原生控件按钮边框

• Style="{StaticResource MaterialDesignFlatMidBgButton}"

未使用样式隐藏前后对比

按钮中所使用的图标由使用UI 框架提供的。也可以使用外部的图标，例如：直接在Button 的Content中设置一些图标符号

Image 属性，用来放置头像，并且使用裁剪属性使头像变成圆角

• Image.Clip 剪裁绝对定位元素
• EllipseGeometry 用来绘制一个椭圆或者圆形的图形
• RadiusX X轴半径
• RadiusY Y轴半径

• Image 裁剪使用示例：

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

• 效果如下：

• 对上面，我的理解就是，使用Image 时要设置高度和宽度，并且在用到裁剪属性的时候，X轴半径和Y轴半径就设置成 Image 高宽值的一半。所以就变成12.5

• MyToDo 项目中图片的属性要设置一下。生成的操作设置：资源

  
  
  image.png

2. MainWindow.xaml 当前章节完整源码

<Window x:Class="MyToDo.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"
        WindowStyle="None" WindowStartupLocation="CenterScreen" AllowsTransparency="True"
         Style="{StaticResource MaterialDesignWindow}"
        TextElement.Foreground="{DynamicResource MaterialDesignBody}"
        Background="{DynamicResource MaterialDesignPaper}"
        TextElement.FontWeight="Medium"
        TextElement.FontSize="14"
        FontFamily="{materialDesign:MaterialDesignFont}"
        mc:Ignorable="d"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        Title="MainWindow" Height="768" Width="1280">
    <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"
                                materialDesign:ElevationAssist.Elevation="Dp4"
                                DockPanel.Dock="Top"
                                Mode="PrimaryMid">
                    <DockPanel LastChildFill="False">
                        <!--上左边内容-->
                        <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,0,0"
                             HorizontalAlignment="Center"
                             VerticalAlignment="Center"
                             AutomationProperties.Name="Material Design In XAML Toolkit"
                             FontSize="22"
                             Text="笔记本" />
                        </StackPanel>
                        <!--上右边图标-->
                        <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" Style="{StaticResource MaterialDesignFlatMidBgButton}">
                                <materialDesign:PackIcon Kind="MoveResizeVariant" />
                            </Button>
                            <Button x:Name="btnMax" Style="{StaticResource MaterialDesignFlatMidBgButton}">
                                <materialDesign:PackIcon Kind="CardMultipleOutline" />
                            </Button>
                            <Button x:Name="btnClose" Style="{StaticResource MaterialDesignFlatMidBgButton}" Cursor="Hand">
                                <materialDesign:PackIcon Kind="WindowClose" />
                            </Button>
                        </StackPanel>
                    </DockPanel>

                </materialDesign:ColorZone>

            </DockPanel>
        </materialDesign:DrawerHost>
    </materialDesign:DialogHost>
</Window>

二.实现导航条右侧，最小化，最大化，关闭窗口功能

1. 通过事件的形式来实现最小化，最大化，及关闭的功能点

在 MainView.xaml 的交互逻辑 MainWindow.xaml.cs 构造函数中，通过在界面控件中使用 x:Name="" 定义的名称。再使用具体名称.出对应的事件，来处理对应按钮的点击事件。

• 例如

//最小化
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();
};

还有另外一种写法。在前端界面绑定一个事件，3个按钮就要绑定3个，例如，像下面这样写法，每个按钮一个事件，代码就有点多，且不好看。

• 例如：MainView.xaml 前端绑定一个事件

  
  
  MainView.xaml

• MainView.xaml 的交互逻辑,就需要定义对应的按钮事件

  
  
  MainWindow.xaml.cs

2. 让导航栏头部支持鼠标按住时，拖动窗口

在 MainWindow.xaml.cs 构造函数中，抄上以下代码。

 //鼠标拖动事件
 ColorZone.MouseMove += (s, e) =>
 {
     //如果鼠标在拖动
     if (e.LeftButton == MouseButtonState.Pressed)
     {
         this.DragMove();//让窗口移动
     }
 };

3. 双击导航栏时，让窗口变大或恢复正常

在 MainWindow.xaml.cs 构造函数中，抄上以下代码。

//导航栏双击事件
ColorZone.MouseDoubleClick += (s, e) =>
{
    //双击时，如果是窗口是正常形态，就变成最大化
    if (this.WindowState == WindowState.Normal)
    {
        this.WindowState = WindowState.Maximized; 
    }
    else
    {
        this.WindowState = WindowState.Normal;//否则就变成正常的形态
    }
};

ColorZone，btnMin，btnMax，btnClose 都是前端MainView.xaml 页面定义的按钮名称

4. MainView.xaml 的交互逻辑 MainWindow.xaml.cs 当前章节完整源码

namespace MyToDo
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            //最小化
            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.Normal)
                {
                    this.WindowState = WindowState.Maximized; 
                }
                else
                {
                    this.WindowState = WindowState.Normal;//否则就变成正常的
                }
            };
        }
    }
}