WPF界面设计

个人比较喜欢研究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">
    <Grid>
        
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="350"/>
            <ColumnDefinition Width="1*"/>
        Grid.ColumnDefinitions>
        
        
        <Border Grid.Column="0" Background="#ffd500" Padding="30" CornerRadius="25 0 0 25"> 
            <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"/>
                <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"/>
                <Button Style="{StaticResource buttonBlack}">
                    <fa:ImageAwesome Icon="AngleRight" Width="25" Height="25" Foreground="#ffd500" Margin="3 0 0 0"/>
                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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

MainWindow.xaml.cs代码：


using System.Windows;
using System.Windows.Input;

namespace RegisterPage
{
    /// 
    /// MainWindow.xaml 的交互逻辑
    /// 
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Border_MouseDown(object sender, MouseButtonEventArgs e)
        {
            if (e.ChangedButton == MouseButton.Left)//如果按下了鼠标左键
            {
                this.DragMove();//允许拖动该窗口
            }
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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>

        

        
        <Style x:Key="buttonBlack" TargetType="Button">
            "Background" Value="#363636"/>
            "BorderThickness" Value="2"/>
            "Width" Value="60"/>
            "Height" Value="60"/>
            "Margin" Value="0 20 0 0"/>
            "Template">
                
                
                    "Button">
                        "{TemplateBinding Background}" CornerRadius="50" Padding="5">
                            
                        
                    
                
            
            
                "IsMouseOver" Value="True">
                    "Background" Value="#000000"/>
                
            
        Style>

        <Style x:Key="iconApp" TargetType="Button">
            <Setter Property="VerticalAlignment" Value="Top"/>
            <Setter Property="HorizontalAlignment" Value="Right"/>
            <Style.Triggers>
                "IsMouseOver" Value="True">
                    "RenderTransform">
                        
                            "1.2" ScaleY="1.2"/>
                        
                    
                
            
        Style>

        <Style x:Key="text" TargetType="TextBlock">
            "Foreground" Value="#363636"/>
            "FontWeight" Value="SemiBold"/>
            "FontSize" Value="16"/>
            "VerticalAlignment" Value="Center"/>
        Style>

        <Style TargetType="TextBox">
            "Background" Value="#f5f7f9"/>
            "Foreground" Value="#767676"/>
            "BorderThickness" Value="1"/>
            "BorderBrush" Value="#f5f7f9"/>
            "FontSize" Value="12"/>
            "Padding" Value="10"/>
            "Margin" Value="0 10"/>
            "VerticalAlignment" Value="Center"/>
            "Template">
                
                    "{x:Type TextBoxBase}"> 
                        x:Name="border" CornerRadius="3" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" SnapsToDevicePixels="True">
                            x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
                        
                        
                            "IsMouseOver" Value="True">
                                "BorderBrush" Value="#d9d9d9" TargetName="border"/>
                            
                            "IsKeyboardFocused" Value="True">
                                "BorderBrush" Value="#d9d9d9" TargetName="border"/>
                            
                        
                    
                
            
        Style>

        <Style x:Key="button" TargetType="Button">
            "Background" Value="#c6c6c6"/>
            "BorderThickness" Value="0"/>
            "Width" Value="40"/>
            "Height" Value="40"/>
            "Template">
                
                    "Button">
                        "{TemplateBinding Background}" CornerRadius="50" Padding="5">
                            "Center" VerticalAlignment="Center"/>
                        
                    
                
            
            
                "IsMouseOver" Value="True">
                    "Background" Value="#363636"/>
                
                "IsMouseCaptured" Value="True">
                    "Background" Value="#161616"/>
                
            
        Style>

        <Style x:Key="buttonMain" TargetType="Button">
            "Background" Value="#f5f7f9"/>
            "Foreground" Value="#363636"/>
            "BorderThickness" Value="0"/>
            "Height" Value="40"/>
            "FontSize" Value="16"/>
            "FontWeight" Value="SemiBold"/>
            "Template">
                
                    "Button">
                        "{TemplateBinding Background}" CornerRadius="5" Padding="5">
                            "Center" VerticalAlignment="Center"/>
                        
                    
                
            

            
                "IsMouseOver" Value="True">
                    "Background" Value="#c9c9c9"/>
                    "Foreground" Value="#161616"/>
                
            
        Style>

        <Style x:Key="buttonMainGreen" TargetType="Button" BasedOn="{StaticResource buttonMain}">
            <Setter Property="Background" Value="#5fe7c4"/>
            <Setter Property="Foreground" Value="#ffffff"/>
            <Style.Triggers>
                "IsMouseOver" Value="True">
                    "Background" Value="#4ec7a8"/>
                    "Foreground" Value="#ffffff"/>
                
            
        Style>
        
    Application.Resources>
Application>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144

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
{
    /// 
    /// App.xaml 的交互逻辑
    /// 
    public partial class App : Application
    {
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

MyOption.xaml.cs代码:

using System.Windows;
using System.Windows.Controls;


namespace RegisterPage.UserControls
{
    /// 
    /// MyOption.xaml 的交互逻辑
    /// 
    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));
    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

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"/>
    Grid>
UserControl>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

MyTextBox.xaml.cs代码：

using System.Windows;
using System.Windows.Controls;

namespace RegisterPage.UserControls
{
    /// 
    /// MyTextBox.xaml 的交互逻辑
    /// 
    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));
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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">
    <Grid>
        <Grid Margin="100,50,100,50">
            <Grid.RowDefinitions>
                <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>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

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">
    
    <materialDesign:Card UniformCornerRadius="15" Margin="25" materialDesign:ShadowAssist.ShadowDepth="Depth4" >
        
        <materialDesign:DialogHost x:Name="DialogHost" CloseOnClickAway="True">
            
            <StackPanel>

                <materialDesign:PopupBox HorizontalAlignment="Right" Margin="0 20 20 0" PlacementMode="BottomAndAlignRightEdges"  Height="25">
                    
                    <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"/>
                            
                        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}"/>
                
