此篇博客聚集了自己写过的一些WPF界面设计Demo。

1.设计一个优美的注册界面

1.实现效果

1.静态图：
2.动态图：

2.代码展示

1.文件结构：

2.MainWindow.xaml代码：

<Window x:Class="RegisterPage.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:fa="http://schemas.fontawesome.io/icons/"xmlns:uc="clr-namespace:RegisterPage.UserControls"mc:Ignorable="d"Title="MainWindow" Height="650" Width="850" Background="Transparent" WindowStyle="None"WindowStartupLocation="CenterScreen" AllowsTransparency="True"><!-- WindowStyle="None"取消默认样式,AllowsTransparency="True"允许窗体透明;WindowStartupLocation="CenterScreen"表示使该窗口在屏幕中心启动--><Grid><!--设置两列--><Grid.ColumnDefinitions><ColumnDefinition Width="350"/><ColumnDefinition Width="1*"/><!--使用*号就表示启用百分比方式来设置高宽--></Grid.ColumnDefinitions><!--左边部分--><Border Grid.Column="0" Background="#ffd500" Padding="30" CornerRadius="25 0 0 25"> <!--CornerRadius设置的是圆角属性，四个参数的顺序是：左上、右上、右下、左下--><StackPanel VerticalAlignment="Center"><Image Source="/Images/head.jpg" Width="160" Height="160" Margin="0 0 0 40"/><TextBlock Text="Let's get you set up" TextAlignment="Center" FontWeight="SemiBold"  FontSize="28" Foreground="#363636"/><!--FontWeight代表字体加粗--><TextBlock TextWrapping="Wrap"  FontSize="16" TextAlignment="Center" Foreground="#363636" Margin="0 20 0 20" Text="it should only take a couple of mnutes to pair with your watch"/><!--TextWrapping="Wrap"表示换行--><Button Style="{StaticResource buttonBlack}"><!--引用定义在APP.xaml中的样式--><fa:ImageAwesome Icon="AngleRight" Width="25" Height="25" Foreground="#ffd500" Margin="3 0 0 0"/><!--fa:ImageAwesome Icon="AngleRight"表示引用库中图标--></Button></StackPanel></Border><!--输入部分--><Border Grid.Column="1" Padding="20" Background="#ffffff" CornerRadius="0 25 25 0" MouseDown="Border_MouseDown"><Grid><Button  Width="25" Margin="0 4 5 0" Style="{StaticResource iconApp}"><fa:ImageAwesome Icon="Close" /></Button><Button   Width="25" Margin="0 7  40 0" Style="{StaticResource iconApp}"><fa:ImageAwesome Icon="Minus" /></Button><Grid  VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0 10 0 0"><Grid.ColumnDefinitions><ColumnDefinition Width="150"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition Height="auto"/><RowDefinition Height="auto"/><RowDefinition Height="auto"/><RowDefinition Height="auto"/><RowDefinition Height="auto"/><RowDefinition Height="auto"/><RowDefinition Height="auto"/><RowDefinition Height="auto"/></Grid.RowDefinitions><TextBlock Grid.Row="0" Text="Nmae" Style="{StaticResource text}"/><TextBlock Grid.Row="1" Text="Family" Style="{StaticResource text}"/><TextBlock Grid.Row="2" Text="Gender" Style="{StaticResource text}"/><TextBlock Grid.Row="3" Text="Date of Birth" Style="{StaticResource text}"/><TextBlock Grid.Row="4" Text="Email" Style="{StaticResource text}"/><TextBlock Grid.Row="5" Text="Mobile" Style="{StaticResource text}"/><TextBlock Grid.Row="6" Text="MemberShip" Style="{StaticResource text}"/><uc:MyTextBox Grid.Column="1" Grid.Row="0" Hint="Karim"/><uc:MyTextBox Grid.Column="1" Grid.Row="1" Hint="Doe"/><uc:MyTextBox Grid.Column="1" Grid.Row="3" Hint="01/02/1980"/><uc:MyTextBox Grid.Column="1" Grid.Row="4" Hint="KarimDoe@eamil.com"/><uc:MyTextBox Grid.Column="1" Grid.Row="5" Hint="+91 9876 54321"/><StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="1" Margin="0 10"><uc:MyOption Icon="Male" Text="Male"/><uc:MyOption Icon="Female" Text="Female"/></StackPanel><StackPanel Orientation="Horizontal" Grid.Row="6" Grid.Column="1" Margin="0 10"><uc:MyOption Icon="CreditCard" Text="Classic"/><uc:MyOption Icon="CreditCard" Text="Silver"/><uc:MyOption Icon="CreditCard" Text="Gold"/></StackPanel><Grid Grid.Row="7" Grid.Column="1" Margin="0 40 0 0 "><Grid.ColumnDefinitions><ColumnDefinition Width="*"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><Button Content="Cancel" Margin="0 0 10 0" Grid.Column="0" Style="{StaticResource buttonMain}"/><Button Content="Save" Margin="10 0 0 0" Grid.Column="1" Style="{StaticResource buttonMainGreen}"/></Grid></Grid></Grid></Border></Grid>
</Window>

MainWindow.xaml.cs代码：

using System.Windows;
using System.Windows.Input;namespace RegisterPage
{/// <summary>/// MainWindow.xaml 的交互逻辑/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();}private void Border_MouseDown(object sender, MouseButtonEventArgs e){if (e.ChangedButton == MouseButton.Left)//如果按下了鼠标左键{this.DragMove();//允许拖动该窗口}}}
}

3.App.xaml代码：

<Application x:Class="RegisterPage.App"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"StartupUri="MainWindow.xaml"><Application.Resources><!--该App.xaml文件定义了一些样式--><!--左部分黑色按钮样式--><Style x:Key="buttonBlack" TargetType="Button"><Setter Property="Background" Value="#363636"/><Setter Property="BorderThickness" Value="2"/><Setter Property="Width" Value="60"/><Setter Property="Height" Value="60"/><Setter Property="Margin" Value="0 20 0 0"/><Setter Property="Template"><!--设置模板样式--><Setter.Value><ControlTemplate TargetType="Button"><Border Background="{TemplateBinding Background}" CornerRadius="50" Padding="5"><ContentPresenter /><!--ContentPresenter是一个基础控件，其他的控件可以继承他，主要作用是实现内容的显示，可以是任何内容--></Border></ControlTemplate></Setter.Value></Setter><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="#000000"/></Trigger></Style.Triggers></Style><Style x:Key="iconApp" TargetType="Button"><!--最小化、关闭按钮的样式--><Setter Property="VerticalAlignment" Value="Top"/><Setter Property="HorizontalAlignment" Value="Right"/><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="RenderTransform"><Setter.Value><ScaleTransform ScaleX="1.2" ScaleY="1.2"/><!--ScaleTransform表示缩放;ScaleX表示X轴缩小值，正常为1;ScaleY表示Y轴缩小值，正常为1 --></Setter.Value></Setter></Trigger></Style.Triggers></Style><Style x:Key="text" TargetType="TextBlock"><Setter Property="Foreground" Value="#363636"/><Setter Property="FontWeight" Value="SemiBold"/><Setter Property="FontSize" Value="16"/><Setter Property="VerticalAlignment" Value="Center"/></Style><Style TargetType="TextBox"><Setter Property="Background" Value="#f5f7f9"/><Setter Property="Foreground" Value="#767676"/><Setter Property="BorderThickness" Value="1"/><Setter Property="BorderBrush" Value="#f5f7f9"/><Setter Property="FontSize" Value="12"/><Setter Property="Padding" Value="10"/><Setter Property="Margin" Value="0 10"/><Setter Property="VerticalAlignment" Value="Center"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type TextBoxBase}"> <Border x:Name="border" CornerRadius="3" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" SnapsToDevicePixels="True"><ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/></Border><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="BorderBrush" Value="#d9d9d9" TargetName="border"/></Trigger><Trigger Property="IsKeyboardFocused" Value="True"><Setter Property="BorderBrush" Value="#d9d9d9" TargetName="border"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><Style x:Key="button" TargetType="Button"><Setter Property="Background" Value="#c6c6c6"/><Setter Property="BorderThickness" Value="0"/><Setter Property="Width" Value="40"/><Setter Property="Height" Value="40"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Border Background="{TemplateBinding Background}" CornerRadius="50" Padding="5"><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/></Border></ControlTemplate></Setter.Value></Setter><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="#363636"/></Trigger><Trigger Property="IsMouseCaptured" Value="True"><Setter Property="Background" Value="#161616"/></Trigger></Style.Triggers></Style><Style x:Key="buttonMain" TargetType="Button"><Setter Property="Background" Value="#f5f7f9"/><Setter Property="Foreground" Value="#363636"/><Setter Property="BorderThickness" Value="0"/><Setter Property="Height" Value="40"/><Setter Property="FontSize" Value="16"/><Setter Property="FontWeight" Value="SemiBold"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Border Background="{TemplateBinding Background}" CornerRadius="5" Padding="5"><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/></Border></ControlTemplate></Setter.Value></Setter><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="#c9c9c9"/><Setter Property="Foreground" Value="#161616"/></Trigger></Style.Triggers></Style><!--Cancel按钮样式表--><Style x:Key="buttonMainGreen" TargetType="Button" BasedOn="{StaticResource buttonMain}"><!--Save按钮样式表--><Setter Property="Background" Value="#5fe7c4"/><Setter Property="Foreground" Value="#ffffff"/><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="#4ec7a8"/><Setter Property="Foreground" Value="#ffffff"/></Trigger></Style.Triggers></Style></Application.Resources>
</Application>

App.xaml.cs代码：

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Threading.Tasks;
using System.Windows;namespace RegisterPage
{/// <summary>/// App.xaml 的交互逻辑/// </summary>public partial class App : Application{}
}

4.MyOption.xaml代码:

<UserControl x:Class="RegisterPage.UserControls.MyOption"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:fa="http://schemas.fontawesome.io/icons/"mc:Ignorable="d" Name="myOption"><StackPanel Orientation="Horizontal"><Button Style="{StaticResource button}"><!--引用定义在APP.xaml中的样式--><fa:ImageAwesome Icon="{Binding Path=Icon,ElementName=myOption}" Width="15" Height="15" Foreground="White"/></Button><TextBlock Text="{Binding Path=Text,ElementName=myOption}" Foreground="#363636" VerticalAlignment="Center" Margin="10 0 20 0" FontWeight="SemiBold"/></StackPanel>
</UserControl>

MyOption.xaml.cs代码:

