MahApps.Metro的MVVM模式介绍（一）

MahApps.Metro是一个开源的WPF (Windows Presentation Foundation) UI 控件库。它的特点有现代化设计、主题定制、响应式布局、内置控件。

而Mvvm模式的核心思想是将用户界面（View）与应用程序逻辑（ViewModel）分离，以实现更好的可维护性、可测试性和可扩展性。

今天来介绍下MahApps.Metro项目是怎么使用mvvm模式的。

 MainWindow类扮演View角色：

 public partial class MainWindow : MetroWindow
 {
     private bool shutdown;
     private readonly MainWindowViewModel viewModel;
     private FlyoutDemo? flyoutDemo;

     public MainWindow()
     {
         this.viewModel = new MainWindowViewModel(DialogCoordinator.Instance);
         this.DataContext = this.viewModel;

         this.InitializeComponent();
     }
}

MainWindowViewModel类扮演了ViewModel 角色。

 public class MainWindowViewModel : ViewModelBase, IDataErrorInfo, IDisposable
 {
     private readonly IDialogCoordinator _dialogCoordinator;
     int? _integerGreater10Property = 2;
     private bool _animateOnPositionChange = true;

     public MainWindowViewModel(IDialogCoordinator dialogCoordinator)
     {
    ...
    }
}

先介绍一个单向绑定的属性-Theme列表

在MainWindow.xaml中

 <MenuItem Header="Theme"
          ItemContainerStyle="{StaticResource AppThemeMenuItemStyle}"
          <!-- 绑定到“AppThemes”属性，模式为“OneWa”即只从viewmodel向view传递一次数据 -->
          ItemsSource="{Binding AppThemes, Mode=OneWay}" />
...

在MainWindowViewModel.cs中

// AppThemes 定义为公开的属性拥有get，set访问器
 public List<AppThemeMenuData> AppThemes { get; set; }
// MainWindowViewModel的构造函数，这这里为AppThemes 填充数据
 public MainWindowViewModel(IDialogCoordinator dialogCoordinator)
{
    ... 
    this.AppThemes = ThemeManager.Current.Themes
                              .GroupBy(x => x.BaseColorScheme)... .ToList();
    ...
}

通过以上代码，就可以实现在Theme菜单栏里添加多个子菜单项了。