                <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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

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
{
    /// 
    /// MainWindow.xaml 的交互逻辑
    /// 
    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();
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

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:DialogHost x:Name="DialogHost" CloseOnClickAway="True">
            
            <StackPanel>

                <materialDesign:PopupBox HorizontalAlignment="Right" Margin="0 20 20 0" PlacementMode="BottomAndAlignRightEdges"  Height="25">
                    
                    <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"/>
                            
                        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}"/>
                
                
                <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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

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
{
    /// 
    /// registPage.xaml 的交互逻辑
    /// 
    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();
            }

        }
    }
    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

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" />
                
                <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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
{
    /// 
    /// App.xaml 的交互逻辑
    /// 
    public partial class App : Application
    {
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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
{
    /// 
    /// App.xaml 的交互逻辑
    /// 
    public partial class App : Application
    {
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

    
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                
                <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" /> 

            
            <Grid Grid.Column="0">
                
                <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}">
                            "HorizontalAlignment" Value="Center"/>
                            "VerticalAlignment" Value="Center"/>
                            "Height" Value="53"/>
                            "Width" Value="150"/>
                            "Margin" Value="0,-50,0,0"/>
                            "Background" Value="WhiteSmoke"/>
                            "Template">
                                
                                    "{x:Type Button}">
                                        "{TemplateBinding Background}" CornerRadius="10">
                                            
                                                
                                                    "45"/>
                                                    

                                                
                                                "0" CornerRadius="10" Height="28" Width="28" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center">
                                                    "{StaticResource light}" Width="28" Height="28" Fill="#8c14fd" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform"/>
                                                
                                                "1">
                                                    "Left" VerticalAlignment="Center" Margin="15,5,5,5">
                                                    "更新课程" FontSize="16" FontWeight="Bold"/>
                                                    
                                                

                                            

                                        
                                    
                                
                            
                        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}">
                                        "HorizontalAlignment" Value="Center"/>
                                        "VerticalAlignment" Value="Center"/>
                                        "Height" Value="80"/>
                                        "Width" Value="200"/>
                                        "Margin" Value="0,0,0,0"/>
                                        "Background" Value="WhiteSmoke"/>
                                        "Template">
                                            
                                                "{x:Type Button}">
                                                    "{TemplateBinding Background}" CornerRadius="10">
                                                        
                                                            
                                                                "40"/>
                                                                
                                                                "35"/>
                                                            
                                                            "0" Margin="10,0,0,0" CornerRadius="10" Height="28" Width="28" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center">
                                                                "{StaticResource play}" Width="28" Height="28" Fill="#1afa29" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform"/>
                                                            
                                                            "1">
                                                                "1,20,1,10">
                                                                    "面向对象程序设计"  FontWeight="SemiBold"/>
                                                                    
                                                                    "@小王老师" FontSize="13"  FontWeight="SemiBold"/>
                                                                
                                                            
                                                            "2" Margin="-30,0,0,0">
                                                                "{StaticResource add}" Width="28" Height="28" Fill="#ffbebebe" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform"/>
                                                            
                                                        

                                                    
                                                
                                            
                                        
                                    Style>
                                Button.Style>
                            Button>
                        Grid>
                        <Grid Grid.Row="0" Grid.Column="1">
                            <Button>
                                <Button.Style>
                                    <Style TargetType="{x:Type Button}">
                                        "HorizontalAlignment" Value="Center"/>
                                        "VerticalAlignment" Value="Center"/>
                                        "Height" Value="80"/>
                                        "Width" Value="200"/>
                                        "Margin" Value="0,0,0,0"/>
                                        "Background" Value="WhiteSmoke"/>
                                        "Template">
                                            
                                                "{x:Type Button}">
                                                    "{TemplateBinding Background}" CornerRadius="10">
                                                        
                                                            
                                                                "40"/>
                                                                
                                                                "35"/>
                                                            
                                                            "0" Margin="10,0,0,0" CornerRadius="10" Height="28" Width="28" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center">
                                                                "{StaticResource play}" Width="28" Height="28" Fill="#1afa29" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform"/>
                                                            
                                                            "1">
                                                                "30,20,30,10">
                                                                    "操作系统"  FontWeight="SemiBold"/>
                                                                    
                                                                    "@小赵老师" FontSize="13"  FontWeight="SemiBold"/>
                                                                
                                                            
                                                            "2" Margin="-30,0,0,0">
                                                                "{StaticResource add}" Width="28" Height="28" Fill="#ffbebebe" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform"/>
                                                            
                                                        

                                                    
                                                
                                            
                                        
                                    Style>
                                Button.Style>
                            Button>
                        Grid>
                        <Grid Grid.Row="1" Grid.Column="0">
                            <Button>
                                <Button.Style>
                                    <Style TargetType="{x:Type Button}">
                                        "HorizontalAlignment" Value="Center"/>
                                        "VerticalAlignment" Value="Center"/>
                                        "Height" Value="80"/>
                                        "Width" Value="200"/>
                                        "Margin" Value="0,0,0,0"/>
                                        "Background" Value="WhiteSmoke"/>
                                        "Template">
                                            
                                                "{x:Type Button}">
                                                    "{TemplateBinding Background}" CornerRadius="10">
                                                        
                                                            
                                                                "40"/>
                                                                
                                                                "35"/>
                                                            
                                                            "0" Margin="10,0,0,0" CornerRadius="10" Height="28" Width="28" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center">
                                                                "{StaticResource play}" Width="28" Height="28" Fill="#1afa29" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform"/>
                                                            
                                                            "1">
                                                                "20,20,20,10">
                                                                    "计算机网络"  FontWeight="SemiBold"/>
                                                                    
                                                                    "@小孔老师" FontSize="13"  FontWeight="SemiBold"/>
                                                                
                                                            
                                                            "2" Margin="-30,0,0,0">
                                                                "{StaticResource add}" Width="28" Height="28" Fill="#ffbebebe" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform"/>
                                                            
                                                        

                                                    
                                                
                                            
                                        
                                    Style>
                                Button.Style>
                            Button>
                        Grid>
                        <Grid Grid.Row="1" Grid.Column="1">
                            <Button>
                                <Button.Style>
                                    <Style TargetType="{x:Type Button}">
                                        "HorizontalAlignment" Value="Center"/>
                                        "VerticalAlignment" Value="Center"/>
                                        "Height" Value="80"/>
                                        "Width" Value="200"/>
                                        "Margin" Value="0,0,0,0"/>
                                        "Background" Value="WhiteSmoke"/>
                                        "Template">
                                            
                                                "{x:Type Button}">
                                                    "{TemplateBinding Background}" CornerRadius="10">
                                                        
                                                            
                                                                "40"/>
                                                                
                                                                "35"/>
                                                            
                                                            "0" Margin="10,0,0,0" CornerRadius="10" Height="28" Width="28" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center">
                                                                "{StaticResource play}" Width="28" Height="28" Fill="#1afa29" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform"/>
                                                            
                                                            "1">
                                                                "10,20,10,10">
                                                                    "计算机组成原理"  FontWeight="SemiBold"/>
                                                                    
                                                                    "@小马老师" FontSize="13"  FontWeight="SemiBold"/>
                                                                
                                                            
                                                            "2" Margin="-30,0,0,0">
                                                                "{StaticResource add}" Width="28" Height="28" Fill="#ffbebebe" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform"/>
                                                            
                                                        

                                                    
                                                
                                            
                                        
                                    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" />
            
            <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}">
                                "HorizontalAlignment" Value="Center"/>
                                "VerticalAlignment" Value="Center"/>
                                "Height" Value="100"/>
                                "Width" Value="200"/>
                                "Margin" Value="0,0,0,-80"/>
                                "Background" Value="WhiteSmoke"/>
                                "Template">
                                    
                                        "{x:Type Button}">
                                            "{TemplateBinding Background}" CornerRadius="10">
                                                
                                                    
                                                        "28"/>
                                                        
                                                        "35"/>
                                                    
                                                    "0" CornerRadius="10" Height="28" Width="28" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center">
                                                        "{StaticResource contact}" Width="28" Height="28" Fill="#1afa29" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform"/>
                                                    
                                                    "1">
                                                        "Left" VerticalAlignment="Center" Margin="15,5,5,5">
                                                    "联系我们" FontSize="16" FontWeight="Bold"/>
                                                        
                                                    
                                                    "2" >
                                                        "{StaticResource detail}" Width="28" Height="28" Fill="#ffbebebe" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Uniform"/>
                                                    
                                                

                                            
                                        
                                    
                                
                            Style>
                        Button.Style>
                    Button>
                Grid>
            Grid>
        Grid>
    Border>
Window>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474

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
{
    /// 
    /// MainWindow.xaml 的交互逻辑
    /// 
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)//设置窗口可拖拽
        {
            base.OnMouseLeftButtonDown(e);
            DragMove();
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

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}">
            "HorizontalAlignment" Value="Left"/>
            "VerticalAlignment" Value="Stretch"/>
            "CornerRadius" Value="{Binding IndicatorCornerEadius,ElementName=this,FallbackValue=2,TargetNullValue=2}"/>
            "Background" Value="{Binding IndicatorBrush,ElementName=this}"/>
            "Visibility" Value="Hidden"/>
            "Width" Value="{Binding IndicatorWidth,ElementName=this,FallbackValue=4,TargetNullValue=4}"/>
            
                "{Binding IsMouseOver,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ToggleButton}}" Value="True">
                    "Visibility" Value="Visible"/>
                
                "{Binding IsChecked,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ToggleButton}}" Value="True">
                    "Visibility" Value="Visible"/>
                
            
        Style>
        
        <Style x:Key="MenuIconStyle" TargetType="{x:Type Path}">
            "Fill" Value="#bebebe"/>
            
                "{Binding IsMouseOver,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ToggleButton}}" Value="True">
                    "Fill" Value="#fff7542e"/>
                

                "{Binding IsChecked,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ToggleButton}}" Value="True">
                    "Fill" Value="#fff7542e"/>
                
            
        Style>

        <Style x:Key="MenuTextStyle" TargetType="{x:Type TextBlock}">
            "Foreground" Value="#bebebe"/>
            "VerticalAlignment" Value="Center"/>
            "FontSize" Value="10"/>
            "FontWeight" Value="Normal"/>
            "FontFamily" Value="Segoe UI Semibold"/>
            "Margin" Value="13,0,0,0"/>
            
                "{Binding IsMouseOver,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ToggleButton}}" Value="True">
                    "Foreground" Value="Black"/>
                

                "{Binding IsChecked,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=ToggleButton}}" Value="True">
                    "Foreground" Value="Black"/>
                
            
        Style>
        
        <Style x:Key="MenuButtonStyle" TargetType="{x:Type ToggleButton}">
            "Height" Value="32"/>
            "Background" Value="White"/>
            "HorizontalAlignment" Value="Stretch"/>
            "HorizontalContentAlignment" Value="Center"/>
            "Background" Value="Transparent"/>
            "BorderThickness" Value="0"/>
            "Template">
                
                    "{x:Type ToggleButton}">
                        "{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{Binding Padding,ElementName=this}">
                            
                                
                                    "Auto"/> 
                                    
                                

                                
                                "{StaticResource IndicatorStyle}"/>

                                
                                "{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}"/>
                                
                                
                                "{StaticResource MenuTextStyle}" Grid.Column="1" Text="{Binding Text,ElementName=this,FallbackValue=MenuText,TargetNullValue=MenuText}"/>
                            
                        
                        
                            "{Binding IsChecked,ElementName=this}" Value="True">
                                "IsChecked" Value="True"/>
                            
                        
                    
                
            
        Style>
    UserControl.Resources>
    <Grid>
        <RadioButton Style="{StaticResource MenuButtonStyle}" GroupName="{Binding GroupName,ElementName=this}"/>
    Grid>
UserControl>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

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
{
    /// 
    /// MenuButton.xaml 的交互逻辑
    /// 
    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));

    }

    }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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
{
    /// 
    /// StreamingStatusButton.xaml 的交互逻辑
    /// 
    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));
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

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">
            "Background" Value="Transparent"/>
            "Foreground" Value="#6e7783"/>
            "FocusVisualStyle" Value="{x:Null}"/>
            "Width" Value="30"/>
            "Height" Value="30"/>
            "HorizontalAlignment" Value="Right"/>
            "Template">
                
                    "Button">
                        "{TemplateBinding Background}" CornerRadius="50">
                            "Center" VerticalAlignment="Center"/>
                        
                    
                
            

            
                "IsMouseOver" Value="True">
                    "Background" Value="#dcdcdc"/>
                
                
            
        Style>

        <Style x:Key="menuButton" TargetType="Button">
            "Background" Value="Transparent"/>
            "Foreground" Value="#d0c0ff"/>
            "FocusVisualStyle" Value="{x:Null}"/>
            "Height" Value="35"/>
            "Margin" Value="15 3"/>
            "FontSize" Value="13"/>
            "Template">
                
                    "Button">
                        "{TemplateBinding Background}" CornerRadius="7">
                            "Left" VerticalAlignment="Center"/>
                        
                    
                
            
            
                "IsMouseOver" Value="True">
                    "Background" Value="#7b5cd6"/>
                    "Foreground" Value="#ffffff"/>
                
            
        Style>

        <Style x:Key="menuButtonIcon" TargetType="materialDesign:PackIcon">
            "Width" Value="15"/>
            "Height" Value="15"/>
            "VerticalAlignment" Value="Center"/>
            "Margin" Value="20 2 20 0"/>
        Style>

        <Style x:Key="textboxSearch" TargetType="TextBox">
            "Background" Value="#ffffff"/>
            "Foreground" Value="#b0b9c6"/>
            "BorderThickness" Value="0"/>
            "FontSize" Value="12"/>
            "Padding" Value="15"/>
            "Margin" Value="0 10"/>
            "Template">
                
                    "TextBox">
                        x:Name="border" CornerRadius="20" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" BorderThickness="1" BorderBrush="#e0e6ed">
                            x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Hidden"/>
                        
                        
                            "IsMouseOver" Value="True">
                                "BorderBrush" Value="#d9d9d9" TargetName="border"/>
                            
                            "IsKeyboardFocused" Value="True">
                                "BorderBrush" Value="#d9d9d9" TargetName="border"/>
                            
                        
                    
                
            
        Style>

        <Style x:Key="addButton" TargetType="Button">
            "Background" Value="#6741d9"/>
            "Foreground" Value="#ffffff"/>
            "FocusVisualStyle" Value="{x:Null}"/>
            "Width" Value="150"/>
            "Height" Value="35"/>
            "HorizontalAlignment" Value="Right"/>
            "Margin" Value="0 20 0 0"/>
            "FontSize" Value="13"/>
            "Template">
                
                    "Button">
                        "{TemplateBinding Background}" CornerRadius="7">
                            "Center" VerticalAlignment="Center"/>
                        
                    
                
            
            
                "IsMouseOver" Value="True">
                    "Background" Value="#7b5cd6"/>
                    "Foreground" Value="#ffffff"/>
                
            
        Style>

        <Style x:Key="tabButton" TargetType="Button">
            "Background" Value="Transparent"/>
            "Foreground" Value="#121518"/>
            "FocusVisualStyle" Value="{x:Null}"/>
            "Width" Value="70"/>
            "Height" Value="45"/>
            "BorderBrush" Value="Transparent"/>
            "FontSize" Value="14"/>
            "FontWeight" Value="SemiBold"/>
            "Template">
                
                    "Button">
                        "{TemplateBinding Background}" BorderThickness="0 0 0 1" BorderBrush="{TemplateBinding BorderBrush}">
                            "Center" VerticalAlignment="Center"/>
                        
                    
                
            
            
                "IsMouseOver" Value="True">
                    "BorderBrush" Value="#784ff2"/>
                
            
        Style>

        <Style x:Key="textBoxFilter" TargetType="TextBox">
            "Padding" Value="10 7"/>
            "Template">
                
                    "TextBox">
                        x:Name="border" CornerRadius="7" Background="{TemplateBinding Background}" SnapsToDevicePixels="True" BorderThickness="1" BorderBrush="#e0e6ed">
                            x:Name="PART_ContentHost" Focusable="False" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Hidden"/>
                        
                        
                            "IsMouseOver" Value="True">
                                "BorderBrush" Value="#d9d9d9" TargetName="border"/>
                            
                            "IsKeyboardFocused" Value="True">
                                "BorderBrush" Value="#d9d9d9" TargetName="border"/>
                            
                        
                    
                
            
        Style>


        <Style x:Key="pagingButton" TargetType="Button">
            "Background" Value="Transparent"/>
            "Foreground" Value="#6c7682"/>
            "FocusVisualStyle" Value="{x:Null}"/>
            "FontSize" Value="13"/>
            "Margin" Value="1 0"/>
            "Template">
                
                    "Button">
                        "{TemplateBinding Background}" CornerRadius="5" Padding="10 5">
                            "Center" VerticalAlignment="Center" Margin="0 0 0 1"/>
                        
                    
                
            
            
                "IsMouseOver" Value="True">
                    "Background" Value="#7950f2"/>
                    "Foreground" Value="#ffffff"/>
                
            
        Style>

        <Style x:Key="pagingButtonIcon" TargetType="materialDesign:PackIcon">
            "Width" Value="10"/>
            "Height" Value="10"/>
            "VerticalAlignment" Value="Center"/>
        Style>

        <Style x:Key="gridEditButton" TargetType="Button">
            "Background" Value="#512da8"/>
            "BorderBrush" Value="#4a148c"/>
            "Foreground" Value="#ffffff"/>
            "FocusVisualStyle" Value="{x:Null}"/>
            "VerticalAlignment" Value="Center"/>
            "Template">
                
                    "Button">
                        "{TemplateBinding Background}" CornerRadius="5" Padding="5" BorderThickness="1" BorderBrush="{TemplateBinding BorderBrush}">
                            "Center" VerticalAlignment="Center"/>
                        
                    
                
            
            
                "IsMouseOver" Value="True">
                    "Background" Value="#673ab7"/>
                
            
        Style>

        <Style x:Key="gridRemoveButton" TargetType="Button" BasedOn="{StaticResource gridEditButton}">
            "Background" Value="#d32f2f"/>
            "BorderBrush" Value="#b71c1c"/>
            
                "IsMouseOver" Value="True">
                    "Background" Value="#f44336"/>
                
            
        Style>

        <Style x:Key="gridButtonIcon" TargetType="materialDesign:PackIcon">
            "Width" Value="12"/>
            "Height" Value="12"/>
            "VerticalAlignment" Value="Center"/>
        Style>
        
        
        <SolidColorBrush x:Key="{x:Static DataGrid.FocusBorderBrushKey}" Color="#FF000000"/>
        <Style x:Key="{ComponentResourceKey ResourceId=DataGridSelectAllButtonStyle, TypeInTargetAssembly={x:Type DataGrid}}" TargetType="{x:Type Button}">
            "Template">
                
                    "{x:Type Button}">
                        
                            x:Name="Border" Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" SnapsToDevicePixels="True"/>
                            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"/>
                        
                        
                            "IsMouseOver" Value="True">
                                "Stroke" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"/>
                            
                            "IsPressed" Value="True">
                                "Fill" TargetName="Border" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}"/>
                            
                            "IsEnabled" Value="False">
                                "Visibility" TargetName="Arrow" Value="Collapsed"/>
                            
                        
                    
                
            
        Style>
        <Style x:Key="DataGridStyle1" TargetType="{x:Type DataGrid}">
            "Background" Value="Transparent"/>
            "Foreground" Value="#222528"/>
            "BorderThickness" Value="0"/>
            "RowDetailsVisibilityMode" Value="VisibleWhenSelected"/>
            "ScrollViewer.CanContentScroll" Value="true"/>
            "ScrollViewer.PanningMode" Value="Both"/>
            "Stylus.IsFlicksEnabled" Value="False"/>
            "AutoGenerateColumns" Value="False"/>
            "HeadersVisibility" Value="Column"/>
            "Margin" Value="0 10 0 0"/>
            "SelectionMode" Value="Single"/>
            "SelectionUnit" Value="FullRow"/>
            "CanUserAddRows" Value="False"/>
            "CanUserDeleteRows" Value="False"/>
            "CanUserReorderColumns" Value="False"/>
            "FontSize" Value="13"/>
            "ColumnWidth" Value="*"/>
            "GridLinesVisibility" Value="None"/>

            "Template">
                
                    "{x:Type DataGrid}">
                        "{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
                            x:Name="DG_ScrollViewer" Focusable="false">
                                
                                    "{x:Type ScrollViewer}">
                                        
                                            
                                                "Auto"/>
                                                "*"/>
                                                "Auto"/>
                                            
                                            
                                                "Auto"/>
                                                "*"/>
                                                "Auto"/>

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
{
	/// 
	/// Interaction logic for App.xaml
	/// 
	public partial class App : Application
	{
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213

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
{
	/// 
	/// Interaction logic for MainWindow.xaml
	/// 
	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; }
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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
{
	/// 
	/// Interaction logic for MainWindow.xaml
	/// 
	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();
		}
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

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
{
	/// 
	/// Interaction logic for MainWindow.xaml
	/// 
	public partial class MainWindow : Window
	{
		public MainWindow()
		{
			InitializeComponent();
		}

		private void slider01_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
		{
			this.trans.Y = 160 - e.NewValue;
		}
	}


}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

8.设计一个圆形进度条

1.简介

主要用StrokeDashArray来绘制图形。

思路：

用Rectangle来画2个圆环，一个浅色作为进度条的背景，一个深色作为进度条进度显示。
然后通过设置StrokeDashArray来调整进度的多少，并通过StrokeDashCap把进度条两端也弄成圆弧。但是值得注意的是，通过设置StrokeDashArray来调整进度的多少，设置的并不是1%的进度，而是圆弧长度，因此还需要其他方法来设置进度条进度。
通过TextBox中输入的值来手动设置进度值，并通过TextChanged事件来刷新进度条进度。
接下来主要就是计算百分比的问题：
StrokeDashArray的单位长度不是1，而是StrokeThickness，所以整个StrokeDashArray的长度是这个圆环的周长，但是要用StrokeThickness的值为单位。

2. 实现效果

在这里插入图片描述

3.代码展示

MainWindow.xaml代码：

<Window
    x: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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

MainWindow.xaml.cs代码：

using System;
using System.Windows;
using System.Windows.Media;

namespace BlankApp1.Views
{
	/// 
	/// Interaction logic for MainWindow.xaml
	/// 
	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 };
		}
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

相关阅读:
TCPIP网络编程（一）
通过虚拟机搭建个人NAS
火遍全网的杠精哥配音怎么制作？
一文弄懂 Diffusion Model
WinForm，可能是Windows上手最快的图形框架了
软件测试工作的基本流程详解
[Machine Learning][Part 6]Cost Function代价函数和梯度正则化
Windows虚拟机访问网页证书错误问题
（9）点云数据处理学习——Global registration（全局注册）
Harbor—镜像仓库

原文地址：https://blog.csdn.net/weixin_48239221/article/details/130907355

WPF界面设计

目录

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.代码展示