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 附录：
如何引用MahApps.Metro项目
如果将MahApps.Metro 添加到本地项目
方式1 ：将源代码下载到本地
将以下路径的项目添加到当前解决方案。
“****\MahApps.Metro-develop\src\MahApps.Metro”
然后在主项目“的依赖项”菜单上右键，选择“添加项目引用”
在解决方案类别中选中MahApps.Metro项目并确定。
项目还使用了其他来源的图表和样式库。可以通过NuGet工具引用
现在程序中有了它们的引用。可以开始编译了
控件外外观演示图
