WPF开发01-WPF界面设计

news/2025/1/23 14:50:40/文章来源:https://www.cnblogs.com/hezexi/p/18510293

1.设计一个优美的注册界面
- 1.实现效果
- 2.代码展示
2.简易登录按钮设计
- 1.实现效果
- 2.代码展示
3.设计一个优美的注册登录界面（连接数据库）
- 1.实现效果
- 2.代码展示
4.设计一个简单的在线教育系统界面
- 1.实现效果
- 2.代码展示
5. 设计一个Dashboard
- 1.实现效果
- 2.代码展示
6.设计一个旋转风扇
- 1.实现效果
- 2.代码展示
7.设计一个带有波浪效果的进度球
- 1.实现效果
- 2.代码展示
8.设计一个圆形进度条
- 1.简介
- 2. 实现效果
- 3.代码展示
9.原神官网角色展示
- 1.简介
- 2. 实现效果
- 3.代码展示
10设计一个带按钮的多级树形控件
- 1.简介
- 2.实现效果
- 3.代码展示
11.

个人比较喜欢研究WPF界面设计, 此篇博客聚集了自己写过的一些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.代码展示

工程目录：
数据库部署：
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.代码展示

在这里插入图片描述
图片：

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

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();}}
}

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>

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));}}

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

6.设计一个旋转风扇

1.实现效果

在这里插入图片描述

2.代码展示

在这里插入图片描述
MainWindow.xaml代码：

<Window x:Class="WpfApp2.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:WpfApp2"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><Window.Resources><Storyboard x:Key="FanAnimation" RepeatBehavior="Forever"><DoubleAnimation Storyboard.TargetName="FanRoate" Storyboard.TargetProperty="Angle" BeginTime="00:00:00" Duration="00:00:01" From="0" To="360"/></Storyboard></Window.Resources><Grid><Grid.RowDefinitions><RowDefinition/><RowDefinition Height="Auto"/></Grid.RowDefinitions><Image Grid.Row="0" Source="/Image/fan.png" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5"><Image.RenderTransform><RotateTransform x:Name="FanRoate"/></Image.RenderTransform></Image><StackPanel Orientation="Horizontal" Grid.Row="1" HorizontalAlignment="Center"><Button Content="打开" Height="60" Width="70" x:Name="btnOpen" Click="btnOpen_Click"/><Button Content="关闭" Height="60" Width="70" x:Name="btnClose" Margin="20 10 10 10" Click="btnClose_Click"/></StackPanel></Grid>
</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.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;namespace WpfApp2
{/// <summary>/// Interaction logic for MainWindow.xaml/// </summary>public partial class MainWindow : Window{Storyboard storyboard = null;public MainWindow(){InitializeComponent();storyboard = Resources["FanAnimation"] as Storyboard;//从View页面中定义的资源字典中拿到名为FanAnimation的资源}private void btnOpen_Click(object sender, RoutedEventArgs e){storyboard.Begin();}private void btnClose_Click(object sender, RoutedEventArgs e){storyboard.Stop();}}
}

7.设计一个带有波浪效果的进度球

1.实现效果

在这里插入图片描述

2.代码展示

在这里插入图片描述
MainWindow.xaml代码：

