.NET Core 3.1 GUI主题

简介

尝试使用

.NET Core 3.1和Visual Studio或使用非标准控件来更改控件的外观。

关键字：浅色/深色主题，NumericUpDown，进度环，水印，拨动开关，InputBox

环境

Windows 10
Visual Studio 2019版本16.7.4
.NET Core 3.1
MahApps.Metro 2.2.0

基本画面创建

请参阅此处的"准备"和"创建项目"。
项目名称为WpfAppThemeSample。

并如下创建屏幕。

MainWindow.xaml

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

尝试运行它。

设计变更

◇图书馆安装

在解决方案资源管理器中的项目上单击鼠标右键，然后从菜单中选择NuGetパッケージの管理。

在

参照选项卡上的搜索框中键入metro，以安装MahApps.Metro。

◇App.xaml

的修改

添加

ResourceDictionary。

App.xaml(修改后)

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

◇MainWindow.xaml

的修改

添加

xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"和
将Window更改为mah:MetroWindow。

MainWindow.xaml(修改前)

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

MainWindow.xaml(修改后)

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

<mah:MetroWindow
x:Class="WpfAppThemeSample.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:local="clr-namespace:WpfAppThemeSample"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"
Title="MainWindow"
Width="800"
Height="450"
mc:Ignorable="d">
：
</mah:MetroWindow>

将BasedOn添加到

样式定义。

MainWindow.xaml(修改后)

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

<Style BasedOn="{StaticResource MahApps.Styles.TabItem}" TargetType="TabItem">
<Setter Property="Width" Value="120" />
</Style>

<Style BasedOn="{StaticResource MahApps.Styles.Button}" TargetType="Button">
<Setter Property="Margin" Value="8,8,8,0" />
</Style>

<Style
x:Key="FooterButton"
BasedOn="{StaticResource MahApps.Styles.Button}"
TargetType="Button">
<Setter Property="Width" Value="100" />
<Setter Property="Margin" Value="8,0,0,0" />
</Style>

<Style BasedOn="{StaticResource MahApps.Styles.TextBox}" TargetType="TextBox">
<Setter Property="Margin" Value="8,8,8,0" />
</Style>

◇MainWindow.xaml.cs

的修改

打开

MainWindow.xaml.cs文件并删除继承源的描述。

MainWindow.xaml.cs(修改前)

1	public partial class MainWindow : Window

MainWindow.xaml.cs(修改后)

1	public partial class MainWindow

尝试运行它。

设计已更改。

大写和小写

标题栏上的MainWindow和底部按钮上的InputBox被任意更改为大写。
禁用此选项可显示原始设置的文本。

将TitleCharacterCasing="Normal"添加到

mah:MetroWindow。
将<Setter Property="mah:ControlsHelper.ContentCharacterCasing" Value="Normal" />添加到FooterButton的样式定义中。

窗口样式设置

◇最大化按钮，最小化按钮

隐藏启用窗口调整大小的最大化和最小化按钮。

mah:MetroWindow至
ResizeMode="CanResizeWithGrip"(调整握把大小)，
ShowMaxRestoreButton="False"(隐藏最大化按钮)，
添加ShowMinButton="False"(隐藏最小化按钮)。

至此，Xaml如下。

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

<mah:MetroWindow
x:Class="WpfAppThemeSample.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:local="clr-namespace:WpfAppThemeSample"
xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Title="MainWindow"
Width="800"
Height="450"
ResizeMode="CanResizeWithGrip"
ShowMaxRestoreButton="False"
ShowMinButton="False"
TitleCharacterCasing="Normal"
mc:Ignorable="d">

1
2
3
4
5
6
7
8
9

<Style
x:Key="FooterButton"
BasedOn="{StaticResource MahApps.Styles.Button}"
TargetType="Button">
<Setter Property="Width" Value="100" />
<Setter Property="Margin" Value="8,0,0,0" />
<Setter Property="mah:ControlsHelper.ContentCharacterCasing" Value="Normal" />
</Style>

尝试运行它。
如指定，标题栏和按钮以区分大小写的方式显示。
最小化和最大化按钮也消失了。
夹点显示在窗口的右下角，以便于调整大小。

◇照亮窗边

将GlowBrush="{DynamicResource MahApps.Brushes.Accent}"添加到

mah:MetroWindow。
窗口的边缘会发光。

扩展

MainWindow.xaml

1
2
3
4
5
6

<mah:MetroWindow
x:Class="WpfAppThemeSample.MainWindow"
：
GlowBrush="{DynamicResource MahApps.Brushes.Accent}"
：
mc:Ignorable="d">

黑暗主题

允许您在当前的基于白色的配色方案和基于黑色的配色方案之间切换。
在两个单选按钮上设置Checked事件的处理。

MainWindow.xaml

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

<GroupBox Margin="8" Header="テーマ">
<StackPanel Orientation="Horizontal">
<RadioButton
Margin="8"
Checked="ThemeRadioButton_Checked"
Content="ライト"
IsChecked="True" />
<RadioButton
Margin="8"
Checked="ThemeRadioButton_Checked"
Content="ダーク" />
</StackPanel>
</GroupBox>

