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

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”

然后在主项目“的依赖项”菜单上右键，选择“添加项目引用”

在解决方案类别中选中MahApps.Metro项目并确定。

项目还使用了其他来源的图表和样式库。可以通过NuGet工具引用

现在程序中有了它们的引用。可以开始编译了

控件外外观演示图