<Window x:Class="WpfApp2.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:WpfApp2" Topmost="True"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><Grid><Viewbox Width="200"><Grid Width="90" Height="110"><Grid.Clip><EllipseGeometry Center="45 55" RadiusX="45" RadiusY="55"/></Grid.Clip><Border Width="220" Opacity="0.5" Margin="-100" Height="220" RenderTransformOrigin="0.5 0.5" Background="#ab47bc" CornerRadius="90"><Border.RenderTransform><TransformGroup><RotateTransform Angle="0"/><TranslateTransform Y="160" x:Name="trans"/></TransformGroup></Border.RenderTransform><Border.Triggers><EventTrigger RoutedEvent="Loaded"><BeginStoryboard><Storyboard RepeatBehavior="Forever"><DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[0].Angle" To="359" Duration="0:0:5"/></Storyboard></BeginStoryboard></EventTrigger></Border.Triggers></Border><Ellipse Width="90" Height="110" Stroke="#7b1fa2" StrokeThickness="1"/><TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Opacity="0.5" Text="{Binding ElementName=slider01,Path=Value,StringFormat={}{0}%}"/></Grid></Viewbox><Slider x:Name="slider01" Maximum="100" Minimum="0" ValueChanged="slider01_ValueChanged" IsSnapToTickEnabled="True"/></Grid>
</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.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;namespace WpfApp2
{/// <summary>/// Interaction logic for MainWindow.xaml/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();}private void slider01_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e){this.trans.Y = 160 - e.NewValue;}}}

8.设计一个圆形进度条

1.简介

主要用StrokeDashArray来绘制图形。

思路：

用Rectangle来画2个圆环，一个浅色作为进度条的背景，一个深色作为进度条进度显示。

然后通过设置StrokeDashArray来调整进度的多少，并通过StrokeDashCap把进度条两端也弄成圆弧。但是值得注意的是，通过设置StrokeDashArray来调整进度的多少，设置的并不是1%的进度，而是圆弧长度，因此还需要其他方法来设置进度条进度。

通过TextBox中输入的值来手动设置进度值，并通过TextChanged事件来刷新进度条进度。

接下来主要就是计算百分比的问题：
StrokeDashArray的单位长度不是1，而是StrokeThickness，所以整个StrokeDashArray的长度是这个圆环的周长，但是要用StrokeThickness的值为单位。

2. 实现效果

在这里插入图片描述

3.代码展示

MainWindow.xaml代码：

<Windowx:Class="BlankApp1.Views.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:prism="http://prismlibrary.com/"Title="{Binding Title}"Width="525"Height="350"prism:ViewModelLocator.AutoWireViewModel="True"><Grid><Rectangle Width="100" Height="100" Stroke="LightGreen" StrokeThickness="20" RadiusX="50" RadiusY="50"/><Rectangle x:Name="progressBar" RenderTransformOrigin="0.5,0.5" Width="100" Height="100" Stroke="Purple" StrokeDashArray="1,100" StrokeDashCap="Round" StrokeThickness="20" RadiusX="50" RadiusY="50"><Rectangle.RenderTransform><RotateTransform Angle="90"/></Rectangle.RenderTransform></Rectangle><TextBox x:Name="txt" Background="Transparent" Width="50" Height="30" Text="0" TextAlignment="Center" FontSize="22" TextChanged="txt_TextChanged"/></Grid>
</Window>

MainWindow.xaml.cs代码：

using System;
using System.Windows;
using System.Windows.Media;namespace BlankApp1.Views
{/// <summary>/// Interaction logic for MainWindow.xaml/// </summary>public partial class MainWindow : Window{public MainWindow(){InitializeComponent();}private void txt_TextChanged(object sender, System.Windows.Controls.TextChangedEventArgs e){double pro = 0;try{pro = Convert.ToDouble(txt.Text);}catch(Exception ex){MessageBox.Show(ex.Message);}finally{CaluculateProgress(pro,progressBar.RadiusX,progressBar.StrokeThickness);}}void CaluculateProgress(double pro,double radius,double thickness){double r = radius - thickness / 2;///圆环半径，计算方法为：外弧半径-thickness的一半double perimeter = 2 * Math.PI * r / thickness;//圆弧长度，计算方法为：圆弧的周长除以单位长度double step = pro / 100*perimeter;//进度，计算方法为：圆弧的长度除以比例progressBar.StrokeDashArray = new DoubleCollection() { step, 100 };}}
}

9.原神官网角色展示

1.简介

转自：《原神》官网角色展示界面的WPF实现。觉得原作者的代码中有很多学习地方，故摘抄下来学习。

简介：

代码中有一些自定义动画、自定义按钮、自定义进度条以及json对象操作。

2. 实现效果

在这里插入图片描述

3.代码展示

文件结构：

MainWindow.xaml代码：

<Window x:Class="GenshinCharacterBrowser.Views.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:GenshinCharacterBrowser.Views" xmlns:i="http://schemas.microsoft.com/xaml/behaviors" xmlns:vm="clr-namespace:GenshinCharacterBrowser.ViewModels" xmlns:model="clr-namespace:GenshinCharacterBrowser.Models" xmlns:vc="clr-namespace:GenshinCharacterBrowser.Converters" Title="《原神》角色一览" Width="1280" Height="800" MinWidth="800" MinHeight="550" Background="#222" WindowStartupLocation="CenterScreen" mc:Ignorable="d"><Window.DataContext><vm:MainWindowViewModel /></Window.DataContext><Window.Resources><Storyboard x:Key="protraitIn"><DoubleAnimation Storyboard.TargetName="protraitPic" Storyboard.TargetProperty="RenderTransform.(TranslateTransform.X)" From="400" To="100" Duration="0:0:0.35"><DoubleAnimation.EasingFunction><CubicEase EasingMode="EaseInOut" /></DoubleAnimation.EasingFunction></DoubleAnimation><DoubleAnimation Storyboard.TargetName="protraitPic" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.35" /></Storyboard></Window.Resources><i:Interaction.Triggers><i:EventTrigger EventName="Loaded"><i:InvokeCommandAction Command="{Binding LoadCityCommand}" CommandParameter="150" /></i:EventTrigger></i:Interaction.Triggers><Grid><Grid.RowDefinitions><RowDefinition Height="*" /><RowDefinition Height="180" /></Grid.RowDefinitions><MediaElement Volume="0.7" IsMuted="{Binding ElementName=bgm, Path=IsChecked}"><MediaElement.Triggers><EventTrigger RoutedEvent="Loaded"><BeginStoryboard><Storyboard><MediaTimeline Source="https://ys.mihoyo.com/main/_nuxt/medias/video-bgm.532ef479.mp3" RepeatBehavior="Forever" /></Storyboard></BeginStoryboard></EventTrigger></MediaElement.Triggers></MediaElement><!-- 背景图片 --><Grid Grid.RowSpan="2" RenderTransformOrigin="0.5,0.5"><Grid.RenderTransform><ScaleTransform /></Grid.RenderTransform><Grid.Triggers><EventTrigger RoutedEvent="Loaded"><BeginStoryboard><Storyboard><DoubleAnimation RepeatBehavior="Forever" AutoReverse="True" Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)" From="1" To="1.3" Duration="0:0:30" /><DoubleAnimation RepeatBehavior="Forever" AutoReverse="True" Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)" From="1" To="1.3" Duration="0:0:30" /></Storyboard></BeginStoryboard></EventTrigger></Grid.Triggers><Image d:Source="https://webstatic.mihoyo.com/upload/contentweb/2022/08/15/ab72edd8acc105904aa50da90e4e788e_2299455865599609620.jpg" Source="{Binding DuskImage}" Stretch="UniformToFill" /><Image Grid.RowSpan="2" d:Source="https://webstatic.mihoyo.com/upload/contentweb/2022/08/15/04d542b08cdee91e5dabfa0e85b8995e_8653892990016707198.jpg" Source="{Binding DawnImage}" RenderTransformOrigin="0.5,0.5" Stretch="UniformToFill"><Image.Triggers><EventTrigger RoutedEvent="Loaded"><BeginStoryboard><Storyboard><DoubleAnimationUsingKeyFrames RepeatBehavior="Forever" AutoReverse="True" Storyboard.TargetProperty="Opacity" Duration="0:0:20"><LinearDoubleKeyFrame KeyTime="0:0:0" Value="1" /><LinearDoubleKeyFrame KeyTime="0:0:9" Value="1" /><LinearDoubleKeyFrame KeyTime="0:0:11" Value="0" /><LinearDoubleKeyFrame KeyTime="0:0:20" Value="0" /></DoubleAnimationUsingKeyFrames></Storyboard></BeginStoryboard></EventTrigger></Image.Triggers></Image></Grid><!-- 音量按钮 --><ToggleButton x:Name="bgm" Margin="20" HorizontalAlignment="Right" VerticalAlignment="Top" Panel.ZIndex="999" FocusVisualStyle="{x:Null}" Foreground="#9FFF" IsChecked="True" Cursor="Hand"><ToggleButton.Effect><BlurEffect Radius="1" /></ToggleButton.Effect><ToggleButton.Template><ControlTemplate TargetType="ToggleButton"><Grid><Ellipse Width="25" Height="25" Stroke="{TemplateBinding Foreground}" StrokeThickness="2" /><TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="&#xEC4F;" FontSize="16" FontWeight="SemiBold" FontFamily="Segoe MDL2 Assets" RenderTransformOrigin="0.5,0.5" Foreground="{TemplateBinding Foreground}"><TextBlock.RenderTransform><RotateTransform Angle="-15" /></TextBlock.RenderTransform></TextBlock><TextBlock x:Name="block" Margin="0,0,4,5" HorizontalAlignment="Right" VerticalAlignment="Bottom" Visibility="Hidden" Text="&#xF140;" FontWeight="SemiBold" FontSize="10" Foreground="LightCoral" FontFamily="Segoe MDL2 Assets" RenderTransformOrigin="0.5,0.5"><TextBlock.RenderTransform><ScaleTransform ScaleX="-1" /></TextBlock.RenderTransform></TextBlock></Grid><ControlTemplate.Triggers><Trigger Property="IsChecked" Value="True"><Setter TargetName="block" Property="Visibility" Value="Visible" /></Trigger></ControlTemplate.Triggers></ControlTemplate></ToggleButton.Template></ToggleButton><!-- 角色立绘 --><Image Name="protraitPic" Grid.RowSpan="2" d:Source="https://webstatic.mihoyo.com/upload/contentweb/2022/08/19/a15445b2b2e4443398eabf3b479f49e7_8073097535789989508.png" Source="{Binding SelectedItem.ProtraitUrl}" Stretch="UniformToFill"><Image.RenderTransform><TranslateTransform X="100" /></Image.RenderTransform></Image><!-- 角色名称和元素 --><Grid Margin="200,10,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"><Image Height="300" HorizontalAlignment="Left" d:Source="https://webstatic.mihoyo.com/upload/contentweb/2022/08/15/b131cb7706e97d71ecf3d4f2965b0ff1_7476946874531800864.png" Source="{Binding SelectedItem.ElementUrl}" Opacity="0.25" /><Image Height="120" Margin="50,0,0,0" HorizontalAlignment="Center" d:Source="https://webstatic.mihoyo.com/upload/contentweb/2022/08/15/4f3f7fc8cc5fce975bfff8d552e8e7b8_7543421952558259312.png" Source="{Binding SelectedItem.NameUrl}" /></Grid><!-- 角色台词 --><Image Height="200" Margin="200,0,0,-30" HorizontalAlignment="Left" VerticalAlignment="Bottom" d:Source="https://webstatic.mihoyo.com/upload/contentweb/2022/08/15/5ec15b13ccdf26bc05e6fdafdf57b0b2_3416441378250207025.png" Source="{Binding SelectedItem.DialogueUrl}" /><!-- 选择城市 --><StackPanel HorizontalAlignment="Left" VerticalAlignment="Center"><StackPanel.Resources><Style TargetType="RadioButton"><Setter Property="FontSize" Value="20" /><Setter Property="Foreground" Value="White" /><Setter Property="Margin" Value="0,2" /><Setter Property="VerticalContentAlignment" Value="Center" /><Setter Property="FocusVisualStyle" Value="{x:Null}" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="RadioButton"><Border Name="border" Width="250" Padding="20,18,0,18" Background="Transparent"><StackPanel Orientation="Horizontal"><Grid RenderTransformOrigin="0.5,0.5"><Grid.RenderTransform><RotateTransform Angle="45" /></Grid.RenderTransform><Grid.Effect><DropShadowEffect BlurRadius="5" ShadowDepth="0" Color="White" /></Grid.Effect><Rectangle Name="uncheckIcon" Width="6" Height="6" HorizontalAlignment="Center" VerticalAlignment="Center" Fill="{TemplateBinding Foreground}" /><Grid Name="checkIcon" Visibility="Hidden"><Rectangle Width="16" Height="16" HorizontalAlignment="Center" VerticalAlignment="Center" Stroke="{TemplateBinding Foreground}" StrokeThickness="2" /><Path HorizontalAlignment="Center" VerticalAlignment="Center" Data="M0,0 9,0 9,9" Fill="{TemplateBinding Foreground}" /></Grid></Grid><ContentPresenter Name="content" Margin="15,0,0,0" /></StackPanel></Border><ControlTemplate.Triggers><Trigger Property="IsChecked" Value="True"><Setter TargetName="checkIcon" Property="Visibility" Value="Visible" /><Setter TargetName="uncheckIcon" Property="Visibility" Value="Hidden" /><Setter TargetName="content" Property="Margin" Value="25,0,0,0" /><Setter TargetName="border" Property="Background"><Setter.Value><LinearGradientBrush StartPoint="0,0" EndPoint="1,0"><GradientStop Color="#9000" /><GradientStop Offset="1" Color="#0000" /></LinearGradientBrush></Setter.Value></Setter></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></StackPanel.Resources><RadioButton Content="蒙德城" IsChecked="True" Command="{Binding LoadCityCommand}" CommandParameter="150" /><RadioButton Content="璃月港" Command="{Binding LoadCityCommand}" CommandParameter="151" /><RadioButton Content="稻妻城" Command="{Binding LoadCityCommand}" CommandParameter="324" /><RadioButton Content="须弥城" Command="{Binding LoadCityCommand}" CommandParameter="350" /><RadioButton Content="敬请期待" IsEnabled="False" /></StackPanel><!-- 角色列表 --><ListBox x:Name="charListBox" Grid.Row="1" Margin="-1" Padding="5,5,5,2" d:ItemsSource="{x:Null}" d:SelectedIndex="0" SelectedItem="{Binding SelectedItem}" BorderThickness="0" ScrollViewer.CanContentScroll="False" FocusVisualStyle="{x:Null}" Background="#33f0f8ff" ItemsSource="{Binding CharList}" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Visible"><ListBox.Resources><Style TargetType="ScrollBar"><Setter Property="Margin" Value="18,0,18,8" /><Setter Property="Height" Value="Auto" /><Setter Property="Stylus.IsPressAndHoldEnabled" Value="false" /><Setter Property="Stylus.IsFlicksEnabled" Value="false" /><Setter Property="Foreground" Value="#7000" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type ScrollBar}"><Grid SnapsToDevicePixels="true"><Track x:Name="PART_Track" Grid.Column="1" IsEnabled="{TemplateBinding IsMouseOver}"><Track.Thumb><Thumb><Thumb.Style><Style TargetType="{x:Type Thumb}"><Setter Property="OverridesDefaultStyle" Value="true" /><Setter Property="IsTabStop" Value="false" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Thumb}"><Rectangle Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Fill="{TemplateBinding Foreground}" RadiusX="10" RadiusY="10" SnapsToDevicePixels="True" /><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="true"><Setter Property="Foreground" Value="#9000" /></Trigger><Trigger Property="IsDragging" Value="true"><Setter Property="Foreground" Value="#9000" /></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></Thumb.Style></Thumb></Track.Thumb></Track></Grid></ControlTemplate></Setter.Value></Setter></Style></ListBox.Resources><i:Interaction.Triggers><i:EventTrigger EventName="SelectionChanged"><i:ControlStoryboardAction ControlStoryboardOption="Play" Storyboard="{StaticResource protraitIn}" /></i:EventTrigger></i:Interaction.Triggers><ListBox.ItemsPanel><ItemsPanelTemplate><StackPanel Orientation="Horizontal" /></ItemsPanelTemplate></ListBox.ItemsPanel><ListBox.ItemTemplate><DataTemplate><Border Name="border" Margin="15,8" Background="Transparent" CornerRadius="5"><StackPanel Margin="2,2,2,1"><Border Name="iconBorder" Background="#5000" CornerRadius="4,4,0,0"><Grid><Image Width="106" Source="{Binding IconUrl}" Stretch="Uniform"><Image.OpacityMask><VisualBrush><VisualBrush.Visual><Border Width="{Binding RelativeSource={RelativeSource AncestorType=Image}, Path=ActualWidth}" Height="{Binding RelativeSource={RelativeSource AncestorType=Image}, Path=ActualHeight}" CornerRadius="4,4,0,0" Background="White" /></VisualBrush.Visual></VisualBrush></Image.OpacityMask></Image></Grid></Border><Border Name="nameBorder" Padding="0,1" Background="#d000" CornerRadius="0,0,4,4"><TextBlock Name="nameText" HorizontalAlignment="Center" Foreground="White" Text="{Binding Name}" FontSize="16" /></Border></StackPanel></Border><DataTemplate.Triggers><DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem}, Path=IsSelected}" Value="True"><Setter TargetName="border" Property="Background" Value="White" /><Setter TargetName="nameBorder" Property="Background" Value="Transparent" /><Setter TargetName="nameText" Property="Foreground" Value="Black" /><Setter TargetName="iconBorder" Property="Background"><Setter.Value><LinearGradientBrush StartPoint="0,0" EndPoint="1,1"><GradientStop Color="#111" /><GradientStop Offset="1" Color="#7000" /></LinearGradientBrush></Setter.Value></Setter></DataTrigger><Trigger Property="FrameworkElement.IsMouseOver" Value="True"><Setter TargetName="border" Property="Background" Value="White" /><Setter TargetName="nameBorder" Property="Background" Value="Transparent" /><Setter TargetName="nameText" Property="Foreground" Value="Black" /><Setter TargetName="iconBorder" Property="Background"><Setter.Value><LinearGradientBrush StartPoint="0,0" EndPoint="1,1"><GradientStop Color="#111" /><GradientStop Offset="1" Color="#7000" /></LinearGradientBrush></Setter.Value></Setter></Trigger></DataTemplate.Triggers></DataTemplate></ListBox.ItemTemplate><ListBox.ItemContainerStyle><Style TargetType="ListBoxItem"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="ListBoxItem"><ContentPresenter /></ControlTemplate></Setter.Value></Setter></Style></ListBox.ItemContainerStyle><d:ListBox.Items><model:Character Name="提纳里" IconUrl="https://webstatic.mihoyo.com/upload/contentweb/2022/08/15/1f88bdae2e99307e68a0bbfedf6cc74f_2882938237707913291.png" /><model:Character Name="柯莱" IconUrl="https://webstatic.mihoyo.com/upload/contentweb/2022/08/15/3677cbc063b7ab3887ceb7f9a77287ac_1039229097287658400.png" /><model:Character Name="多莉" IconUrl="https://webstatic.mihoyo.com/upload/contentweb/2022/08/29/b8a367991017a9f3c6bb445c5c8b68e6_1191967378101363412.png" /></d:ListBox.Items></ListBox><!-- 404 界面 --><local:ConnectionFailed Grid.RowSpan="2" Panel.ZIndex="999" Visibility="{Binding ConnectionFailed, Converter={vc:BoolToVisibilityConverter UseHidden=True}}" /></Grid>
</Window>

ConnectionFailed.xaml代码：

<UserControl x:Class="GenshinCharacterBrowser.Views.ConnectionFailed" 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:GenshinCharacterBrowser" xmlns:vm="clr-namespace:GenshinCharacterBrowser.ViewModels" d:DesignHeight="720" d:DesignWidth="1280" d:DataContext="{d:DesignInstance vm:MainWindowViewModel}" Background="#393b40" mc:Ignorable="d"><UserControl.Resources><Style TargetType="TextBlock"><Setter Property="HorizontalAlignment" Value="Center" /></Style></UserControl.Resources><Grid><Rectangle Margin="10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="#595b5f" RadiusX="20" RadiusY="20" StrokeThickness="4" /><Rectangle Margin="20" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stroke="#4c4e53" RadiusX="14" RadiusY="14" StrokeThickness="2" /><StackPanel Width="360" VerticalAlignment="Center"><Image Source="/Assets/404.png" /><TextBlock Margin="0,28" Text="无法访问《原神》官网" Foreground="White" FontSize="32" /><TextBlock TextAlignment="Center" Foreground="#757b87" FontSize="16" LineHeight="24"><Run>可能跟温迪一起出游了吧</Run><LineBreak /><Run>可能跟钟离一起尘世仙游了也说不定？</Run><LineBreak /><Run>可能跟雷电将军一起进一心净土了也没准……</Run></TextBlock><Image Width="30" Margin="28" Source="/Assets/star.png" /><Button Content="尝试重连 »" Command="{Binding RetryClickCommand}"><Button.Style><Style TargetType="Button"><Setter Property="HorizontalAlignment" Value="Center" /><Setter Property="Foreground" Value="#d7d8d9" /><Setter Property="BorderThickness" Value="0" /><Setter Property="FontSize" Value="20" /><Setter Property="Cursor" Value="Hand" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="Button"><ContentPresenter /></ControlTemplate></Setter.Value></Setter><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Foreground" Value="White" /></Trigger></Style.Triggers></Style></Button.Style></Button></StackPanel></Grid>
</UserControl>

MainWindowViewModel.cs代码：

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using GenshinCharacterBrowser.Helpers;
using GenshinCharacterBrowser.Models;
using Newtonsoft.Json.Linq;
using System;
using System.Collections.ObjectModel;
using System.Net.Http;
using System.Threading.Tasks;
using System.Windows.Media.Imaging;namespace GenshinCharacterBrowser.ViewModels;public partial class MainWindowViewModel : ObservableObject
{[ObservableProperty]ObservableCollection<Character> charList = new();[ObservableProperty]Character selectedItem;[ObservableProperty]BitmapImage dawnImage;[ObservableProperty]BitmapImage duskImage;[ObservableProperty]bool connectionFailed;string lastVisitedCity = null;[RelayCommand]async Task LoadCity(string id){lastVisitedCity = id;try{var result = await HttpHelper.GetStringAsync($"https://content-static.mihoyo.com/content/ysCn/getContentList?pageSize=20&pageNum=1&order=asc&channelId={id}");var list = JObject.Parse(result)["data"]["list"];CharList.Clear();foreach (var item in list){CharList.Add(new(item));}SelectedItem = CharList[0];await ChangeBg(id);}catch (HttpRequestException){ConnectionFailed = true;return;}}async Task ChangeBg(string id){var dawnUrl = id switch{"150" => @"https://uploadstatic.mihoyo.com/contentweb/20200211/2020021114220951905.jpg","151" => @"https://uploadstatic.mihoyo.com/contentweb/20200515/2020051511073340128.jpg","324" => @"https://uploadstatic.mihoyo.com/contentweb/20210719/2021071917030766463.jpg","350" => @"https://webstatic.mihoyo.com/upload/contentweb/2022/08/15/04d542b08cdee91e5dabfa0e85b8995e_8653892990016707198.jpg",_ => throw new ArgumentException(id)};var duskUrl = id switch{"150" => @"https://uploadstatic.mihoyo.com/contentweb/20200211/2020021114221470532.jpg","151" => @"https://uploadstatic.mihoyo.com/contentweb/20200515/2020051511072867344.jpg","324" => @"https://uploadstatic.mihoyo.com/contentweb/20210719/2021071917033032133.jpg","350" => @"https://webstatic.mihoyo.com/upload/contentweb/2022/08/15/ab72edd8acc105904aa50da90e4e788e_2299455865599609620.jpg",_ => throw new ArgumentException(id)};var dawn = HttpHelper.GetImageAsync(dawnUrl);var dusk = HttpHelper.GetImageAsync(duskUrl);await Task.WhenAll(dawn, dusk);DawnImage = dawn.Result;DuskImage = dusk.Result;}[RelayCommand]async Task RetryClick(){ConnectionFailed = false;await LoadCity(lastVisitedCity);}
}

Character.cs代码：

using Newtonsoft.Json.Linq;
using System.Linq;namespace GenshinCharacterBrowser.Models;public class Character
{public string Name { get; init; }public string IconUrl { get; init; }public string ProtraitUrl { get; init; }public string NameUrl { get; set; }public string ElementUrl { get; set; }public string DialogueUrl { get; set; }public Character() { }public Character(JToken obj){Name = obj["title"].ToString();IconUrl = obj["ext"].First(v => v["arrtName"].ToString() == "角色-ICON")["value"][0]["url"].ToString();ProtraitUrl = obj["ext"].First(v => v["arrtName"].ToString() == "角色-PC端主图")["value"][0]["url"].ToString();NameUrl = obj["ext"].First(v => v["arrtName"].ToString() == "角色-名字")["value"][0]["url"].ToString();ElementUrl = obj["ext"].First(v => v["arrtName"].ToString() == "角色-属性")["value"][0]["url"].ToString();DialogueUrl = obj["ext"].First(v => v["arrtName"].ToString() == "角色-台词")["value"][0]["url"].ToString();}
}

HttpHelper.cs代码：

using System;
using System.IO;
using System.Net.Http;
using System.Threading.Tasks;
using System.Windows.Media.Imaging;namespace GenshinCharacterBrowser.Helpers;public static class HttpHelper
{private static HttpClient httpClient = new();/// <summary>/// Get an http response from sending request to a specific url/// </summary>/// <param name="url"></param>/// <param name="method">Http method being used (default: <see cref="HttpMethod.Get"/>)</param>/// <returns></returns>public static async Task<HttpResponseMessage> GetResponseAsync(string url, HttpMethod method = null){using var request = new HttpRequestMessage{RequestUri = new Uri(url),Method = method ?? HttpMethod.Get};var response = await httpClient.SendAsync(request);response.EnsureSuccessStatusCode();return response;}/// <summary>/// Get string content from a specific url/// </summary>/// <param name="url"></param>/// <returns></returns>public static async Task<string> GetStringAsync(string url){using var response = await GetResponseAsync(url);response.EnsureSuccessStatusCode();return await response.Content.ReadAsStringAsync();}/// <summary>/// Get a bitmap image from a specific url/// </summary>public static async Task<BitmapImage> GetImageAsync(string url){using var response = await GetResponseAsync(url);var data = await response.Content.ReadAsByteArrayAsync();using var stream = new MemoryStream(data);var image = new BitmapImage();image.BeginInit();image.CreateOptions = BitmapCreateOptions.PreservePixelFormat;image.CacheOption = BitmapCacheOption.OnLoad;image.UriSource = null;image.StreamSource = stream;image.EndInit();image.Freeze();return image;}
}

BoolToVisibilityConverter.cs代码：

using System;
using System.Globalization;
using System.Windows;namespace GenshinCharacterBrowser.Converters;public class BoolToVisibilityConverter : BaseValueConverter
{public bool IsReverse { get; set; }public bool UseHidden { get; set; }public override object Convert(object value, Type targetType, object parameter, CultureInfo culture){var res = System.Convert.ToBoolean(value);if (IsReverse) res = !res;if (res) return Visibility.Visible;else return UseHidden ? Visibility.Hidden : Visibility.Collapsed;}public override object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture){var vis = (Visibility)value;bool res = vis != Visibility.Visible;if (IsReverse) res = !res;return res;}
}

