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

本文主要是介绍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 demothis.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函数来实现切换主题。