using System.Windows;
using System.Windows.Controls;namespace RegisterPage.UserControls
{/// <summary>/// MyOption.xaml 的交互逻辑/// </summary>public partial class MyOption : UserControl{public MyOption(){InitializeComponent();}public string Text{get { return (string)GetValue(TextProperty); }  set { SetValue(TextProperty, value); }}//DependencyProperty.Register方法：第一个参数是依赖属性的名字；第二个参数是依赖属性的类型；第三个参数是依赖属性所属的类名，也就是所有者类名；第四个参数是该属性的默认值public static readonly DependencyProperty TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(MyOption));public FontAwesome.WPF.FontAwesomeIcon Icon{get { return (FontAwesome.WPF.FontAwesomeIcon)GetValue(IconProperty); }set { SetValue(IconProperty, value); }}//DependencyProperty.Register方法：第一个参数是依赖属性的名字；第二个参数是依赖属性的类型；第三个参数是依赖属性所属的类名，也就是所有者类名；第四个参数是该属性的默认值public static readonly DependencyProperty IconProperty = DependencyProperty.Register("Icon", typeof(FontAwesome.WPF.FontAwesomeIcon), typeof(MyOption));}}

5.MyTextBox.xaml代码：

<UserControl x:Class="RegisterPage.UserControls.MyTextBox"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" mc:Ignorable="d" Name="myTextBox"><UserControl.Resources><BooleanToVisibilityConverter x:Key="boolToVis"/></UserControl.Resources><Grid><TextBlock  Foreground="#868686" Margin="10 0" VerticalAlignment="Center" Panel.ZIndex="1" IsHitTestVisible="False" Text="{Binding Path=Hint,ElementName=myTextBox}"Visibility="{Binding ElementName=textBox,Path=Text.IsEmpty,Converter={StaticResource boolToVis}}"/><TextBox x:Name="textBox"/><!--IsHitTestVisible表示设置/获取控件是否接受输入事件，Visibility表示设置/获取控件是否可见--></Grid>
</UserControl>

MyTextBox.xaml.cs代码：

using System.Windows;
using System.Windows.Controls;namespace RegisterPage.UserControls
{/// <summary>/// MyTextBox.xaml 的交互逻辑/// </summary>public partial class MyTextBox : UserControl{public MyTextBox(){InitializeComponent();}public string Hint{get { return (string)GetValue(HintProperty); }set { SetValue(HintProperty, value); }}//DependencyProperty.Register方法：第一个参数是依赖属性的名字；第二个参数是依赖属性的类型；第三个参数是依赖属性所属的类名，也就是所有者类名；第四个参数是该属性的默认值public static readonly DependencyProperty HintProperty = DependencyProperty.Register("Hint", typeof(string), typeof(MyTextBox));}
}

2.简易登录按钮设计

1.实现效果

2.代码展示

<mah:MetroWindow  xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls" x:Class="cms.Windows.LoginWindow"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:cms.Windows"mc:Ignorable="d" WindowStartupLocation="CenterScreen"Title="用户登录" Height="350" Width="600"><!--WindowStartupLocation="CenterScreen"表示该窗口启动时将在屏幕中心位置--><Grid><Grid Margin="100,50,100,50"><!--Margin="100,50,100,50"表示该窗口距离左边边界100，上边50，右边100，下边50--><Grid.RowDefinitions><!--行标签，在这里定义4行--><RowDefinition/><!--定义一行--><RowDefinition/><RowDefinition/><RowDefinition/></Grid.RowDefinitions><TextBlock Grid.Row="0" Text="仓库物资管理系统" HorizontalAlignment="Center" FontSize="36"/><StackPanel Grid.Row="1" VerticalAlignment="Center" Orientation="Horizontal"><TextBlock Text="用户名" Width="60" FontSize="18" Margin="50 0 0 0 "/><TextBox  Width="200" Margin="10 0 0 0"/></StackPanel><!--设计用户名栏--><StackPanel Grid.Row="2" VerticalAlignment="Center" Orientation="Horizontal"><TextBlock Text="密码" Width="60" FontSize="18" Margin="50 0 0 0 "/><TextBox  Width="200" Margin="10 0 0 0"/></StackPanel><!--设计密码栏--><StackPanel Grid.Row="3" Margin="80 0 0 0" VerticalAlignment="Center" Orientation="Horizontal"><Button Content="登录" Width="80" Margin="40 0 0 0"/><Button Content="取消" Width="80" Margin="40 0 0 0"/></StackPanel><!--设计密码栏--></Grid></Grid>
</mah:MetroWindow>

3.设计一个优美的注册登录界面（连接数据库）

1.实现效果

视频展示该界面：视频链接

2.代码展示

1. 工程目录：
2. 数据库部署：
   
   
3. LoginPage.xaml代码：

<Window x:Class="Login.LoginPage"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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"xmlns:local="clr-namespace:Login"mc:Ignorable="d"Title="登录" Height="760" Width="450"TextElement.Foreground="{DynamicResource MaterialDesignBody}"Background="{x:Null}"AllowsTransparency="True"WindowStyle="None"WindowStartupLocation="CenterScreen"Icon="/Image/loginPage.png"><!--TextElement.Foreground="{DynamicResource MaterialDesignBody}"的意思是获取或设置要应用于元素内容的画笔为MaterialDesignBody；Background="{x:Null}"的意思是背景设置为空，就是无背景;AllowsTransparency="True"的意思是允许窗口透明；WindowStyle="None"的意思是设置窗口无边框；WindowStartupLocation="CenterScreen"的意思是该窗口在启动时将出现在屏幕中心位置--><materialDesign:Card UniformCornerRadius="15" Margin="25" materialDesign:ShadowAssist.ShadowDepth="Depth4" ><!--materialDesign:Card是materialDesign中一种卡片式的布局；UniformCornerRadius=15表示设置圆角属性为15；Margin="25"设置间距为25，顺序是上、右、下、左的边距 ；materialDesign:ShadowAssist.ShadowDepth="Depth4"表示设置阴影大小，从Depth到Depth5--><materialDesign:DialogHost x:Name="DialogHost" CloseOnClickAway="True"><!--materialDesign:DialogHost表示引用materialDesign库中对话框；x:Name="DialogHost"表示给该对话框起一个名字叫DialogHost；CloseOnClickAway="True"--><StackPanel><materialDesign:PopupBox HorizontalAlignment="Right" Margin="0 20 20 0" PlacementMode="BottomAndAlignRightEdges"  Height="25"><!--materialDesign:PopupBox表示弹窗；PlacementMode="BottomAndAlignRightEdges"描述 Popup 控件在屏幕上显示的位置为底部和右边缘(即右下角)--><StackPanel><StackPanel Margin="16 10 0 6" Orientation="Horizontal" HorizontalAlignment="Center"><TextBlock VerticalAlignment="Center" Text="暗黑模式"/><ToggleButton Cursor="Hand" ToolTip="切换至暗黑模式" Margin="12 0 8 0" x:Name="themeToggle" IsChecked="{Binding IsDarkTheme}" Click="toggleTheme"/><!--ToggleButton为状态开关按钮；Cursor="Hand"表示鼠标放上去时鼠标形状为hand；ToolTip表示鼠标放上去时，会弹出一些提示信息；Click="toggleTheme"表示自定义一些按钮点击事件--></StackPanel><Button ToolTip="登录遇到问题？" Margin="0 8 0 0" Content="帮助"/><Button x:Name="btn_exit" ToolTip="退出程序" Content="退出" Click="exitApp"/></StackPanel></materialDesign:PopupBox><Image Margin="0 60 0 5" Source="Image/head.jpg" Height="100"/><TextBlock Margin="0 25 0 5" HorizontalAlignment="Center" FontSize="28" FontWeight="Bold" Text="欢迎回来!"/><TextBlock FontSize="17" FontWeight="SemiBold" HorizontalAlignment="Center" Text="请登录你的账号密码"/><TextBox Margin="0 50 0 0" x:Name="txtUserName" Width="300" FontSize="18" materialDesign:HintAssist.Hint="请输入用户名" BorderThickness="4" BorderBrush="{DynamicResource MaterialDesignDivider}" Style="{StaticResource MaterialDesignOutlinedTextBox}"/><!--materialDesign:HintAssist.Hint="Enter UserNmae"表示设置提示文本为Enter UserNmaeBorderThickness="4"表示设置边框宽度为4BorderBrush="{DynamicResource MaterialDesignDivider}"表示设置边框笔刷为materialDesign库中的MaterialDesignDividerStyle="{StaticResource MaterialDesignOutlinedTextBox}"表示设置样式为materialDesign库中的MaterialDesignOutlinedTextBox--><PasswordBox Margin="0 20 0 0" x:Name="txtPassword" Width="300" FontSize="18" materialDesign:HintAssist.Hint="请输入密码" BorderThickness="2" BorderBrush="{DynamicResource MaterialDesignDivider}" Style="{StaticResource MaterialDesignOutlinedPasswordBox}"/><Button Margin="0 20 0 0" x:Name="loginBtn" Style="{StaticResource MaterialDesignFlatMidBgButton}" materialDesign:ShadowAssist.ShadowDepth="Depth0" Height="53" Width="300" materialDesign:ButtonAssist.CornerRadius="10" FontSize="18" Content="登录" Click="loginButtonClick"/><Button Margin="0 20 0 0" x:Name="signupBtn" Style="{StaticResource MaterialDesignFlatButton}" materialDesign:ShadowAssist.ShadowDepth="Depth0" Height="53" Width="300" materialDesign:ButtonAssist.CornerRadius="10" FontSize="18" Content="创建账号" Cursor="Hand" Click="regisButtonClick"/></StackPanel></materialDesign:DialogHost></materialDesign:Card>
</Window>

LoginPage.xaml.cs代码：

using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using MaterialDesignThemes.Wpf;namespace Login
{/// <summary>/// MainWindow.xaml 的交互逻辑/// </summary>public partial class LoginPage : Window{public LoginPage(){InitializeComponent();}public bool IsDarkTheme { get; set; }//定义一个属性private readonly PaletteHelper paletteHelper = new PaletteHelper();private void toggleTheme(object sender, RoutedEventArgs e)//切换主题的按钮点击事件{ITheme theme = paletteHelper.GetTheme();if (IsDarkTheme = theme.GetBaseTheme() == BaseTheme.Dark)//如果当前主题颜色为暗黑色{IsDarkTheme = false;theme.SetBaseTheme(Theme.Light);//设置主题颜色为明亮}else{IsDarkTheme = true;theme.SetBaseTheme(Theme.Dark);//设置主题颜色为黑色}paletteHelper.SetTheme(theme);//成功设置界面主题颜色}private void exitApp(object sender, RoutedEventArgs e)//退出按钮点击事件{Application.Current.Shutdown();//退出该应用程序（即关掉该窗口）}protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)//设置窗口可拖拽{base.OnMouseLeftButtonDown(e);DragMove();}private void loginButtonClick(object sender, RoutedEventArgs e)//登录按钮点击事件{//与数据库进行连接；//Server=小何表示服务器名称是小何；//Database = accountList表示数据库名称为accountList；//integrated security = true表示可以在不知道数据库用户名和密码的情况下时，依然可以连接数据库，//如果integrated security = false, 或者不写，表示一定要输入正确的数据库登录名和密码。SqlConnection sqlConnection = new SqlConnection(@"Server=小何;Database=accountList;Integrated Security=True");sqlConnection.Open();string add_data = "select * from [dbo].[User] where 用户名=@用户名 and 密码=@密码";SqlCommand cmd = new SqlCommand(add_data, sqlConnection);cmd.Parameters.AddWithValue("@用户名", txtUserName.Text);cmd.Parameters.AddWithValue("@密码", txtPassword.Password);cmd.ExecuteNonQuery();int count=Convert.ToInt32(cmd.ExecuteScalar());sqlConnection.Close();txtUserName.Text = "";txtPassword.Password = "";if (count > 0)//数据库匹配成功{mainWindow mainWindow=new mainWindow();this.Close();mainWindow.Show();}else//若返回-1,即匹配失败{MessageBox.Show("账号或密码输入错误！");}  }private void regisButtonClick(object sender, RoutedEventArgs e)//注册按钮点击事件{registPage reg1 = new registPage();this.Close();reg1.Show();}}
}

registPage.xaml代码：

<Window x:Class="Login.registPage"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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"mc:Ignorable="d"Title="Login" Height="760" Width="450"TextElement.Foreground="{DynamicResource MaterialDesignBody}"Background="{x:Null}"AllowsTransparency="True"WindowStyle="None"WindowStartupLocation="CenterScreen"Icon="/Image/registPage.png"><materialDesign:Card UniformCornerRadius="15" Margin="25" materialDesign:ShadowAssist.ShadowDepth="Depth4" ><!--materialDesign:Card是materialDesign中一种卡片式的布局；UniformCornerRadius=15表示设置圆角属性为15；Margin="25"设置间距为25，顺序是上、右、下、左的边距 ；materialDesign:ShadowAssist.ShadowDepth="Depth4"表示设置阴影大小，从Depth到Depth5--><materialDesign:DialogHost x:Name="DialogHost" CloseOnClickAway="True"><!--materialDesign:DialogHost表示引用materialDesign库中对话框；x:Name="DialogHost"表示给该对话框起一个名字叫DialogHost；CloseOnClickAway="True"--><StackPanel><materialDesign:PopupBox HorizontalAlignment="Right" Margin="0 20 20 0" PlacementMode="BottomAndAlignRightEdges"  Height="25"><!--materialDesign:PopupBox表示弹窗；PlacementMode="BottomAndAlignRightEdges"描述 Popup 控件在屏幕上显示的位置为底部和右边缘(即右下角)--><StackPanel><StackPanel Margin="16 10 0 6" Orientation="Horizontal" HorizontalAlignment="Center"><TextBlock VerticalAlignment="Center" Text="暗黑模式"/><ToggleButton Cursor="Hand" ToolTip="切换至暗黑模式" Margin="12 0 8 0" x:Name="themeToggle" IsChecked="{Binding IsDarkTheme}" Click="toggleTheme"/><!--ToggleButton为状态开关按钮；Cursor="Hand"表示鼠标放上去时鼠标形状为hand；ToolTip表示鼠标放上去时，会弹出一些提示信息；Click="toggleTheme"表示自定义一些按钮点击事件--></StackPanel><Button ToolTip="Having Trouble Logging In?" Margin="0 8 0 0" Content="帮助"/><Button x:Name="btn_exit" ToolTip="退出程序" Content="退出" Click="exitApp"/></StackPanel></materialDesign:PopupBox><Image Margin="0 60 0 5" Source="Image/head.jpg" Height="100"/><TextBlock Margin="0 25 0 5" HorizontalAlignment="Center" FontSize="28" FontWeight="Bold" Text="你好!"/><TextBlock FontSize="17" FontWeight="SemiBold" HorizontalAlignment="Center" Text="请注册你的账号"/><TextBox Margin="0 50 0 0" x:Name="registUserName" Width="300" FontSize="18" materialDesign:HintAssist.Hint="输入用户名" BorderThickness="4" BorderBrush="{DynamicResource MaterialDesignDivider}" Style="{StaticResource MaterialDesignOutlinedTextBox}"/><!--materialDesign:HintAssist.Hint="Enter UserNmae"表示设置提示文本为Enter UserNmaeBorderThickness="4"表示设置边框宽度为4BorderBrush="{DynamicResource MaterialDesignDivider}"表示设置边框笔刷为materialDesign库中的MaterialDesignDividerStyle="{StaticResource MaterialDesignOutlinedTextBox}"表示设置样式为materialDesign库中的MaterialDesignOutlinedTextBox--><PasswordBox Margin="0 20 0 0" x:Name="registPassword" Width="300" FontSize="18" materialDesign:HintAssist.Hint="输入密码" BorderThickness="2" BorderBrush="{DynamicResource MaterialDesignDivider}" Style="{StaticResource MaterialDesignOutlinedPasswordBox}"/><PasswordBox Margin="0 20 0 0" x:Name="registPassword1" Width="300" FontSize="18" materialDesign:HintAssist.Hint="请再次输入密码" BorderThickness="2" BorderBrush="{DynamicResource MaterialDesignDivider}" Style="{StaticResource MaterialDesignOutlinedPasswordBox}"/><Button Margin="0 20 0 0" x:Name="registButton" Style="{StaticResource MaterialDesignFlatMidBgButton}" materialDesign:ShadowAssist.ShadowDepth="Depth0" Height="40" Width="300" materialDesign:ButtonAssist.CornerRadius="10" FontSize="18" Content="确认注册账号" Click="registButtonClick"/><Button Margin="0 20 0 0" x:Name="backBtn" Style="{StaticResource MaterialDesignFlatMidBgButton}" materialDesign:ShadowAssist.ShadowDepth="Depth0" Height="40" Width="300" materialDesign:ButtonAssist.CornerRadius="10" FontSize="18" Content="返回登录界面" Click="backButtonClick"/></StackPanel></materialDesign:DialogHost></materialDesign:Card>
</Window>

registPage.xaml.cs代码：

using MaterialDesignThemes.Wpf;
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;namespace Login
{/// <summary>/// registPage.xaml 的交互逻辑/// </summary>public partial class registPage : Window{public registPage(){InitializeComponent();}public bool IsDarkTheme { get; set; }//定义一个属性private readonly PaletteHelper paletteHelper = new PaletteHelper();private void toggleTheme(object sender, RoutedEventArgs e)//切换主题的按钮点击事件{ITheme theme = paletteHelper.GetTheme();if (IsDarkTheme = theme.GetBaseTheme() == BaseTheme.Dark)//如果当前主题颜色为暗黑色{IsDarkTheme = false;theme.SetBaseTheme(Theme.Light);//设置主题颜色为明亮}else{IsDarkTheme = true;theme.SetBaseTheme(Theme.Dark);//设置主题颜色为黑色}paletteHelper.SetTheme(theme);//成功设置界面主题颜色}private void exitApp(object sender, RoutedEventArgs e)//退出按钮点击事件{Application.Current.Shutdown();//退出该应用程序（即关掉该窗口）}protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)//设置窗口可拖拽{base.OnMouseLeftButtonDown(e);DragMove();}private void backButtonClick(object sender, RoutedEventArgs e){LoginPage mainWindow = new LoginPage();this.Close();mainWindow.Show();}private void registButtonClick(object sender, RoutedEventArgs e)//注册按钮点击事件{if (registPassword1.Password!=registPassword.Password){MessageBox.Show("两次输入的密码不一致，请重新输入！");registPassword.Password = "";registPassword1.Password = "";}else{SqlConnection sqlConnection = new SqlConnection(@"Server=小何;Database=accountList;Integrated Security=True");sqlConnection.Open();string add_data = "insert into [dbo].[User] values(@用户名,@密码)";SqlCommand cmd = new SqlCommand(add_data, sqlConnection);cmd.Parameters.AddWithValue("@用户名", registUserName.Text);cmd.Parameters.AddWithValue("@密码", registPassword.Password);cmd.ExecuteNonQuery();sqlConnection.Close();registUserName.Text = "";registPassword.Password = "";registPassword1.Password = "";MessageBox.Show("注册成功");LoginPage mainWindow = new LoginPage();this.Close();mainWindow.Show();}}}}

App.xaml代码：

<Application x:Class="Login.App"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:Login" xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"xmlns:viewModel="clr-namespace:Login.MVVM.ViewModel"xmlns:view="clr-namespace:Login.MVVM.View"StartupUri="LoginPage.xaml"><Application.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><materialDesign:BundledTheme BaseTheme="Light" PrimaryColor="Blue" SecondaryColor="Yellow" /><!--BaseTheme="Light"表示设置主题为light样式；PrimaryColor="Blue"表示设置界面中各个控件外观为蓝色； SecondaryColor="Lime"表示设置次要首选颜色--><ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" /><ResourceDictionary Source="Theme/MenuButtonTheme.xaml"/><ResourceDictionary Source="Theme/TextBoxTheme.xaml"/></ResourceDictionary.MergedDictionaries><DataTemplate DataType="{x:Type viewModel:HomeViewModel}"><view:HomeView/></DataTemplate><DataTemplate DataType="{x:Type viewModel:MusicViewModel}"><view:MusicView/></DataTemplate><DataTemplate DataType="{x:Type viewModel:FeaturedViewModel}"><view:FeaturedView/></DataTemplate></ResourceDictionary></Application.Resources>
</Application>

App.xaml.cs代码：

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Threading.Tasks;
using System.Windows;namespace Login
{/// <summary>/// App.xaml 的交互逻辑/// </summary>public partial class App : Application{}
}

而mainWindow则是一个新建的空窗口，没啥代码；

4.设计一个简单的在线教育系统界面

1.实现效果

2.代码展示

图片：

1. App.xaml

<Application x:Class="WpfApp1.App"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"xmlns:local="clr-namespace:WpfApp1"StartupUri="MainWindow.xaml"><!--引入MaterialDesignThemes库--><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>
</Application>

App.xaml.cs

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Threading.Tasks;
using System.Windows;namespace WpfApp1
{/// <summary>/// App.xaml 的交互逻辑/// </summary>public partial class App : Application{}
}

2. MainWindow.xaml

<Window x:Class="WpfApp1.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:customcontrols="clr-namespace:WpfApp1.customcontrols"xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"xmlns:local="clr-namespace:WpfApp1"mc:Ignorable="d" x:Name="this"Title="MainWindow" Icon="/assets/icon.png" Height="735" Width="1024" Background="Transparent" FontSize="15" WindowStartupLocation="CenterScreen" WindowStyle="None" ResizeMode="NoResize" ><!--初始化资源字典，该字典用来存放所有的app图标--><Window.Resources><ResourceDictionary><ResourceDictionary.MergedDictionaries><!--MergedDictionaries获取 ResourceDictionary 字典的集合，这些字典构成了合并字典中的各种资源字典--><ResourceDictionary Source="/assets/icons.xaml"/></ResourceDictionary.MergedDictionaries></ResourceDictionary></Window.Resources><!--窗口背景和圆角--><Border CornerRadius="20" Background="White"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="200"/><ColumnDefinition/><ColumnDefinition Width="300"/></Grid.ColumnDefinitions><!--绘制一根竖直的分隔细线--><Line  Stroke="Black"  HorizontalAlignment="Right"  Y1="0" Y2="{Binding Height,ElementName=this}" StrokeThickness="0.5" /> <!--Line用于在两个点之间绘制直线;Y1是获取或设置 Line 起始点的 y 坐标；Y2是获取或设置 Line 终结点的 y 坐标；StrokeThickness是获取或设置笔划轮廓的 Shape 宽度。--><!--左边区域--><Grid Grid.Column="0"><!--左上角logo区域--><Grid Grid.Column="0" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,55"><Grid.ColumnDefinitions><ColumnDefinition Width="25"/><ColumnDefinition/></Grid.ColumnDefinitions><Path Data="{StaticResource logo}" Fill="Blue" Stretch="Uniform"/><TextBlock Grid.Column="1" Text="在线教育平台" FontWeight="SemiBold" VerticalAlignment="Center" Margin="5,0"/></Grid><!--左边菜单栏区域--><Border Grid.Column="0" CornerRadius="10" Background="WhiteSmoke" Width="150" Margin="25,132,25,419.2"><StackPanel Orientation="Vertical" VerticalAlignment="Center"><customcontrols:MenuButton Icon="{StaticResource home}" IconWidth="10" IndicatorBrush="#bebebe" Text="主页" IsSelected="True" VerticalAlignment="Center" GroupName="MenuButton"/><customcontrols:MenuButton Icon="{StaticResource discover}" IconWidth="10" IndicatorBrush="#bebebe" Text="发现" IsSelected="True" VerticalAlignment="Center" GroupName="MenuButton"/><customcontrols:MenuButton Icon="{StaticResource messages}" IconWidth="10" IndicatorBrush="#bebebe" Text="信息" IsSelected="True" VerticalAlignment="Center" GroupName="MenuButton"/><customcontrols:MenuButton Icon="{StaticResource settings}" IconWidth="10" IndicatorBrush="#bebebe" Text="Home" IsSelected="True" VerticalAlignment="Center" GroupName="MenuButton"/></StackPanel></Border><!--更新课程按钮--><Button Height="52" Margin="25,338,25,345.2"><Button.Style><Style TargetType="{x:Type Button}"><Setter Property="HorizontalAlignment" Value="Center"/><Setter Property="VerticalAlignment" Value="Center"/><Setter Property="Height" Value="53"/><Setter Property="Width" Value="150"/><Setter Property="Margin" Value="0,-50,0,0"/><Setter Property="Background" Value="WhiteSmoke"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Border Background="{TemplateBinding Background}" CornerRadius="10"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="45"/><ColumnDefinition/></Grid.ColumnDefinitions><Border Grid.Column="0" CornerRadius="10" Height="28" Width="28" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center"><Path Data="{StaticResource light}" Width="28" Height="28" Fill="#8c14fd" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform"/></Border><Grid Grid.Column="1"><TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15,5,5,5"><Run Text="更新课程" FontSize="16" FontWeight="Bold"/></TextBlock></Grid></Grid></Border></ControlTemplate></Setter.Value></Setter></Style></Button.Style></Button><!--课程分数--><Border CornerRadius="10" Background="WhiteSmoke" HorizontalAlignment="Center" VerticalAlignment="Center" Height="130" Width="70" Margin="5,500,95,0"><Grid><Path Data="{StaticResource medal}" Fill="#79cb86" HorizontalAlignment="Left" VerticalAlignment="Top" Height="16" Stretch="Uniform" Margin="12,12,0,0"/><TextBlock HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="12,0,0,16"><Run Text="1800" FontWeight="Bold" FontSize="12"/><LineBreak/><Run Text="分" FontWeight="Bold" FontSize="12"/></TextBlock></Grid></Border><!--完成进度--><Border CornerRadius="10" Background="WhiteSmoke" HorizontalAlignment="Center" VerticalAlignment="Center" Height="130" Width="70" Margin="90,500,5,0"><Grid><Path Data="{StaticResource progress}" Fill="#79cb86" HorizontalAlignment="Left" VerticalAlignment="Top" Height="16" Stretch="Uniform" Margin="12,12,0,0"/><TextBlock HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="12,0,0,16"><Run Text="45.3%" FontWeight="Bold" FontSize="12"/><LineBreak/><Run Text="进度" FontWeight="Bold" FontSize="12"/></TextBlock></Grid></Border></Grid><!--中间部分--><Grid Grid.Column="1"><Grid.RowDefinitions><RowDefinition Height="150"/><RowDefinition Height="370"/><RowDefinition/></Grid.RowDefinitions><!--中间部分区域--><Grid  Grid.Row="0" Margin="40,0,0,0"><TextBlock Margin="0,50,0,0"><Run Text="立刻播放" FontWeight="SemiBold"/></TextBlock><UniformGrid  Columns="9" Margin="0,80,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Top"><customcontrols:StreamingStatusButton ImageSource="assets/s1.png"/><customcontrols:StreamingStatusButton ImageSource="/assets/s2.png"/><customcontrols:StreamingStatusButton ImageSource="/assets/s3.png"/><customcontrols:StreamingStatusButton ImageSource="/assets/s4.png"/><customcontrols:StreamingStatusButton ImageSource="/assets/s5.png"/><customcontrols:StreamingStatusButton ImageSource="/assets/s6.png"/><customcontrols:StreamingStatusButton ImageSource="/assets/s7.png"/><customcontrols:StreamingStatusButton ImageSource="/assets/s8.png"/><customcontrols:StreamingStatusButton ImageSource="/assets/.png"/></UniformGrid></Grid><Grid Grid.Row="1" Margin="40,0,0,0"><TextBlock  FontWeight="SemiBold" HorizontalAlignment="Left" VerticalAlignment="Top"><Run Text="这周流行"  FontWeight="SemiBold"/></TextBlock><Grid Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="0"><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><Border  Grid.Column="0" CornerRadius="12" HorizontalAlignment="Left" Height="301" Width="198" Margin="0,30,20,0" VerticalAlignment="Top"><Border.Background><ImageBrush ImageSource="/assets/1.jpg"/></Border.Background><TextBlock  Margin="10,20,0,0"><Run  Text="C语言程序设计" Foreground="White" FontWeight="SemiBold"/><LineBreak/><Run  Text="@小明老师" FontSize="13" Foreground="White" FontWeight="SemiBold"/></TextBlock></Border><Border  Grid.Column="1" CornerRadius="12" HorizontalAlignment="Left" Height="301" Width="198" Margin="-30,30,0,0" VerticalAlignment="Top"><Border.Background><ImageBrush ImageSource="/assets/3.jpg"/></Border.Background><TextBlock  Margin="10,20,0,0"><Run  Text="数据结构" Foreground="White" FontWeight="SemiBold"/><LineBreak/><Run  Text="@小王老师" FontSize="13" Foreground="White" FontWeight="SemiBold"/></TextBlock></Border></Grid><TextBlock Margin="0,345,0,0"><Run Text="立刻播放" FontWeight="SemiBold"/></TextBlock></Grid><Grid Grid.Row="2" Margin="40,0,0,0"><Grid><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition/><RowDefinition/></Grid.RowDefinitions><Grid Grid.Row="0" Grid.Column="0"><Button><Button.Style><Style TargetType="{x:Type Button}"><Setter Property="HorizontalAlignment" Value="Center"/><Setter Property="VerticalAlignment" Value="Center"/><Setter Property="Height" Value="80"/><Setter Property="Width" Value="200"/><Setter Property="Margin" Value="0,0,0,0"/><Setter Property="Background" Value="WhiteSmoke"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Border Background="{TemplateBinding Background}" CornerRadius="10"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="40"/><ColumnDefinition/><ColumnDefinition Width="35"/></Grid.ColumnDefinitions><Border Grid.Column="0" Margin="10,0,0,0" CornerRadius="10" Height="28" Width="28" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center"><Path Data="{StaticResource play}" Width="28" Height="28" Fill="#1afa29" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform"/></Border><Grid Grid.Column="1"><TextBlock  Margin="1,20,1,10"><Run  Text="面向对象程序设计"  FontWeight="SemiBold"/><LineBreak/><Run  Text="@小王老师" FontSize="13"  FontWeight="SemiBold"/></TextBlock></Grid><Border Grid.Column="2" Margin="-30,0,0,0"><Path Data="{StaticResource add}" Width="28" Height="28" Fill="#ffbebebe" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform"/></Border></Grid></Border></ControlTemplate></Setter.Value></Setter></Style></Button.Style></Button></Grid><Grid Grid.Row="0" Grid.Column="1"><Button><Button.Style><Style TargetType="{x:Type Button}"><Setter Property="HorizontalAlignment" Value="Center"/><Setter Property="VerticalAlignment" Value="Center"/><Setter Property="Height" Value="80"/><Setter Property="Width" Value="200"/><Setter Property="Margin" Value="0,0,0,0"/><Setter Property="Background" Value="WhiteSmoke"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Border Background="{TemplateBinding Background}" CornerRadius="10"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="40"/><ColumnDefinition/><ColumnDefinition Width="35"/></Grid.ColumnDefinitions><Border Grid.Column="0" Margin="10,0,0,0" CornerRadius="10" Height="28" Width="28" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center"><Path Data="{StaticResource play}" Width="28" Height="28" Fill="#1afa29" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform"/></Border><Grid Grid.Column="1"><TextBlock  Margin="30,20,30,10"><Run  Text="操作系统"  FontWeight="SemiBold"/><LineBreak/><Run  Text="@小赵老师" FontSize="13"  FontWeight="SemiBold"/></TextBlock></Grid><Border Grid.Column="2" Margin="-30,0,0,0"><Path Data="{StaticResource add}" Width="28" Height="28" Fill="#ffbebebe" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform"/></Border></Grid></Border></ControlTemplate></Setter.Value></Setter></Style></Button.Style></Button></Grid><Grid Grid.Row="1" Grid.Column="0"><Button><Button.Style><Style TargetType="{x:Type Button}"><Setter Property="HorizontalAlignment" Value="Center"/><Setter Property="VerticalAlignment" Value="Center"/><Setter Property="Height" Value="80"/><Setter Property="Width" Value="200"/><Setter Property="Margin" Value="0,0,0,0"/><Setter Property="Background" Value="WhiteSmoke"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Border Background="{TemplateBinding Background}" CornerRadius="10"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="40"/><ColumnDefinition/><ColumnDefinition Width="35"/></Grid.ColumnDefinitions><Border Grid.Column="0" Margin="10,0,0,0" CornerRadius="10" Height="28" Width="28" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center"><Path Data="{StaticResource play}" Width="28" Height="28" Fill="#1afa29" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform"/></Border><Grid Grid.Column="1"><TextBlock  Margin="20,20,20,10"><Run  Text="计算机网络"  FontWeight="SemiBold"/><LineBreak/><Run  Text="@小孔老师" FontSize="13"  FontWeight="SemiBold"/></TextBlock></Grid><Border Grid.Column="2" Margin="-30,0,0,0"><Path Data="{StaticResource add}" Width="28" Height="28" Fill="#ffbebebe" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform"/></Border></Grid></Border></ControlTemplate></Setter.Value></Setter></Style></Button.Style></Button></Grid><Grid Grid.Row="1" Grid.Column="1"><Button><Button.Style><Style TargetType="{x:Type Button}"><Setter Property="HorizontalAlignment" Value="Center"/><Setter Property="VerticalAlignment" Value="Center"/><Setter Property="Height" Value="80"/><Setter Property="Width" Value="200"/><Setter Property="Margin" Value="0,0,0,0"/><Setter Property="Background" Value="WhiteSmoke"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Border Background="{TemplateBinding Background}" CornerRadius="10"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="40"/><ColumnDefinition/><ColumnDefinition Width="35"/></Grid.ColumnDefinitions><Border Grid.Column="0" Margin="10,0,0,0" CornerRadius="10" Height="28" Width="28" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center"><Path Data="{StaticResource play}" Width="28" Height="28" Fill="#1afa29" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform"/></Border><Grid Grid.Column="1"><TextBlock  Margin="10,20,10,10"><Run  Text="计算机组成原理"  FontWeight="SemiBold"/><LineBreak/><Run  Text="@小马老师" FontSize="13"  FontWeight="SemiBold"/></TextBlock></Grid><Border Grid.Column="2" Margin="-30,0,0,0"><Path Data="{StaticResource add}" Width="28" Height="28" Fill="#ffbebebe" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform"/></Border></Grid></Border></ControlTemplate></Setter.Value></Setter></Style></Button.Style></Button></Grid></Grid></Grid></Grid><!--绘制一根竖直的分隔细线--><Line Grid.Column="1" Stroke="Black"  HorizontalAlignment="Right"  Y1="0" Y2="{Binding Height,ElementName=this}" StrokeThickness="0.5" /><!--Line用于在两个点之间绘制直线;Y1是获取或设置 Line 起始点的 y 坐标；Y2是获取或设置 Line 终结点的 y 坐标；StrokeThickness是获取或设置笔划轮廓的 Shape 宽度。--><!--右边区域--><Grid Grid.Column="2" Margin="40,0,0,0"><Grid.RowDefinitions><RowDefinition /><RowDefinition/><RowDefinition/></Grid.RowDefinitions><Grid Grid.Row="0"><TextBlock Margin="0,50,0,0"><Run Text="探索更多" FontWeight="SemiBold"/></TextBlock><Path Margin="100,-45,0,85" Data="{StaticResource more}" Width="28" Height="28" Fill="#ffbebebe" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform"/><StackPanel  Margin="-30,0,0,0" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center"><TextBox Height="50" Width="150" Style="{StaticResource MaterialDesignFilledTextBox}" /><Button Height="50" Style="{StaticResource MaterialDesignRaisedButton}" Content="搜索" /></StackPanel></Grid><Grid Grid.Row="1" Margin="0,-50,0,0"><Grid><Grid.ColumnDefinitions><ColumnDefinition /><ColumnDefinition /></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition/></Grid.RowDefinitions><Border  CornerRadius="30" Grid.ColumnSpan="2" HorizontalAlignment="Left" Height="150" Width="230" Margin="10" VerticalAlignment="Top"><Border.Background><ImageBrush ImageSource="/assets/4.jpg"/></Border.Background><TextBlock  Margin="10,20,0,0"><Run  Text="Web程序设计" Foreground="White" FontWeight="SemiBold"/><LineBreak/><Run  Text="@小李老师" FontSize="13" Foreground="White" FontWeight="SemiBold"/></TextBlock></Border><Border  CornerRadius="20" Margin="15,10,0,-50" Height="150" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left"  VerticalAlignment="Top"><Border.Background><ImageBrush ImageSource="/assets/5.jpg"/></Border.Background><TextBlock  Margin="0,20,0,0" Width="105"><Run  Text="编译原理" Foreground="White" FontSize="13" FontWeight="SemiBold"/><LineBreak/><Run  Text="@小明老师" FontSize="10" Foreground="White" FontWeight="SemiBold"/></TextBlock></Border><Border  CornerRadius="20" Margin="10,10,-20,-50" Height="150" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left"  VerticalAlignment="Top"><Border.Background><ImageBrush ImageSource="/assets/6.jpg"/></Border.Background><TextBlock  Margin="0,20,0,0"><Run  Text="Android程序设计" Foreground="White" FontWeight="SemiBold" FontSize="13"/><LineBreak/><Run  Text="@小王老师" FontSize="10" Foreground="White" FontWeight="SemiBold"/></TextBlock></Border></Grid></Grid><Grid Grid.Row="2"><!--联系我们按钮--><Button ><Button.Style><Style TargetType="{x:Type Button}"><Setter Property="HorizontalAlignment" Value="Center"/><Setter Property="VerticalAlignment" Value="Center"/><Setter Property="Height" Value="100"/><Setter Property="Width" Value="200"/><Setter Property="Margin" Value="0,0,0,-80"/><Setter Property="Background" Value="WhiteSmoke"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Border Background="{TemplateBinding Background}" CornerRadius="10"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="28"/><ColumnDefinition/><ColumnDefinition Width="35"/></Grid.ColumnDefinitions><Border Grid.Column="0" CornerRadius="10" Height="28" Width="28" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center"><Path Data="{StaticResource contact}" Width="28" Height="28" Fill="#1afa29" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform"/></Border><Grid Grid.Column="1"><TextBlock HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15,5,5,5"><Run Text="联系我们" FontSize="16" FontWeight="Bold"/></TextBlock></Grid><Border Grid.Column="2" ><Path Data="{StaticResource detail}" Width="28" Height="28" Fill="#ffbebebe" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform"/></Border></Grid></Border></ControlTemplate></Setter.Value></Setter></Style></Button.Style></Button></Grid></Grid></Grid></Border>
</Window>

MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;namespace WpfApp1
{/// <summary>/// MainWindow.xaml 的交互逻辑/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();}protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)//设置窗口可拖拽{base.OnMouseLeftButtonDown(e);DragMove();}}
}

3. MenuButton.xaml

<UserControl x:Class="WpfApp1.customcontrols.MenuButton"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:WpfApp1.customcontrols"mc:Ignorable="d" x:Name="this"><!--绘制菜单按钮用户自定义控件--><UserControl.Resources><!--如果我们没有在主窗口绑定任何图标，就设置默认图标--><PathGeometry x:Key="DefaultIcon" Figures="M130.983 703.413l63.491 0 0 126.957-63.491 0 0-126.957ZM829.029 4.175 196.834 4.175c-104.742 0-189.659 84.917-189.659 189.659l0 632.177c0 104.768 84.917 189.659 189.659 189.659l632.196 0c104.742 0 189.659-84.891 189.659-189.659l0-632.177C1018.688 89.092 933.771 4.175 829.029 4.175zM354.691 68.548l316.949 0 0 354.192-94.972-94.981-63.502 63.482-63.495-63.482-94.98 94.984L354.691 68.548zM955.468 826.011c0 69.839-56.607 126.452-126.439 126.452L196.834 952.463c-69.832 0-126.439-56.613-126.439-126.452l0-632.177c0-69.839 56.607-126.42 126.439-126.42l93.857 0 0 509.845 158.986-158.994 63.487 63.475 63.494-63.476 158.981 158.998 0-509.848 93.39 0c69.832 0 126.439 56.581 126.439 126.42L955.468 826.011zM640.914 703.413l63.491 0 0 126.957-63.491 0 0-126.957ZM259.972 703.413l63.485 0 0 126.957-63.485 0 0-126.957ZM385.948 703.413l63.491 0 0 126.957-63.491 0 0-126.957ZM513.931 703.413l63.498 0 0 126.957-63.498 0 0-126.957Z "/><Style x:Key="IndicatorStyle" TargetType="{x:Type Border}"><Setter Property="HorizontalAlignment" Value="Left"/><Setter Property="VerticalAlignment" Value="Stretch"/><Setter Property="CornerRadius" Value="{Binding IndicatorCornerEadius,ElementName=this,FallbackValue=2,TargetNullValue=2}"/><Setter Property="Background" Value="{Binding IndicatorBrush,ElementName=this}"/><Setter Property="Visibility" Value="Hidden"/><Setter Property="Width" Value="{Binding IndicatorWidth,ElementName=this,FallbackValue=4,TargetNullValue=4}"/><Style.Triggers><DataTrigger Binding="{Binding IsMouseOver,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ToggleButton}}" Value="True"><Setter Property="Visibility" Value="Visible"/></DataTrigger><DataTrigger Binding="{Binding IsChecked,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ToggleButton}}" Value="True"><Setter Property="Visibility" Value="Visible"/></DataTrigger></Style.Triggers></Style><Style x:Key="MenuIconStyle" TargetType="{x:Type Path}"><Setter Property="Fill" Value="#bebebe"/><Style.Triggers><DataTrigger Binding="{Binding IsMouseOver,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ToggleButton}}" Value="True"><Setter Property="Fill" Value="#fff7542e"/></DataTrigger><DataTrigger Binding="{Binding IsChecked,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ToggleButton}}" Value="True"><Setter Property="Fill" Value="#fff7542e"/></DataTrigger></Style.Triggers></Style><Style x:Key="MenuTextStyle" TargetType="{x:Type TextBlock}"><Setter Property="Foreground" Value="#bebebe"/><Setter Property="VerticalAlignment" Value="Center"/><Setter Property="FontSize" Value="10"/><Setter Property="FontWeight" Value="Normal"/><Setter Property="FontFamily" Value="Segoe UI Semibold"/><Setter Property="Margin" Value="13,0,0,0"/><Style.Triggers><DataTrigger Binding="{Binding IsMouseOver,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ToggleButton}}" Value="True"><Setter Property="Foreground" Value="Black"/></DataTrigger><DataTrigger Binding="{Binding IsChecked,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ToggleButton}}" Value="True"><Setter Property="Foreground" Value="Black"/></DataTrigger></Style.Triggers></Style><Style x:Key="MenuButtonStyle" TargetType="{x:Type ToggleButton}"><Setter Property="Height" Value="32"/><Setter Property="Background" Value="White"/><Setter Property="HorizontalAlignment" Value="Stretch"/><Setter Property="HorizontalContentAlignment" Value="Center"/><Setter Property="Background" Value="Transparent"/><Setter Property="BorderThickness" Value="0"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type ToggleButton}"><Border Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{Binding Padding,ElementName=this}"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/> <!--存放图标icon--><ColumnDefinition/><!--存放文字text--></Grid.ColumnDefinitions><!--indiactor--><Border Style="{StaticResource IndicatorStyle}"/><!--图标icon--><Path Data="{Binding Icon,ElementName=this,FallbackValue={StaticResource DefaultIcon}, TargetNullValue={StaticResource DefaultIcon}}" Margin="{Binding IconMargin,FallbackValue='20,0,0,0',TargetNullValue='20,0,0,0'}"Stretch="Uniform" Width="{Binding IconWidth,ElementName=this,FallbackValue=10,TargetNullValue=10}"Style="{StaticResource MenuIconStyle}"/><!--text文字--><TextBlock Style="{StaticResource MenuTextStyle}" Grid.Column="1" Text="{Binding Text,ElementName=this,FallbackValue=MenuText,TargetNullValue=MenuText}"/></Grid></Border><ControlTemplate.Triggers><DataTrigger Binding="{Binding IsChecked,ElementName=this}" Value="True"><Setter Property="IsChecked" Value="True"/></DataTrigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></UserControl.Resources><Grid><RadioButton Style="{StaticResource MenuButtonStyle}" GroupName="{Binding GroupName,ElementName=this}"/></Grid>
</UserControl>