BaseValueConverter.cs代码：

using System;
using System.Globalization;
using System.Windows.Data;
using System.Windows.Markup;namespace GenshinCharacterBrowser.Converters;public abstract class BaseValueConverter : MarkupExtension, IValueConverter
{public abstract object Convert(object value, Type targetType, object parameter, CultureInfo culture);public abstract object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture);public override object ProvideValue(IServiceProvider serviceProvider){return this;}
}

图片：

在这里插入图片描述

10设计一个带按钮的多级树形控件

1.简介

参考链接：WPF 中 TreeListView 的使用。

2.实现效果

在这里插入图片描述

3.代码展示

View：

    <UserControl.Resources><!--Converter for Indentation of items--><convert:LevelToIndentConverter x:Key="LevelIndentConverter" /><Style x:Key="ExpandCollapseToggleStyle" TargetType="{x:Type ToggleButton}"><Setter Property="Width" Value="19" /><Setter Property="Height" Value="13" /><Setter Property="Focusable" Value="False" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type ToggleButton}"><Border Width="19" Height="13" Background="Transparent"><Border Width="9" Height="9" BorderThickness="1" BorderBrush="#FF7898B5" CornerRadius="1" SnapsToDevicePixels="true"><Border.Background><LinearGradientBrush StartPoint="0,0" EndPoint="1,1"><LinearGradientBrush.GradientStops><GradientStop Color="White" Offset=".2" /><GradientStop Color="#FFC0B7A6" Offset="1" /></LinearGradientBrush.GradientStops></LinearGradientBrush></Border.Background><Path x:Name="ExpandPath" Margin="1,1,1,1" Fill="Black" Data="M 0 2 L 0 3 L 2 3 L 2 5 L 3 5 L 3 3 L 5 3 L 5 2 L 3 2 L 3 0 L 2 0 L 2 2 Z" /></Border></Border><ControlTemplate.Triggers><Trigger Property="IsChecked" Value="True"><Setter Property="Data" TargetName="ExpandPath" Value="M 0 2 L 0 3 L 5 3 L 5 2 Z" /></Trigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><DataTemplate x:Key="CellTemplate_Name"><DockPanel><ToggleButton x:Name="Expander" Style="{StaticResource ExpandCollapseToggleStyle}" Margin="{Binding Path=Level,Converter={StaticResource LevelIndentConverter},RelativeSource={RelativeSource AncestorType={x:Type local:TreeListViewItem}}}" IsChecked="{Binding Path=IsExpanded,RelativeSource={RelativeSource AncestorType={x:Type local:TreeListViewItem}}}" ClickMode="Press" /><!--首列绑定值--><TextBlock Text="{Binding Name}" /></DockPanel><DataTemplate.Triggers><DataTrigger Binding="{Binding Path=HasItems,RelativeSource={RelativeSource AncestorType={x:Type local:TreeListViewItem}}}" Value="False"><Setter TargetName="Expander" Property="Visibility" Value="Hidden" /></DataTrigger></DataTemplate.Triggers></DataTemplate><ImageBrush x:Key="gvHeaderBackground" ImageSource="/SFFrameWork.Control.UI;component/Recipe/Assests/list_header_bk.png" /><Style x:Key="gvColumnHeaderStyle" TargetType="{x:Type GridViewColumnHeader}"><Style.Setters><Setter Property="Height" Value="0" /><Setter Property="Background" Value="{StaticResource gvHeaderBackground}" /></Style.Setters></Style><GridViewColumnCollection x:Key="gvColumns"><GridViewColumn Header="名称" CellTemplate="{StaticResource CellTemplate_Name}" Width="130" /><!--<GridViewColumn Header="年龄" DisplayMemberBinding="{Binding Age}" Width="80" /><GridViewColumn Header="性别" DisplayMemberBinding="{Binding Sex}" Width="80" /><GridViewColumn Header="职务" DisplayMemberBinding="{Binding Duty}" Width="100" />--></GridViewColumnCollection><GridViewColumnCollection x:Key="gvColumns02"><GridViewColumn><GridViewColumn.CellTemplate><DataTemplate><StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center"><Button Content="打开" Command="{Binding OpenRecipeCmd}" Width="80"/></StackPanel></DataTemplate></GridViewColumn.CellTemplate></GridViewColumn><GridViewColumn><GridViewColumn.CellTemplate><DataTemplate><StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center"><Button Content="应用" Command="{Binding ApplyRecipeCmd}" /></StackPanel></DataTemplate></GridViewColumn.CellTemplate></GridViewColumn><GridViewColumn><GridViewColumn.CellTemplate><DataTemplate><StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center"><Button Content="保存" Command="{Binding SaveRecipeCmd}"/></StackPanel></DataTemplate></GridViewColumn.CellTemplate></GridViewColumn><GridViewColumn><GridViewColumn.CellTemplate><DataTemplate><StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center"><Button Content="删除" Command="{Binding DelRecipeCmd}" /></StackPanel></DataTemplate></GridViewColumn.CellTemplate></GridViewColumn></GridViewColumnCollection><!--交替行样式--><AlternationConverter x:Key="conBack"><SolidColorBrush>#FFE9E9E9</SolidColorBrush><SolidColorBrush>#FFE9E9E9</SolidColorBrush></AlternationConverter><Style TargetType="{x:Type local:TreeListViewItem}"><Setter Property="FontSize" Value="13" /><Setter Property="Background" Value="Transparent" /><Setter Property="SnapsToDevicePixels" Value="True" /><Setter Property="HorizontalContentAlignment" Value="Stretch" /><Setter Property="VerticalContentAlignment" Value="Center" /><Setter Property="IsSelected" Value="{Binding IsSelected}" /><Setter Property="IsExpanded" Value="{Binding IsExpanded}" /><Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Self},Path=(local:TreeListView.AlternationIndex),Converter={StaticResource conBack}}" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type local:TreeListViewItem}"><StackPanel><Border x:Name="outerBorder" BorderThickness="0,0,0,1" BorderBrush="#FFFFFFFD" Margin="0" Padding="0" Height="30" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="True"><Border x:Name="innerBorder" BorderThickness="0,0,0,1" BorderBrush="#FFC6C6C6" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="True"><StackPanel Orientation="Horizontal"><GridViewRowPresenter x:Name="PART_Header" Content="{TemplateBinding Header}" Columns="{StaticResource gvColumns}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /><GridViewRowPresenter x:Name="PART_Header02" Visibility="Collapsed" Content="{TemplateBinding Header}" Columns="{StaticResource gvColumns02}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /></StackPanel></Border></Border><ItemsPresenter x:Name="ItemsHost" /></StackPanel><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="true" SourceName="innerBorder"><Setter Property="Foreground" Value="White" /><Setter Property="Background" Value="#3393DF" TargetName="innerBorder" /></Trigger><Trigger Property="IsSelected" Value="true"><Setter Property="Foreground" Value="White" /><Setter Property="Background" Value="#3393DF" TargetName="innerBorder" /><Setter Property="Visibility" Value="Visible" TargetName="PART_Header02" /></Trigger><Trigger Property="IsExpanded" Value="false"><Setter TargetName="ItemsHost" Property="Visibility" Value="Collapsed" /></Trigger><Trigger Property="IsEnabled" Value="false"><Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" /></Trigger><MultiTrigger><MultiTrigger.Conditions><Condition Property="IsSelected" Value="true" /><Condition Property="IsSelectionActive" Value="false" /></MultiTrigger.Conditions><Setter TargetName="innerBorder" Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" /><Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" /></MultiTrigger><MultiTrigger><MultiTrigger.Conditions><Condition Property="HasHeader" Value="false" /><Condition Property="Width" Value="Auto" /></MultiTrigger.Conditions><Setter TargetName="PART_Header" Property="MinWidth" Value="75" /><Setter TargetName="PART_Header02" Property="MinWidth" Value="75" /></MultiTrigger><MultiTrigger><MultiTrigger.Conditions><Condition Property="HasHeader" Value="false" /><Condition Property="Height" Value="Auto" /></MultiTrigger.Conditions><Setter TargetName="PART_Header" Property="MinHeight" Value="19" /><Setter TargetName="PART_Header02" Property="MinHeight" Value="19" /></MultiTrigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style><Style TargetType="{x:Type local:TreeListView}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type local:TreeListView}"><!--Create a standard border around the 'TreeListView'.--><Border Padding="{TemplateBinding Padding}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"><!--ScrollViewer providing horizontal scrolling functionality for both, content and headers.--><ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled"><DockPanel><!--The header row.--><GridViewHeaderRowPresenter DockPanel.Dock="Top" ColumnHeaderContainerStyle="{StaticResource gvColumnHeaderStyle}" Columns="{StaticResource gvColumns}" /><!--ScrollViewer providing vertical scrollingfunctionality for the content.--><ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto"><!--ItemsPresenter containg the content.--><ItemsPresenter /></ScrollViewer></DockPanel></ScrollViewer></Border></ControlTemplate></Setter.Value></Setter></Style></UserControl.Resources><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="500"/><ColumnDefinition/></Grid.ColumnDefinitions><local:TreeListView x:Name="treeListView" Grid.Column="0" Background="#FFE9E9E9" BorderBrush="#FF96DFFF" AlternationCount="2" ItemsSource="{Binding StaffList}"><local:TreeListView.ItemTemplate><HierarchicalDataTemplate ItemsSource="{Binding StaffList}" /></local:TreeListView.ItemTemplate></local:TreeListView><TabControl Grid.Column="1" Margin="5,0,0,0" TabStripPlacement="Top" ItemsSource="{Binding RecipeItemList}" SelectedItem="{Binding SelectedItem}" IsEnabled="{Binding IsItemOpen}"><!--<TabControl.ItemContainerStyle><Style TargetType="TabItem" BasedOn="{StaticResource TabItemHorizontalStyle}"><Setter Property="Visibility" Value="{Binding IsHidden, Converter={StaticResource bInvertVisible}}" /></Style></TabControl.ItemContainerStyle><TabControl.ItemTemplate><DataTemplate><TextBlock Text="{Binding Header}" FontSize="12" /></DataTemplate></TabControl.ItemTemplate><TabControl.ContentTemplate><DataTemplate><ContentControl Content="{Binding TabModel}" /></DataTemplate></TabControl.ContentTemplate>--></TabControl></Grid>
