MahApps.Metro的MVVM模式解析（二）主题功能

mahapps,metro,mvvm · 浏览次数 : 7

小编点评

**MahApps.Metro MVVM模式解析（二）主题功能** **1. 主题功能演示主题列表** - 在 `Menu` 中定义一个 `MenuItem`，其 `ItemContainerStyle` 设置为 `StaticResource AppThemeMenuItemStyle`。 - `AppThemeMenuItemStyle` 样式定义了菜单点击后切换主题的样式，其中 `Command` 和 `CommandParameter` 属性用于绑定事件和数据源。 - `ItemsSource` 属性绑定 `AppThemes` 属性，该属性在 ViewModel 中定义了主题列表。 **2. 软件架构** - **ViewModel:** 负责数据管理，包括主题列表。 - **Model:** 与数据库或其他数据源交互。 - **View:** 负责页面外观和用户界面。 **3. 分模块展示代码** ```wpf ``` **4. 重要代码** ```csharp // AppThemes 属性在 ViewModel 中定义 public List AppThemes { get; set; } // DoChangeTheme 方法在 ViewModel 中定义 public void DoChangeTheme(string? name) { if (name is not null) { // 切换主题 ThemeManager.Current.ChangeThemeColorScheme(Application.Current, name); } } ``` **5. 附录** - **AppThemeMenuItemStyle** 样式定义了菜单项的样式，其中包含 `Command` 和 `CommandParameter` 属性。 - **AppThemes** 属性在 ViewModel 中定义了主题列表。 - **AppThemeMenuData** 类定义了主题数据结构。

正文

MahApps.Metro的MVVM模式解析（二）主题功能
MahApps.Metro是一个开源的WPF框架，旨在为WPF应用程序提供现代和漂亮的用户界面。
在MahApps.Metro中提供了切换主题的功能。经过多日的筛选和分析，在本文来理清它的脉络。
1 主题功能演示
主题列表：

白天主题效果：

夜晚主题效果：

2软件架构

3 分模块展示代码
View
页面中主题列表代码如下。这是使用Menu 和MenuItem 来实现了菜单效果
<Menu Grid.Row="0" Margin="5" HorizontalAlignment="Left" VerticalAlignment="Stretch"> <MenuItem Header="Theme" ItemContainerStyle="{StaticResource AppThemeMenuItemStyle}" ItemsSource="{Binding AppThemes, Mode=OneWay}" /> </Menu>
重要代码有两处：
1 “ItemContainerStyle="{StaticResource AppThemeMenuItemStyle}"”
这里通过样式技术，实现了菜单的点击后切换主题的功能
2 “ ItemsSource="{Binding AppThemes, Mode=OneWay}" ”
这里通过与viewmodel的绑定实现了显示主题列表的功能
拓展：wpf的样式：
样式（Style）是一种将一组属性值应用到多个元素的便捷方法。
在这个项目中名为“AppThemeMenuItemStyle”的样式代码如下：
<Style x:Key="AppThemeMenuItemStyle" BasedOn="{StaticResource MahApps.Styles.MenuItem}" TargetType="{x:Type MenuItem}"> <Setter Property="Command" Value="{Binding ChangeAccentCommand}" /> <Setter Property="CommandParameter" Value="{Binding Name, Mode=OneWay}" /> <Setter Property="Header" Value="{Binding Name, Mode=OneWay}" /> <Setter Property="Icon" Value="{StaticResource AppThemeMenuIcon}" /> </Style>

“BasedOn”：样式可以继承。
“Command”、“CommandParameter”：在样式里绑定控件的事件。这里是菜单项的点击事件。
“Header”：将控件属性绑定到动态数据源
“Icon”：将控件属性绑定到静态资源。

ViewModel
作为数据源，具体代码如下：
public List<AppThemeMenuData> AppThemes { get; set; } public ViewModel_Mainwin(IDialogCoordinator dialogCoordinator) { // create metro theme color menu items for the demo this.AppThemes = ThemeManager.Current.Themes .GroupBy(x => x.BaseColorScheme) ... .ToList(); }
ViewModel_Mainwin类中，定义了公开的 AppThemes 属性。它包含了一个主题列表。
Model
当然为了实现复杂功能，AppThemes使用了AppThemeMenuData类。如下：

`public class AppThemeMenuData
{
public string? Name { get; set; }

	public Brush? BorderColorBrush { get; set; }

	public Brush? ColorBrush { get; set; }

	public AccentColorMenuData()
	{
		this.ChangeAccentCommand = new SimpleCommand<string?>(o => true, this.DoChangeTheme);
	}

	public ICommand ChangeAccentCommand { get; }

	protected virtual void DoChangeTheme(string? name)
	{
		if (name is not null)
		{
			ThemeManager.Current.ChangeThemeColorScheme(Application.Current, name);
		}
	}
}`

三个属性不用说。复杂的是ChangeAccentCommand 事件。一方面它被绑定到页面的点击事件上。另一方面，在构造函数里它被赋予一个匿名函数。通过调用DoChangeTheme函数来实现切换主题。

4 7附录：
如何引用MahApps.Metro项目
如果将MahApps.Metro 添加到本地项目
方式1 ：将源代码下载到本地

将以下路径的项目添加到当前解决方案。
“****\MahApps.Metro-develop\src\MahApps.Metro”
然后在主项目“的依赖项”菜单上右键，选择“添加项目引用”