4. MenuButton.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;namespace WpfApp1.customcontrols
{/// <summary>/// MenuButton.xaml 的交互逻辑/// </summary>public partial class MenuButton : UserControl{public MenuButton(){InitializeComponent();}//下面是注册的一些依赖属性（快捷键：输入propdp,连续按两次tab键即可快捷注册依赖属性）public PathGeometry Icon{get { return (PathGeometry)GetValue(IconProperty); }set { SetValue(IconProperty, value); }}// Using a DependencyProperty as the backing store for Icon.  This enables animation, styling, binding, etc...public static readonly DependencyProperty IconProperty =DependencyProperty.Register("Icon", typeof(PathGeometry), typeof(MenuButton));public int IconWidth{get { return (int)GetValue(IconWidthProperty); }set { SetValue(IconWidthProperty, value); }}// Using a DependencyProperty as the backing store for IconWidth.  This enables animation, styling, binding, etc...public static readonly DependencyProperty IconWidthProperty =DependencyProperty.Register("IconWidth", typeof(int), typeof(MenuButton));public SolidColorBrush IndicatorBrush{get { return (SolidColorBrush)GetValue(IndicatorBrushProperty); }set { SetValue(IndicatorBrushProperty, value); }}// Using a DependencyProperty as the backing store for IndicatorBrush.  This enables animation, styling, binding, etc...public static readonly DependencyProperty IndicatorBrushProperty =DependencyProperty.Register("IndicatorBrush", typeof(SolidColorBrush), typeof(MenuButton));public int IndicatorCornerEadius{get { return (int)GetValue(IndicatorCornerEadiusProperty); }set { SetValue(IndicatorCornerEadiusProperty, value); }}// Using a DependencyProperty as the backing store for IndicatorCornerEadius.  This enables animation, styling, binding, etc...public static readonly DependencyProperty IndicatorCornerEadiusProperty =DependencyProperty.Register("IndicatorCornerEadius", typeof(int), typeof(MenuButton));public string Text{get { return (string)GetValue(TextProperty); }set { SetValue(TextProperty, value); }}// Using a DependencyProperty as the backing store for Text.  This enables animation, styling, binding, etc...public static readonly DependencyProperty TextProperty =DependencyProperty.Register("Text", typeof(string), typeof(MenuButton));public new Thickness Padding{get { return (Thickness)GetValue( PaddingProperty); }set { SetValue( PaddingProperty, value); }}// Using a DependencyProperty as the backing store for Thickness Padding.  This enables animation, styling, binding, etc...public static readonly DependencyProperty PaddingProperty =DependencyProperty.Register(" Padding", typeof(Thickness), typeof(MenuButton));public bool IsSelected{get { return (bool)GetValue(IsSelectedProperty); }set { SetValue(IsSelectedProperty, value); }}// Using a DependencyProperty as the backing store for IsSelected.  This enables animation, styling, binding, etc...public static readonly DependencyProperty IsSelectedProperty =DependencyProperty.Register("IsSelected", typeof(bool), typeof(MenuButton));public string GroupName{get { return (string)GetValue(GroupNameProperty); }set { SetValue(GroupNameProperty, value); }}// Using a DependencyProperty as the backing store for GroupName.  This enables animation, styling, binding, etc...public static readonly DependencyProperty GroupNameProperty =DependencyProperty.Register("GroupName", typeof(string), typeof(MenuButton));}}

5. StreamingStatusButton.xaml

<UserControl x:Class="WpfApp1.customcontrols.StreamingStatusButton"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:WpfApp1.customcontrols"mc:Ignorable="d" x:Name="this"><Grid><Border x:Name="border" Background="Transparent" CornerRadius="10" RenderTransformOrigin="0.5,0.5" Height="35" Width="35" BorderThickness="1"><Rectangle StrokeThickness="2" Stretch="Uniform"><Rectangle.Fill><ImageBrush ImageSource="{Binding ImageSource,ElementName=this}"/></Rectangle.Fill></Rectangle></Border></Grid>
</UserControl>

StreamingStatusButton.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;namespace WpfApp1.customcontrols
{/// <summary>/// StreamingStatusButton.xaml 的交互逻辑/// </summary>public partial class StreamingStatusButton : UserControl{public StreamingStatusButton(){InitializeComponent();}//注册依赖属性public Uri ImageSource{get { return (Uri)GetValue(ImageSourceProperty); }set { SetValue(ImageSourceProperty, value); }}// Using a DependencyProperty as the backing store for ImageSource.  This enables animation, styling, binding, etc...public static readonly DependencyProperty ImageSourceProperty =DependencyProperty.Register("ImageSource", typeof(Uri), typeof(StreamingStatusButton));}
}

5. 设计一个Dashboard

1.实现效果

2.代码展示：

需要安装一个包，来加载图标资源

工程结构：

App.xaml：

<Application x:Class="WpfApp1.App"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:local="clr-namespace:WpfApp1"xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"StartupUri="MainWindow.xaml"xmlns:theme="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero2"><Application.Resources><Style x:Key="topButton" TargetType="Button"><Setter Property="Background" Value="Transparent"/><Setter Property="Foreground" Value="#6e7783"/><Setter Property="FocusVisualStyle" Value="{x:Null}"/><Setter Property="Width" Value="30"/><Setter Property="Height" Value="30"/><Setter Property="HorizontalAlignment" Value="Right"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Border Background="{TemplateBinding Background}" CornerRadius="50"><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/></Border></ControlTemplate></Setter.Value></Setter><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="#dcdcdc"/></Trigger></Style.Triggers></Style><Style x:Key="menuButton" TargetType="Button"><Setter Property="Background" Value="Transparent"/><Setter Property="Foreground" Value="#d0c0ff"/><Setter Property="FocusVisualStyle" Value="{x:Null}"/><Setter Property="Height" Value="35"/><Setter Property="Margin" Value="15 3"/><Setter Property="FontSize" Value="13"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Border Background="{TemplateBinding Background}" CornerRadius="7"><ContentPresenter HorizontalAlignment="Left" VerticalAlignment="Center"/></Border></ControlTemplate></Setter.Value></Setter><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="#7b5cd6"/><Setter Property="Foreground" Value="#ffffff"/></Trigger></Style.Triggers></Style><Style x:Key="menuButtonIcon" TargetType="materialDesign:PackIcon"><Setter Property="Width" Value="15"/><Setter Property="Height" Value="15"/><Setter Property="VerticalAlignment" Value="Center"/><Setter Property="Margin" Value="20 2 20 0"/></Style><Style x:Key="textboxSearch" TargetType="TextBox"><Setter Property="Background" Value="#ffffff"/><Setter Property="Foreground" Value="#b0b9c6"/><Setter Property="BorderThickness" Value="0"/><Setter Property="FontSize" Value="12"/><Setter Property="Padding" Value="15"/><Setter Property="Margin" Value="0 10"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="TextBox"><Border x:Name="border" CornerRadius="20" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" BorderThickness="1" BorderBrush="#e0e6ed"><ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Hidden"/></Border><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="BorderBrush" Value="#d9d9d9" TargetName="border"/></Trigger><Trigger Property="IsKeyboardFocused" Value="True"><Setter Property="BorderBrush" Value="#d9d9d9" TargetName="border"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><Style x:Key="addButton" TargetType="Button"><Setter Property="Background" Value="#6741d9"/><Setter Property="Foreground" Value="#ffffff"/><Setter Property="FocusVisualStyle" Value="{x:Null}"/><Setter Property="Width" Value="150"/><Setter Property="Height" Value="35"/><Setter Property="HorizontalAlignment" Value="Right"/><Setter Property="Margin" Value="0 20 0 0"/><Setter Property="FontSize" Value="13"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Border Background="{TemplateBinding Background}" CornerRadius="7"><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/></Border></ControlTemplate></Setter.Value></Setter><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="#7b5cd6"/><Setter Property="Foreground" Value="#ffffff"/></Trigger></Style.Triggers></Style><Style x:Key="tabButton" TargetType="Button"><Setter Property="Background" Value="Transparent"/><Setter Property="Foreground" Value="#121518"/><Setter Property="FocusVisualStyle" Value="{x:Null}"/><Setter Property="Width" Value="70"/><Setter Property="Height" Value="45"/><Setter Property="BorderBrush" Value="Transparent"/><Setter Property="FontSize" Value="14"/><Setter Property="FontWeight" Value="SemiBold"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Border Background="{TemplateBinding Background}" BorderThickness="0 0 0 1" BorderBrush="{TemplateBinding BorderBrush}"><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/></Border></ControlTemplate></Setter.Value></Setter><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="BorderBrush" Value="#784ff2"/></Trigger></Style.Triggers></Style><Style x:Key="textBoxFilter" TargetType="TextBox"><Setter Property="Padding" Value="10 7"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="TextBox"><Border x:Name="border" CornerRadius="7" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" BorderThickness="1" BorderBrush="#e0e6ed"><ScrollViewer x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Hidden"/></Border><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="BorderBrush" Value="#d9d9d9" TargetName="border"/></Trigger><Trigger Property="IsKeyboardFocused" Value="True"><Setter Property="BorderBrush" Value="#d9d9d9" TargetName="border"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><Style x:Key="pagingButton" TargetType="Button"><Setter Property="Background" Value="Transparent"/><Setter Property="Foreground" Value="#6c7682"/><Setter Property="FocusVisualStyle" Value="{x:Null}"/><Setter Property="FontSize" Value="13"/><Setter Property="Margin" Value="1 0"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Border Background="{TemplateBinding Background}" CornerRadius="5" Padding="10 5"><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0 0 0 1"/></Border></ControlTemplate></Setter.Value></Setter><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="#7950f2"/><Setter Property="Foreground" Value="#ffffff"/></Trigger></Style.Triggers></Style><Style x:Key="pagingButtonIcon" TargetType="materialDesign:PackIcon"><Setter Property="Width" Value="10"/><Setter Property="Height" Value="10"/><Setter Property="VerticalAlignment" Value="Center"/></Style><Style x:Key="gridEditButton" TargetType="Button"><Setter Property="Background" Value="#512da8"/><Setter Property="BorderBrush" Value="#4a148c"/><Setter Property="Foreground" Value="#ffffff"/><Setter Property="FocusVisualStyle" Value="{x:Null}"/><Setter Property="VerticalAlignment" Value="Center"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><Border Background="{TemplateBinding Background}" CornerRadius="5" Padding="5" BorderThickness="1" BorderBrush="{TemplateBinding BorderBrush}"><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/></Border></ControlTemplate></Setter.Value></Setter><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="#673ab7"/></Trigger></Style.Triggers></Style><Style x:Key="gridRemoveButton" TargetType="Button" BasedOn="{StaticResource gridEditButton}"><Setter Property="Background" Value="#d32f2f"/><Setter Property="BorderBrush" Value="#b71c1c"/><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="#f44336"/></Trigger></Style.Triggers></Style><Style x:Key="gridButtonIcon" TargetType="materialDesign:PackIcon"><Setter Property="Width" Value="12"/><Setter Property="Height" Value="12"/><Setter Property="VerticalAlignment" Value="Center"/></Style><!-- Region DataGrid Style--><SolidColorBrush x:Key="{x:Static DataGrid.FocusBorderBrushKey}" Color="#FF000000"/><Style x:Key="{ComponentResourceKey ResourceId=DataGridSelectAllButtonStyle, TypeInTargetAssembly={x:Type DataGrid}}" TargetType="{x:Type Button}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Grid><Rectangle x:Name="Border" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" SnapsToDevicePixels="True"/><Polygon x:Name="Arrow" Fill="Black" HorizontalAlignment="Right" Margin="8,8,3,3" Opacity="0.15" Points="0,10 10,10 10,0" Stretch="Uniform" VerticalAlignment="Bottom"/></Grid><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Stroke" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"/></Trigger><Trigger Property="IsPressed" Value="True"><Setter Property="Fill" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"/></Trigger><Trigger Property="IsEnabled" Value="False"><Setter Property="Visibility" TargetName="Arrow" Value="Collapsed"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><Style x:Key="DataGridStyle1" TargetType="{x:Type DataGrid}"><Setter Property="Background" Value="Transparent"/><Setter Property="Foreground" Value="#222528"/><Setter Property="BorderThickness" Value="0"/><Setter Property="RowDetailsVisibilityMode" Value="VisibleWhenSelected"/><Setter Property="ScrollViewer.CanContentScroll" Value="true"/><Setter Property="ScrollViewer.PanningMode" Value="Both"/><Setter Property="Stylus.IsFlicksEnabled" Value="False"/><Setter Property="AutoGenerateColumns" Value="False"/><Setter Property="HeadersVisibility" Value="Column"/><Setter Property="Margin" Value="0 10 0 0"/><Setter Property="SelectionMode" Value="Single"/><Setter Property="SelectionUnit" Value="FullRow"/><Setter Property="CanUserAddRows" Value="False"/><Setter Property="CanUserDeleteRows" Value="False"/><Setter Property="CanUserReorderColumns" Value="False"/><Setter Property="FontSize" Value="13"/><Setter Property="ColumnWidth" Value="*"/><Setter Property="GridLinesVisibility" Value="None"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type DataGrid}"><Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True"><ScrollViewer x:Name="DG_ScrollViewer" Focusable="false"><ScrollViewer.Template><ControlTemplate TargetType="{x:Type ScrollViewer}"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/><ColumnDefinition Width="*"/><ColumnDefinition Width="Auto"/></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition Height="*"/><RowDefinition Height="Auto"/></Grid.RowDefinitions><Button Command="{x:Static DataGrid.SelectAllCommand}" Focusable="false" Style="{DynamicResource {ComponentResourceKey ResourceId=DataGridSelectAllButtonStyle, TypeInTargetAssembly={x:Type DataGrid}}}" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.All}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" Width="{Binding CellsPanelHorizontalOffset, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/><DataGridColumnHeadersPresenter x:Name="PART_ColumnHeadersPresenter" Grid.Column="1" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Column}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/><ScrollContentPresenter x:Name="PART_ScrollContentPresenter" CanContentScroll="{TemplateBinding CanContentScroll}" Grid.ColumnSpan="2" Grid.Row="1"/><ScrollBar x:Name="PART_VerticalScrollBar" Grid.Column="2" Maximum="{TemplateBinding ScrollableHeight}" Orientation="Vertical" Grid.Row="1" Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportHeight}" Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/><Grid Grid.Column="1" Grid.Row="2"><Grid.ColumnDefinitions><ColumnDefinition Width="{Binding NonFrozenColumnsViewportHorizontalOffset, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><ScrollBar x:Name="PART_HorizontalScrollBar" Grid.Column="1" Maximum="{TemplateBinding ScrollableWidth}" Orientation="Horizontal" Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}" ViewportSize="{TemplateBinding ViewportWidth}" Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/></Grid></Grid></ControlTemplate></ScrollViewer.Template><ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/></ScrollViewer></Border></ControlTemplate></Setter.Value></Setter><Style.Triggers><MultiTrigger><MultiTrigger.Conditions><Condition Property="IsGrouping" Value="true"/><Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="false"/></MultiTrigger.Conditions><Setter Property="ScrollViewer.CanContentScroll" Value="false"/></MultiTrigger></Style.Triggers></Style><Style x:Key="DataGridCellStyle1" TargetType="{x:Type DataGridCell}"><Setter Property="Background" Value="Transparent"/><Setter Property="VerticalAlignment" Value="Center"/><Setter Property="FocusVisualStyle" Value="{x:Null}"/><Setter Property="Margin" Value="15 0"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type DataGridCell}"><Border Background="{TemplateBinding Background}" BorderThickness="0" SnapsToDevicePixels="True"><ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/></Border></ControlTemplate></Setter.Value></Setter></Style><Style x:Key="ColumnHeaderGripperStyle" TargetType="{x:Type Thumb}"><Setter Property="Width" Value="8"/><Setter Property="Background" Value="Transparent"/><Setter Property="Cursor" Value="SizeWE"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Thumb}"><Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}"/></ControlTemplate></Setter.Value></Setter></Style><Style x:Key="DataGridColumnHeaderStyle1" TargetType="{x:Type DataGridColumnHeader}"><Setter Property="VerticalContentAlignment" Value="Center"/><Setter Property="Background" Value="Transparent"/><Setter Property="Foreground" Value="#69717d"/><Setter Property="Margin" Value="15 0 15 10"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type DataGridColumnHeader}"><Grid><theme:DataGridHeaderBorder Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" IsPressed="{TemplateBinding IsPressed}" IsHovered="{TemplateBinding IsMouseOver}" IsClickable="{TemplateBinding CanUserSort}" Padding="{TemplateBinding Padding}" SortDirection="{TemplateBinding SortDirection}" SeparatorVisibility="{TemplateBinding SeparatorVisibility}" SeparatorBrush="{TemplateBinding SeparatorBrush}"><ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/></theme:DataGridHeaderBorder><Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Style="{StaticResource ColumnHeaderGripperStyle}"/><Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Style="{StaticResource ColumnHeaderGripperStyle}"/></Grid></ControlTemplate></Setter.Value></Setter></Style><Style x:Key="DataGridRowStyle1" TargetType="{x:Type DataGridRow}"><Setter Property="Background" Value="White"/><Setter Property="Margin" Value="0 4 0 0"/><Setter Property="SnapsToDevicePixels" Value="true"/><Setter Property="Validation.ErrorTemplate" Value="{x:Null}"/><Setter Property="ValidationErrorTemplate"><Setter.Value><ControlTemplate><TextBlock Foreground="Red" Margin="2,0,0,0" Text="!" VerticalAlignment="Center"/></ControlTemplate></Setter.Value></Setter><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type DataGridRow}"><Border x:Name="DGR_Border" Padding="0 8" Background="{TemplateBinding Background}" CornerRadius="5" BorderThickness="0" SnapsToDevicePixels="True"><SelectiveScrollingGrid><SelectiveScrollingGrid.ColumnDefinitions><ColumnDefinition Width="Auto"/><ColumnDefinition Width="*"/></SelectiveScrollingGrid.ColumnDefinitions><SelectiveScrollingGrid.RowDefinitions><RowDefinition Height="*"/><RowDefinition Height="Auto"/></SelectiveScrollingGrid.RowDefinitions><DataGridCellsPresenter Grid.Column="1" ItemsPanel="{TemplateBinding ItemsPanel}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/><DataGridDetailsPresenter Grid.Column="1" Grid.Row="1" SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding AreRowDetailsFrozen, ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical}, Converter={x:Static DataGrid.RowDetailsScrollingConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" Visibility="{TemplateBinding DetailsVisibility}"/><DataGridRowHeader Grid.RowSpan="2" SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Row}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/></SelectiveScrollingGrid></Border></ControlTemplate></Setter.Value></Setter><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="#623ed0"/><Setter Property="Foreground" Value="#ffffff"/></Trigger><Trigger Property="IsSelected" Value="True"><Setter Property="Background" Value="#623ed0"/><Setter Property="Foreground" Value="#ffffff"/></Trigger><MultiTrigger><MultiTrigger.Conditions><Condition Property="IsSelected" Value="True"/><Condition Property="Selector.IsSelectionActive" Value="False"/></MultiTrigger.Conditions><Setter Property="Background" Value="#dfdfdf"/></MultiTrigger></Style.Triggers></Style><!--EndRegion--><!--#region CheckBoxStyle--><SolidColorBrush x:Key="OptionMark.Static.Background" Color="#FFFFFFFF"/><SolidColorBrush x:Key="OptionMark.Static.Border" Color="#FF707070"/><SolidColorBrush x:Key="OptionMark.Static.Glyph" Color="#FF212121"/><SolidColorBrush x:Key="OptionMark.MouseOver.Background" Color="#FFF3F9FF"/><SolidColorBrush x:Key="OptionMark.MouseOver.Border" Color="#FF5593FF"/><SolidColorBrush x:Key="OptionMark.MouseOver.Glyph" Color="#FF212121"/><SolidColorBrush x:Key="OptionMark.Pressed.Background" Color="#FFD9ECFF"/><SolidColorBrush x:Key="OptionMark.Pressed.Border" Color="#FF3C77DD"/><SolidColorBrush x:Key="OptionMark.Pressed.Glyph" Color="#FF212121"/><SolidColorBrush x:Key="OptionMark.Disabled.Background" Color="#FFE6E6E6"/><SolidColorBrush x:Key="OptionMark.Disabled.Border" Color="#FFBCBCBC"/><SolidColorBrush x:Key="OptionMark.Disabled.Glyph" Color="#FF707070"/><Style x:Key="CheckBoxStyle1" TargetType="{x:Type CheckBox}"><Setter Property="Background" Value="{StaticResource OptionMark.Static.Background}"/><Setter Property="BorderBrush" Value="#dae2ea"/><Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/><Setter Property="BorderThickness" Value="1"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type CheckBox}"><Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True"><Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><Border x:Name="checkBoxBorder" CornerRadius="3" Padding="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"><Grid x:Name="markGrid"><Path x:Name="optionMark" Data="F1 M 9.97498,1.22334L 4.6983,9.09834L 4.52164,9.09834L 0,5.19331L 1.27664,3.52165L 4.255,6.08833L 8.33331,1.52588e-005L 9.97498,1.22334 Z " Fill="{StaticResource OptionMark.Static.Glyph}" Margin="1" Opacity="0" Stretch="None"/><Rectangle x:Name="indeterminateMark" Fill="{StaticResource OptionMark.Static.Glyph}" Margin="2" Opacity="0"/></Grid></Border><ContentPresenter x:Name="contentPresenter" Grid.Column="1" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/></Grid><ControlTemplate.Triggers><Trigger Property="HasContent" Value="true"><Setter Property="FocusVisualStyle" Value="{x:Null}"/><Setter Property="Padding" Value="4,-1,0,0"/></Trigger><Trigger Property="IsMouseOver" Value="true"><Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.MouseOver.Background}"/><Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="#9575cd"/><Setter Property="Fill" TargetName="optionMark" Value="{StaticResource OptionMark.MouseOver.Glyph}"/><Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.MouseOver.Glyph}"/></Trigger><Trigger Property="IsEnabled" Value="false"><Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Disabled.Background}"/><Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Disabled.Border}"/><Setter Property="Fill" TargetName="optionMark" Value="{StaticResource OptionMark.Disabled.Glyph}"/><Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.Disabled.Glyph}"/></Trigger><Trigger Property="IsPressed" Value="true"><Setter Property="Background" TargetName="checkBoxBorder" Value="{StaticResource OptionMark.Pressed.Background}"/><Setter Property="BorderBrush" TargetName="checkBoxBorder" Value="#9575cd"/><Setter Property="Fill" TargetName="optionMark" Value="{StaticResource OptionMark.Pressed.Glyph}"/><Setter Property="Fill" TargetName="indeterminateMark" Value="{StaticResource OptionMark.Pressed.Glyph}"/></Trigger><Trigger Property="IsChecked" Value="true"><Setter Property="Opacity" TargetName="optionMark" Value="1"/><Setter Property="Opacity" TargetName="indeterminateMark" Value="0"/></Trigger><Trigger Property="IsChecked" Value="{x:Null}"><Setter Property="Opacity" TargetName="optionMark" Value="0"/><Setter Property="Opacity" TargetName="indeterminateMark" Value="1"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><!--#endregion--></Application.Resources>
</Application>

App.xaml.cs：

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Threading.Tasks;
using System.Windows;namespace WpfApp1
{/// <summary>/// Interaction logic for App.xaml/// </summary>public partial class App : Application{}
}

MainWindow.xaml：

<Window x:Class="WpfApp1.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:WpfApp1"xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"mc:Ignorable="d"Title="MainWindow" Height="720" Width="1080" AllowsTransparency="True" Background="Transparent" WindowStartupLocation="CenterScreen" WindowStyle="None"><Window.Resources><BooleanToVisibilityConverter x:Key="BoolToVis"/><SolidColorBrush x:Key="{x:Static DataGrid.FocusBorderBrushKey}" Color="#FF000000"/></Window.Resources><Border Background="#eff2f7" CornerRadius="30" MouseDown="Border_MouseDown" MouseLeftButtonDown="Border_MouseLeftButtonDown"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="200"/><ColumnDefinition Width="*"/></Grid.ColumnDefinitions><Grid Grid.Column="0"><Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition Height="*"/></Grid.RowDefinitions><Button Style="{StaticResource topButton}" Margin="20 28 0 35"><materialDesign:PackIcon Kind="Menu" Width="15" Height="15"/></Button><Border Grid.Row="1" Background="#623ed0" CornerRadius="0 50 0 30"><DockPanel><Border Width="80" Height="80" Background="White" CornerRadius="100" DockPanel.Dock="Top" HorizontalAlignment="Left" Margin="20 -30 0 0"><Ellipse><Ellipse.Fill><ImageBrush ImageSource="/Images/head.jpg"/></Ellipse.Fill></Ellipse></Border><TextBlock Text="Slivers Club" Foreground="White" FontSize="22" FontWeight="SemiBold" DockPanel.Dock="Top" TextAlignment="Center" Margin="2 25 0 10"/><TextBlock Text="Members,France" Foreground="#d0bfff" FontSize="14" FontWeight="SemiBold" DockPanel.Dock="Top" TextAlignment="Center" /><Separator Margin="25" DockPanel.Dock="Top" Height="0.8" Background="#7e5fdc"/><StackPanel DockPanel.Dock="Top"><Button Style="{StaticResource menuButton}"><StackPanel Orientation="Horizontal"><materialDesign:PackIcon Kind="HomeVariant" Style="{StaticResource menuButtonIcon}"/><TextBlock Text="Dashboard"/></StackPanel></Button><Button Style="{StaticResource menuButton}"><StackPanel Orientation="Horizontal"><materialDesign:PackIcon Kind="HomeVariant" Style="{StaticResource menuButtonIcon}"/><TextBlock Text="Dashboard"/></StackPanel></Button><Button Style="{StaticResource menuButton}"><StackPanel Orientation="Horizontal"><materialDesign:PackIcon Kind="HomeVariant" Style="{StaticResource menuButtonIcon}"/><TextBlock Text="Dashboard"/></StackPanel></Button><Button Style="{StaticResource menuButton}"><StackPanel Orientation="Horizontal"><materialDesign:PackIcon Kind="HomeVariant" Style="{StaticResource menuButtonIcon}"/><TextBlock Text="Dashboard"/></StackPanel></Button></StackPanel><Button Style="{StaticResource menuButton}" VerticalAlignment="Bottom" DockPanel.Dock="Bottom" Margin="15 0 15 20"><StackPanel Orientation="Horizontal"><materialDesign:PackIcon Kind="Logout" Style="{StaticResource menuButtonIcon}"/><TextBlock Text="Logout"/></StackPanel></Button></DockPanel></Border></Grid><Grid Grid.Column="1" Margin="30 20 20 20"><Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition Height="Auto"/><RowDefinition Height="Auto"/><RowDefinition Height="Auto"/><RowDefinition Height="Auto"/><RowDefinition Height="*"/><RowDefinition Height="Auto"/></Grid.RowDefinitions><Grid Width="300" HorizontalAlignment="Left" Grid.Row="0"><TextBlock Margin="20 0" VerticalAlignment="Center" Foreground="#b0b9c6"  IsHitTestVisible="False" Panel.ZIndex="1" Text="Search here ..." Visibility="{Binding ElementName=txtSearch,Path=Text.IsEmpty,Converter={StaticResource BoolToVis}}"/><TextBox x:Name="txtSearch" Style="{StaticResource textboxSearch}"/><materialDesign:PackIcon Kind="Magnify" Width="15" Height="15" VerticalAlignment="Center" Margin="0 0 15 0" Foreground="#b0b9c6" HorizontalAlignment="Right"/></Grid><Button Style="{StaticResource topButton}" Margin="0 0 20 0"  Grid.Row="0"><materialDesign:PackIcon Kind="Cog"/></Button><Button Style="{StaticResource topButton}"  Grid.Row="0" Margin="0 0 55 0" HorizontalAlignment="Right"><materialDesign:PackIcon Kind="Bell"/></Button><TextBlock Text="Members" Grid.Row="1" FontSize="32" FontWeight="SemiBold" Margin="0 20 0 0" HorizontalAlignment="Left" Foreground="#121518"/><Button Style="{StaticResource addButton}"  Grid.Row="1"><StackPanel Orientation="Horizontal"><materialDesign:PackIcon Kind="Plus" VerticalAlignment="Center" Width="11" Height="11" Margin="0 1 8 0"/><TextBlock Text="Add New Member"/></StackPanel></Button><Separator Height="1" Grid.Row="3" Background="#dae2ea" Margin="0 -1 0 10"/><StackPanel Grid.Row="2" Orientation="Horizontal" Margin="0 10 0 0"><Button Content="Club Staff" Style="{StaticResource tabButton}" BorderBrush="#784ff2"/><Button Content="Players" Style="{StaticResource tabButton}"/><Button Content="Archved" Style="{StaticResource tabButton}"/></StackPanel><TextBlock Text="68 Club Staff" Grid.Row="4" FontFamily="18" FontWeight="SemiBold" Foreground="#121518" HorizontalAlignment="Left" VerticalAlignment="Center"/><TextBlock Text="Filter by" Grid.Row="4" FontFamily="13" Margin="0 0 215 0" FontWeight="SemiBold" Foreground="#121518" HorizontalAlignment="Right" VerticalAlignment="Center"/><Grid Width="200" HorizontalAlignment="Right" Grid.Row="4"><TextBlock Margin="15 0" VerticalAlignment="Center" Foreground="#b0b9c6"  IsHitTestVisible="False" Panel.ZIndex="1" Text="Search in Members ..." Visibility="{Binding ElementName=txtFilter,Path=Text.IsEmpty,Converter={StaticResource BoolToVis}}"/><TextBox x:Name="txtFilter" Style="{StaticResource textBoxFilter}"/><materialDesign:PackIcon Kind="Magnify" Width="15" Height="15" VerticalAlignment="Center" Margin="0 0 15 0" Foreground="#b0b9c6" HorizontalAlignment="Right"/></Grid><CheckBox Style="{DynamicResource CheckBoxStyle1}" Grid.Row="6" Content="asdasd"/><DataGrid x:Name="membersDataGrid" Style="{DynamicResource DataGridStyle1}" CellStyle="{DynamicResource DataGridCellStyle1}"  ColumnHeaderStyle="{DynamicResource DataGridColumnHeaderStyle1}" RowStyle="{DynamicResource DataGridRowStyle1}" Grid.Row="5"><DataGrid.Columns><DataGridCheckBoxColumn CanUserReorder="False" Width="Auto" ElementStyle="{StaticResource CheckBoxStyle1}"><DataGridCheckBoxColumn.HeaderTemplate><DataTemplate><CheckBox Style="{StaticResource CheckBoxStyle1}"/></DataTemplate></DataGridCheckBoxColumn.HeaderTemplate></DataGridCheckBoxColumn><DataGridTextColumn Binding="{Binding Number}" Header="#"  IsReadOnly="True" CanUserResize="False" Width="Auto"/><DataGridTemplateColumn Header="Member" IsReadOnly="True" Width="*"><DataGridTemplateColumn.CellTemplate><DataTemplate><StackPanel Orientation="Horizontal"><Border Background="{Binding BgColor}" Width="25" Height="25" CornerRadius="50"  Margin="0 0 10 0"><TextBlock Text="{Binding Character}" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="White" Margin="0 0 0 1" /></Border><TextBlock Text="{Binding Name}" VerticalAlignment="Center"/></StackPanel></DataTemplate></DataGridTemplateColumn.CellTemplate></DataGridTemplateColumn><DataGridTextColumn Header="Position" IsReadOnly="True" Width="*" Binding="{Binding Position}"/><DataGridTextColumn Header="Email Address" IsReadOnly="True" Width="*" Binding="{Binding Email}"/><DataGridTextColumn Header="Phone Number" IsReadOnly="True" Width="*" Binding="{Binding Phone}"/><DataGridTemplateColumn Header="Operations" IsReadOnly="True" Width="Auto"><DataGridTemplateColumn.CellTemplate><DataTemplate><StackPanel Orientation="Horizontal"><Button Style="{StaticResource gridEditButton}"><materialDesign:PackIcon Kind="PencilOutline" Style="{StaticResource gridButtonIcon}"/></Button><Button Style="{StaticResource gridRemoveButton}" Margin="5 0 0 0"><materialDesign:PackIcon Kind="DeleteOutline" Style="{StaticResource gridButtonIcon}"/></Button></StackPanel></DataTemplate></DataGridTemplateColumn.CellTemplate></DataGridTemplateColumn></DataGrid.Columns></DataGrid><Border Grid.Row="6" HorizontalAlignment="Right" BorderBrush="#dee4ec" BorderThickness="1" CornerRadius="5" Padding="5" Background="White" Margin="0 10 10 10"><StackPanel Orientation="Horizontal"><Button Style="{StaticResource pagingButton}"><materialDesign:PackIcon Kind="ChevronLeft" Style="{StaticResource pagingButtonIcon}"/></Button><Rectangle Width="1" Fill="#dee4ec" Margin="3 7"/><Button Style="{StaticResource pagingButton}" Content="1"/><Button Style="{StaticResource pagingButton}" Content="2" Background="#7950f2" Foreground="#ffffff"/><Button Style="{StaticResource pagingButton}" Content="3"/><TextBlock Text="..." Foreground="#6c7682" VerticalAlignment="Center" FontSize="15" Margin="10 0"/><Button Style="{StaticResource pagingButton}" Content="7"/><Button Style="{StaticResource pagingButton}" Content="8" Background="#7950f2" Foreground="#ffffff"/><Button Style="{StaticResource pagingButton}" Content="9"/><Rectangle Width="1" Fill="#dee4ec" Margin="3 7"/><Button Style="{StaticResource pagingButton}"><materialDesign:PackIcon Kind="ChevronRight" Style="{StaticResource pagingButtonIcon}"/></Button></StackPanel></Border></Grid></Grid></Border>
</Window>

MainWindow.xaml.cs：

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;namespace WpfApp1
{/// <summary>/// Interaction logic for MainWindow.xaml/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();var converter=new BrushConverter();ObservableCollection<Member> members = new ObservableCollection<Member>();members.Add(new Member { Number = "1", Character = "Q", BgColor = (Brush)converter.ConvertFromString("#ff6551"), Name = "wetr", Position = "ert", Email = "123456@gmail.com", Phone = "1234567890" });members.Add(new Member { Number = "2", Character = "W", BgColor = (Brush)converter.ConvertFromString("#ff5c91"), Name = "ret", Position = "uytry", Email = "123456@gmail.com", Phone = "1234567890" });members.Add(new Member { Number = "3", Character = "E", BgColor = (Brush)converter.ConvertFromString("#d56fe5"), Name = "tyr", Position = "ytu", Email = "123456@gmail.com", Phone = "1234567890" });members.Add(new Member { Number = "4", Character = "R", BgColor = (Brush)converter.ConvertFromString("#ad82f2"), Name = "uyi", Position = "uyti", Email = "123456@gmail.com", Phone = "1234567890" });members.Add(new Member { Number = "5", Character = "T", BgColor = (Brush)converter.ConvertFromString("#8590e9"), Name = "iio", Position = "ui", Email = "123456@gmail.com", Phone = "1234567890" });members.Add(new Member { Number = "6", Character = "Y", BgColor = (Brush)converter.ConvertFromString("#42a5f5"), Name = "uyoi", Position = "jhk", Email = "123456@gmail.com", Phone = "1234567890" });membersDataGrid.ItemsSource = members;}private void Border_MouseDown(object sender, MouseButtonEventArgs e){if(e.ChangedButton==MouseButton.Left){this.DragMove();}}private bool IsMAximized=false;private void Border_MouseLeftButtonDown(object sender, MouseButtonEventArgs e){if(e.ClickCount==2)//鼠标左键双击{if (IsMAximized){this.WindowState = WindowState.Normal;this.Width = 1080;this.Height = 720;IsMAximized = false;}else{this.WindowState=WindowState.Maximized;IsMAximized=true;}}}}public class Member{public string Character { get; set; }public string Number { get; set; }public string Name { get; set; }public string Position { get; set; }public string Email { get; set; }public string Phone { get; set; }public Brush BgColor { get; set; }}
}