一.設(shè)計(jì)首頁導(dǎo)航條

導(dǎo)航條的樣式，主要是從Material DesignThemes UI 拷貝過來修改的,項(xiàng)目用了這個(gè)UI組件庫，就看自己需要什么，就去拷過來使用，界面布局或其他組件使用，不做介紹。 直接下載源碼，編譯運(yùn)行就可以看到Demo 了

---

反正我下載完且編譯后是能正常跑起來，沒有辦法跑起來的，找找自己的問題，是不是工作不努力了。接下來，是要把圈紅色那塊拷出來，做為主界面的導(dǎo)航條

---

1.最終導(dǎo)航欄效果圖：

---

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 ><!--導(dǎo)航條色塊--><materialDesign:ColorZone Padding="16" x:Name="ColorZone"materialDesign:ElevationAssist.Elevation="Dp4"DockPanel.Dock="Top"Mode="PrimaryMid"><DockPanel LastChildFill="False"><!--上左邊內(nèi)容--><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><!--上右邊圖標(biāo)--><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>

---

3.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;//窗口設(shè)置最小};//最大化btnMax.Click += (s, e) =>{//判斷窗口是否是最小化狀態(tài)if (this.WindowState == WindowState.Maximized){this.WindowState = WindowState.Normal; //改成正常狀態(tài)}else{this.WindowState = WindowState.Maximized;//最大化}};//關(guān)閉btnClose.Click += (s, e) =>{this.Close();};//鼠標(biāo)拖動(dòng)事件ColorZone.MouseMove += (s, e) =>{//如果鼠標(biāo)在拖動(dòng)if (e.LeftButton == MouseButtonState.Pressed){this.DragMove();//讓窗口移動(dòng)}};//導(dǎo)航欄雙擊事件ColorZone.MouseDoubleClick += (s, e) =>{//雙擊時(shí)，如果是窗口是正常形態(tài)，就變成最大化if (this.WindowState == WindowState.Normal){this.WindowState = WindowState.Maximized; }else{this.WindowState = WindowState.Normal;//否則就變成正常的}};}}
}

---

?用法簡介

1. 主界面MainWindow.xaml 引入?Material DesignThemes UI 命名空間，如下：

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

---

?MainWindow 窗口設(shè)置以下幾個(gè)屬性

• 隱藏原窗口的邊框?WindowStyle="None"
• 主窗口啟動(dòng)時(shí)居中?WindowStartupLocation="CenterScreen"?
• 設(shè)置窗口屬性為透明，用于隱藏窗口出現(xiàn)白邊?AllowsTransparency="True"

---

DockPanel 屬性，用的到列一下說明而已

• 取消最后一個(gè)元素填充：LastChildFill="False"?
• 往右?？?#xff1a;DockPanel.Dock="Right"

---

?Material DesignThemes UI 樣式，用來隱藏原生按鈕邊框

• Style="{StaticResource MaterialDesignFlatMidBgButton}"

未隱藏前后對比

圖標(biāo)可以使用UI 框架提供的

---

?Image 屬性，用來放置頭像，并且使用裁剪屬性使頭像變成圓角

• Image.Clip?剪裁絕對定位元素
• EllipseGeometry 用來繪制一個(gè)橢圓或者圓形的圖形
• RadiusX? ? ??X軸半徑
• RadiusY? ? ??Y軸半徑

?例如：

<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 時(shí)要設(shè)置高度和寬度，并且在用到裁剪屬性的時(shí)候，X軸半徑和Y軸半徑就設(shè)置成 Image 高寬值的一半。所以就變成12.5

---

二.實(shí)現(xiàn)導(dǎo)航條右側(cè)，最小化，最大化，關(guān)閉窗口功能

1. 通過事件的形式來實(shí)現(xiàn)最小化，最大化，及關(guān)閉的功能點(diǎn)

?在 MainWindow.xaml.cs?構(gòu)造函數(shù)中，抄上以下代碼。我也是抄過來的

//最小化
btnMin.Click += (s, e) =>
{this.WindowState = WindowState.Minimized;//窗口設(shè)置最小
};
//最大化
btnMax.Click += (s, e) =>
{//判斷窗口是否是最小化狀態(tài)if (this.WindowState == WindowState.Maximized){this.WindowState = WindowState.Normal; //改成正常狀態(tài)}else{this.WindowState = WindowState.Maximized;//最大化}
};
//關(guān)閉
btnClose.Click += (s, e) =>
{this.Close();
};

突然長知識(shí)了，沒有想到還有這樣的寫法。之前都是在前端界面綁定一個(gè)事件，3個(gè)按鈕就要綁定3個(gè)，例如，像下面這樣寫法，每個(gè)按鈕一個(gè)事件，代碼就有點(diǎn)多，且不好看。

---

2. 讓導(dǎo)航欄頭部支持鼠標(biāo)按住時(shí)，拖動(dòng)窗口

?在 MainWindow.xaml.cs?構(gòu)造函數(shù)中，抄上以下代碼。

 //鼠標(biāo)拖動(dòng)事件ColorZone.MouseMove += (s, e) =>{//如果鼠標(biāo)在拖動(dòng)if (e.LeftButton == MouseButtonState.Pressed){this.DragMove();//讓窗口移動(dòng)}};

---

?3. 雙擊導(dǎo)航欄時(shí)，讓窗口變大或恢復(fù)正常

?在 MainWindow.xaml.cs?構(gòu)造函數(shù)中，抄上以下代碼。

//導(dǎo)航欄雙擊事件
ColorZone.MouseDoubleClick += (s, e) =>
{//雙擊時(shí)，如果是窗口是正常形態(tài)，就變成最大化if (this.WindowState == WindowState.Normal){this.WindowState = WindowState.Maximized; }else{this.WindowState = WindowState.Normal;//否則就變成正常的形態(tài)}
};

ColorZone，btnMin，btnMax，btnClose 都是前端xaml 頁面定義的名稱!?

---

?僅供自己學(xué)習(xí)記錄，不做任何教程提供，不喜歡也請別噴我。這個(gè)是從b 站看視頻學(xué)習(xí)wpf，就想記錄一下。寫的水平有限，也并不是寫出來誤導(dǎo)別人，畢竟你有沒有基礎(chǔ)我不知道，反正我看的懂就ok，方便我以后用的上時(shí)可以回來翻下筆記。僅此而已!!!