【備忘録】データトリガーによるスタイル変更

初めに

WPFのViewを作り込むとき、ViewModelのフラグに応じて表示を切り替えたり、
Viewである個所が表示されたら一緒に表示したいときありませんか？
それが、データトリガーを使うことで可能となります。
今回は、そのデータトリガーを使ったスタイル変更についてのメモです。

データトリガーとは何か

DataTriggerは、特定のデータの状態に基づいて、UIコンポーネントの見た目や動作を変更できるものです。
簡単に言うと、ある条件が満たされたときに「何かをする」というルールを作ることができます。

実際のコード

以下、ViewModelのフラグに応じて表示を切り替える例です。
この例では、ボタンの背景色を緑色、赤色に切り替えています。

MainWindow.xaml

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="DataTrigger with ViewModel" Height="200" Width="300">
    <Window.DataContext>
        <local:MainViewModel /> <!-- ViewModelをデータコンテキストに設定 -->
    </Window.DataContext>
    <Window.Resources>
        <Style x:Key="ButtonStyle" TargetType="Button">
            <Setter Property="Background" Value="LightGray"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsEnabled}" Value="True">
                    <Setter Property="Background" Value="Green"/>
                </DataTrigger>
                <DataTrigger Binding="{Binding IsEnabled}" Value="False">
                    <Setter Property="Background" Value="Red"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Style="{StaticResource ButtonStyle}" Content="Toggle Color" Width="150" Height="40" 
                Command="{Binding ToggleEnabled}" Click="Button_Click"/>
    </Grid>
</Window>

MainViewModel.cs

using System.ComponentModel;
using System.Runtime.CompilerServices;
public class MainViewModel : INotifyPropertyChanged
{
    private bool isEnabled;
    public bool IsEnabled
    {
        get { return isEnabled; }
        set
        {
            isEnabled = value;
            OnPropertyChanged();
        }
    }
    public MainViewModel()
    {
        // 初期値を設定
        IsEnabled = true;
    }
    public void ToggleEnabled()
    {
        IsEnabled = !IsEnabled; // ボタンの状態を切り替える
    }

    // 以下は表示の切り替えをする為のもの
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

コードのポイント

View

• Window.ResourcesにButtonStyleを定義しています。
  ここで、データトリガーの条件も記載しています。

処理の流れ

• DataTriggerでBindingしているIsEnabledがTrueだと緑色になりFalseだと赤色になります。
• ボタンをクリックすると、ToggleEnabledメソッドを呼び出し、IsEnabledの値が切り替わります。

これにより、ViewModelのデータを元に表示を切り替えることが出来ました。

最後に

今回の例では、ViewModelをトリガーにしましたがViewのみでトリガーにすることも可能です。
以上、データトリガーによるスタイル変更のメモでした。