MainWindow.xaml.cs

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

using ControlzEx.Theming;
using System.Windows;
using System.Windows.Controls;

namespace WpfAppThemeSample
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow
{
public MainWindow()
{
InitializeComponent();
}

private void ThemeRadioButton_Checked(object sender, RoutedEventArgs e)
{
if (((RadioButton)sender).Content.ToString() == "ライト")
{
// ライトテーマを設定
ThemeManager.Current.ChangeTheme(this, "Light.Blue");
}
else
{
// ダークテーマを設定
ThemeManager.Current.ChangeTheme(this, "Dark.Blue");
}
}

}
}

尝试运行它。
选择ダーク单选按钮时，颜色是基于黑色的。

文字框

更正标签2上的文本框。

◇水印

也称为占位符。
当未输入文本框时，说明会淡淡显示。

当文本框为空白时，在

mah:TextBoxHelper.Watermark中设置的字符串会以浅色显示。

◇文字清除按钮

mah:TextBoxHelper.ClearTextButton="True"将弹出一个×按钮??以清除文本内容。

MainWindow.xaml

1
2
3
4
5
6
7
8

◇对焦时全选

当焦点位于文本框时进行所有选择。
将TextBoxHelper.SelectAllOnFocus添加到样式定义。

MainWindow.xaml(修改后)

1
2
3
4
5
6
7
8

<Window.Resources>
：

<Style BasedOn="{StaticResource MahApps.Styles.TextBox}" TargetType="TextBox">
<Setter Property="Margin" Value="8,8,8,0" />
<Setter Property="mah:TextBoxHelper.SelectAllOnFocus" Value="True" />
</Style>
</Window.Resources>

数字上下

适合输入数字值的文本框。
您可以直接输入它，也可以使用+和-按钮增加或减少值。

将以下内容添加到

选项卡2中的StackPanel中。

MainWindow.xaml

1
2
3
4
5
6

<mah:NumericUpDown
Width="100"
Margin="8"
Maximum="999"
Minimum="1"
Value="10" />

拨动开关

这是打开/关闭的开关。
(有时有些人会努力拖拽，但是您可以通过单击来切换)。

在选项卡2上添加到StackPanel。

MainWindow.xaml

1
2
3
4
5
6
7

<mah:ToggleSwitch
Margin="8"
Header="何か処理"
IsOn="False"
OffContent="停止"
OnContent="処理中"
Toggled="ToggleSwitch_Toggled" />

MainWindow.xaml.cs

1
2
3
4

private void ToggleSwitch_Toggled(object sender, RoutedEventArgs e)
{

}

[参考]如果不需要标题和打开/关闭文本切换，则将文本设置为Content。

1	<mah:ToggleSwitch Content="電源" IsOn="True"/>

进度环

这是在处理过程中用于显示的内容。

在选项卡2上添加到StackPanel。

MainWindow.xaml

1	<mah:ProgressRing x:Name="ProgressR" IsActive="False" />

描述切换拨动开关时的过程。
拨动开关打开时，将在处理期间显示。

MainWindow.xaml.cs

1
2
3
4

private void ToggleSwitch_Toggled(object sender, RoutedEventArgs e)
{
ProgressR.IsActive = ((MahApps.Metro.Controls.ToggleSwitch)sender).IsOn;
}

输入箱

这是用于输入字符的弹出屏幕。

将Click事件的处理添加到

InputBox按钮。

MainWindow.xaml

1
2
3
4
5
6

使用

MahApps.Metro.Controls.Dialogs。
将async添加到InputBoxButton_Click定义。
用ShowInputAsync显示InputBox。

MainWindow.xaml.cs

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

using MahApps.Metro.Controls.Dialogs;
：

private async void InputBoxButton_Click(object sender, RoutedEventArgs e)
{
var settings = new MetroDialogSettings() { DefaultText = "最初に表示しておく文字列" };
string result = await this.ShowInputAsync(
"タイトル", "何か入力してください。", settings);
if (result == null)
{
// キャンセル
return;
}
else
{
await this.ShowMessageAsync("タイトル", $"「{result}」が入力されました。");
}
}

标签

◇切换标签时的动画

如果将

TabControl更改为mah:MetroAnimatedTabControl，则切换选项卡时内容将略微滑动。

MainWindow.xaml(修改前)

1	<TabControl Grid.Row="1" Margin="8">

MainWindow.xaml(修改后)

1	<mah:MetroAnimatedTabControl Grid.Row="1" Margin="8">

◇在活动选项卡下划线

在活动选项卡上显示下划线。

将

选项卡控件设置为TabControlHelper.Underline。

MainWindow.xaml(修改后)

1
2
3
4

<mah:MetroAnimatedTabControl
Grid.Row="1"
Margin="8"
mah:TabControlHelper.Underlined="SelectedTabItem">