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 添加到本地项目

将源代码下载到本地

将以下路径的项目添加到当前解决方案。

“****\MahApps.Metro-develop\src\MahApps.Metro”

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

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

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

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

控件外外观演示图