wpf 如何在XAML的材质设计中切换明暗模式?

e4eetjau  于 2023-03-04  发布在  其他
关注(0)|答案(1)|浏览(192)

在运行时,我希望将应用的主主题(* 在本例中为浅色主题 *)更改为深色主题
我用的是C#编程语言,用的是WPF项目模板.而且在这个项目中.
我在项目中安装了MaterialDesignThemes库,默认情况下,我将其设置为light主题。

<materialDesign:BundledTheme BaseTheme="Light" PrimaryColor="DeepPurple" SecondaryColor="DeepOrange" />

现在我想创建一种机制,可以在应用程序运行时将主题从亮更改为暗。

bmp9r5qi

bmp9r5qi1#

我们可以将此问题分为两种情况:

  • 仅使用代码隐藏
  • 使用MVVM体系结构

仅使用代码隐藏

示例:

<Window x:Class="GED.Views.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    xmlns:local="clr-namespace:GED.Views"
    Title="MainWindow">
<Grid>
    <ToggleButton x:Name="DarkModeToggle"
                  Content="Dark Mode"
                  Checked="DarkModeToggle_Checked"/>
</Grid>

代码隐藏:

using MaterialDesignThemes.Wpf;
using System.Windows;

namespace GED.Views
{
    public partial class MainWindow : Window
    {
        public MainWindow ()
        {
            InitializeComponent();
        }

        private void DarkModeToggle_Checked(object sender, RoutedEventArgs e)
        {
            PaletteHelper palette = new PaletteHelper();

            ITheme theme = palette.GetTheme();

            if (DarkModeToggle.IsChecked.Value)
            {
                theme.SetBaseTheme(Theme.Dark);
            }
            else
            {
                theme.SetBaseTheme(Theme.Light);
            }
            palette.SetTheme(theme);
        }
    }
}

使用MVVM架构

示例:

<Window x:Class="GED.Views.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
    xmlns:local="clr-namespace:GED.Views" 
    xmlns:viewModel="clr-namespace:GED.ViewModels.Register"
    Title="MainWindow">

<Window.DataContext>
    <viewModel:MainViewModelStackoverFlow/>
</Window.DataContext>

<Grid>
    <ToggleButton x:Name="DarkModeToggle"
                  IsChecked="{Binding IsChecked}"
                  Command="{Binding DarkModeCommand}"
                  Checked="DarkModeToggle_Checked"/>
</Grid>

视图模型:

using MaterialDesignThemes.Wpf;
using System.Windows.Input;

namespace GED.ViewModels
{
    public class MainViewModel : ViewModelBase
    {
        private bool _isChecked;

        public bool IsChecked
        {
            get { return _isChecked; }
            set
            {
                _isChecked = value;
                OnPropertyChanged(nameof(IsChecked));
            }
        }

        public ICommand DarkModeCommand { get; }

        public MainViewModelStackoverFlow()
        {
            DarkModeCommand = new ViewModelCommand(ExecuteDarkModeCommand);
        }

        private void ExecuteDarkModeCommand(object obj)
        {
            PaletteHelper palette = new PaletteHelper();

            ITheme theme = palette.GetTheme();

            if (IsChecked)
            {
                theme.SetBaseTheme(Theme.Dark);
            }
            else
            {
                theme.SetBaseTheme(Theme.Light);
            }
            palette.SetTheme(theme);
        }
    }
}

注解

您可能已经注意到,MainViewModel由名为ViewModelBase的类继承,并且在该类的构造函数中,使用ViewModelCommand类创建了一个示例。
为了理解这些类是什么,您需要知道如何在项目中实现MVVM体系结构。
总的来说,可以说:
查看模型库

  • 是所有要实现INotifyPropertyChanged接口的ViewModel所继承的类,这将生成事件void OnPropertyChange(string property);,该事件负责通知前端(View)中对属性所做的每一次更改。

查看模型命令

  • 也称为RelayCommand,是以通用方式处理每个事件的类。当涉及到事件时,在其余的ViewModel中,ICommand类型的ReadOnly属性被用作View控件中的触发器,如<ToggleButton/>的情况。

相关问题