トグルボタンでダークモードとライトモードを切り替え

4840 ワード
ReactiveProperty C# WPF C# テキストリンク

はじめに

ダークモードにできたら、もっといい感じになるよね！
非常に簡単なので、すぐやろう！

Windowにトグルボタンを配置する

トグルボタンのIsCheckプロパティとVieModelのDarkMode.Valueプロパティをバインドする。

MainWindow.xaml

<!-- ダークモード／ライトモードを切り替えるトグルボタン -->
<ToggleButton IsChecked="{Binding Path=DarkMode.Value, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>

ボタンの入力変更を監視するプロパティを用意する

MainWindowViewModel.cs

using MaterialDesignThemes.Wpf;
using Reactive.Bindings;
using Reactive.Bindings.Extensions;


public class MainWindowViewModel : ViewModelBase
{
    public MainWindowViewModel() : base()
    {
        // 初期化
        this.DarkMode = new ReactiveProperty<bool>(false).AddTo(this.disposedValue);
        // プロパティの値を監視する。
        this.DarkMode
            .ObserveProperty(x => x.Value)
            .Subscribe(x =>
            {
                PaletteHelper paletteHelper = new PaletteHelper();
                ITheme theme = paletteHelper.GetTheme();
                theme.SetBaseTheme((bool)x ? Theme.Dark : Theme.Light);
                paletteHelper.SetTheme(theme);
            })
            .AddTo(this.disposedValue);
    }

    public ReactiveProperty<bool> DarkMode { get; }
}

デバッグで確認

ライトモード

ダークモード

以上。