</UserControl>

ViewModel:

	public class Staff : ViewModelBase{private string _Name;private int _Age;private string _Sex;private string _Duty;private bool _IsSelected;private bool _IsExpanded;private ObservableCollection<Staff> _StaffList = new ObservableCollection<Staff>();public ObservableCollection<Staff> StaffList{get { return _StaffList; }set{_StaffList = value;OnPropertyChanged();}}/// <summary>/// 姓名/// </summary>public string Name{get { return _Name; }set{_Name = value;OnPropertyChanged();}}/// <summary>/// 年龄/// </summary>public int Age{get { return _Age; }set{_Age = value;OnPropertyChanged();}}/// <summary>/// 性别/// </summary>public string Sex{get { return _Sex; }set{_Sex = value;OnPropertyChanged();}}/// <summary>/// 职务/// </summary>public string Duty{get { return _Duty; }set{_Duty = value;OnPropertyChanged();}}/// <summary>/// 是否选中/// </summary>public bool IsSelected{get { return _IsSelected; }set{_IsSelected = value;OnPropertyChanged();}}/// <summary>/// 是否展开/// </summary>public bool IsExpanded{get { return _IsExpanded; }set{_IsExpanded = value;OnPropertyChanged();}}public Staff(){IsSelected = false;IsExpanded = false;}}public class RecipeMainViewModel:ViewModelBase{private ObservableCollection<Staff> _StaffList = new ObservableCollection<Staff>();public ObservableCollection<Staff> StaffList{get { return _StaffList; }set{_StaffList = value;OnPropertyChanged();}}public RecipeMainViewModel(){Staff staff = new Staff(){Name = "配方",Age = 30,Sex = "男",Duty = "经理",IsExpanded = true};Staff staff2 = new Staff(){Name = "配方1",Age = 21,Sex = "男",Duty = "员工",IsExpanded = true};Staff staff3 = new Staff(){Name = "配方11",Age = 21,Sex = "男",Duty = "员工"};Staff staff31 = new Staff(){Name = "配方111",Age = 21,Sex = "男",Duty = "员工"};staff3.StaffList.Add(staff31);staff2.StaffList.Add(staff3);staff3 = new Staff(){Name = "配方22",Age = 21,Sex = "女",Duty = "员工"};staff2.StaffList.Add(staff3);staff.StaffList.Add(staff2);staff2 = new Staff(){Name = "配方2",Age = 22,Sex = "女",Duty = "员工"};staff.StaffList.Add(staff2);staff2 = new Staff(){Name = "配方3",Age = 23,Sex = "女",Duty = "员工"};staff.StaffList.Add(staff2);StaffList.Add(staff);staff = new Staff(){Name = "配方2",Age = 31,Sex = "男",Duty = "副经理"};staff2 = new Staff(){Name = "李四1",Age = 24,Sex = "女",Duty = "员工"};staff.StaffList.Add(staff2);staff2 = new Staff(){Name = "李四2",Age = 25,Sex = "女",Duty = "员工"};staff.StaffList.Add(staff2);staff2 = new Staff(){Name = "李四3",Age = 26,Sex = "男",Duty = "员工"};staff.StaffList.Add(staff2);StaffList.Add(staff);staff = new Staff(){Name = "王五",Age = 32,Sex = "女",Duty = "组长"};staff2 = new Staff(){Name = "王五1",Age = 27,Sex = "女",Duty = "员工"};staff.StaffList.Add(staff2);staff2 = new Staff(){Name = "王五2",Age = 28,Sex = "女",Duty = "员工"};staff.StaffList.Add(staff2);StaffList.Add(staff);}}

Converter:

	/// <summary>/// Convert Level to left margin/// Pass a prarameter if you want a unit length other than 19.0./// </summary>public class LevelToIndentConverter : IValueConverter{public object Convert(object o, Type type, object parameter,CultureInfo culture){return new Thickness((int)o * c_IndentSize, 0, 0, 0);}public object ConvertBack(object o, Type type, object parameter,CultureInfo culture){throw new NotSupportedException();}private const double c_IndentSize = 19.0;}

11.

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/823167.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

Web渗透文件上传有哪些漏洞

Web渗透文件上传有以下漏洞：一、绕过文件类型检查漏洞；二、文件名解析漏洞；三、目录穿越漏洞；四、二进制文件漏洞；五、文件上传时的身份验证和授权问题；等等。绕过文件类型检查漏洞会导致应用程序将恶意文件误认为合法文件，从而允许攻击者执行恶意操作。一、绕过文件类型…

上位机开发02-工控知识学习

@目录1.电机减速机、扭矩2.运动控制相关1.运动控制简介2.伺服电机、步进电机1.伺服电机2.步进电机3.总结3.点位运动、连续运动、直线和圆弧插补运动4.软限位和正限位5.脉冲当量、脉冲数、脉冲频率6.回零：光电开关和编码器信号7.前瞻4.运动控制卡1.简介2.运动控制卡和PLC的区别…

点击查看代码 import numpy as np from scipy.optimize import minimize def objective(x):x1, x2, x3 = xreturn -(2 * x1 + 3 * x1 ** 2 + 3 * x2 + x2 ** 2 + x3) # 定义约束条件 def constraint1(x):x1, x2 = x[:2] # 只取前两个变量x1和x2return 10 - (x1 + 2 * x1 ** 2 …

2.12

代码点击查看代码 import numpy as np from sympy import Matrix, symbols# 定义一个矩阵 A = np.array([[-1,1,0],[-4,3,0],[1,0,2]])# 使用numpy.linalg.eig求解特征值和特征向量 eigenvalues, eigenvectors = np.linalg.eig(A)print("数值解的特征值：", eigenval…

如何处理Linux系统中频繁出现的系统启动失败问题

面对Linux系统的启动失败问题，执行以下措施：1.分析日志信息，找出原因；2.检查磁盘空间与文件系统；3.验证系统引导文件；4.修复GRUB引导加载器；5.使用恢复模式进行修复。系统启动故障的根本原因往往隐藏在一些细节中，因此关键在于仔细检查并持续修复。1.分析日志信息，找…

webpack打包js代码(ES6-ES5)和vue文件

为什么需要babel？Babel命令行使用Babel插件的使用Babel的预设presetbabel-loaderbabel-preset编写App.vue代码App.vue的打包过程@vue/compiler-sfcresolve模块解析确实文件还是文件夹extensions和alias配置

大华设备视频平台EasyCVR私有化视频平台云端录像、监控存储、回看、计划与配置功能全解析

EasyCVR是TSINGSEE青犀视频在音视频流媒体技术和人工智能领域的深入研发成果，它以出色的视频处理、汇聚和融合能力，在构建视频监控系统方面表现出独特的优势。大华设备视频平台EasyCVR能够接入高清网络摄像机的RTSP直播流，并且支持多种其他直播流格式，例如RTMP、HTTP-FLV、…

C语言和Groovy在JVM兼容性上的区别

## C语言和Groovy在JVM兼容性上的区别在探讨C语言和Groovy在JVM（Java虚拟机）兼容性上的差异时，核心观点可以概括为：C语言不直接兼容JVM、Groovy与JVM高度兼容。C语言是一种通用的、过程式的编程语言，它直接编译为机器语言，执行效率高，但它并不直接兼容JVM，这是因为JVM…