【備忘録】マルチデータトリガー(MultiDataTrigger)によるスタイル変更

初めに

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

マルチデータトリガーとは何か

通常のトリガー(Trigger)やデータトリガー(DataTrigger)は単一の条件に基づいて動作しますが、マルチデータトリガーを使用すると、複数の条件がすべて満たされる場合にスタイルやプロパティを変更できます。

マルチデータトリガーを使うためには、次の要素を使います。
１．<MultiDataTrigger>タグ
マルチデータトリガーを定義するタグです。このタグを使うことで、複数の条件を持つトリガーを設定できます。

２．条件のリスト (<Condition>)
マルチデータトリガーの中に、評価する条件をリストとして記述します。各条件でバインディングプロパティをチェックし、特定の値を持つかどうかを確認します。

３．Setter
条件がすべて満たされたときに、適用するプロパティの変更を定義します。この部分で、どのプロパティが新しい値に設定されるかを指定します。

使用例

Viewである個所が全て非表示だったら一緒に非表示とする場合です。

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="Data Binding Example" Height="300" Width="350">
    <Window.DataContext>
        <local:TextViewModel />
    </Window.DataContext>
    <Grid>
        <!-- 3つのテキストブロックにバインド -->
        <TextBlock Text="Text 1" Margin="10" Visibility="{Binding Text1Visibility}" />
        <TextBlock Text="Text 2" Margin="10,40,10,0" Visibility="{Binding Text2Visibility}" />
        <TextBlock Text="Text 3" Margin="10,80,10,0" Visibility="{Binding Text3Visibility}" />
        <!-- すべてが非表示の場合に表示されるテキストブロック -->
       
<TextBlock x:Name="FinalTextBlock" Text="All texts are inactive."
                   Margin="10,120,10,0">
            <TextBlock.Style>
                <Style TargetType="TextBlock">
                    <Setter Property="Visibility" Value="Visible"/>
                    <Style.Triggers>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding Visibility, ElementName=Text1}" Value="Collapsed" />
                                <Condition Binding="{Binding Visibility, ElementName=Text2}" Value="Collapsed" />
                                <Condition Binding="{Binding Visibility, ElementName=Text3}" Value="Collapsed" />
                            </MultiDataTrigger.Conditions>
                            <Setter Property="Visibility" Value="Collapsed" />
                        </MultiDataTrigger>
                    </Style.Triggers>
                </Style>
            </TextBlock.Style>
        </TextBlock>
    </Grid>
</Window>

※ViewModelは割愛

コードのポイント

• Text1,2,3が表示がVisibilityのBindingで切り替わるようになっています。
• <MultiDataTrigger.Conditions>で、複数のデータの状態をみて、
  <Setter Property="Visibility" Value="Collapsed" />にしています。
  今回の場合は、すべてのテキストが非表示だったら、FinalTextBlockも非表示になります。

これにより、Viewの複数の表示状態を元に表示を切り替えることが出来ました。

最後に

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