[Q&A] MVVMパターンでStyleを動的に変更する方法

MVVMパターンでStyleを動的に変更する方法

解決したいこと

MaterialDesignThemeを使用したWPFアプリケーションで、フラグによってボタンの見た目を動的に変化させたいと思っています。
MVVMパターンで作成する際にこれを実現するための方法が知りたいです。

自分で試したこと

<Button Content="ボタン" Width="150" Margin="10">
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Style" Value="{StaticResource MaterialDesignPaperButton}"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsRaisedButton}" Value="True">
                    <Setter Property="Style" Value="{StaticResource MaterialDesignRaisedButton}"/>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

上記のようなコードを試してみましたが、ArgumentException: Style オブジェクトは、適用するオブジェクトの Style プロパティに影響を与えることはできません。となって例外が発生しました。

1Answer

@anime_magic_2 posted at 2024-09-12

スタイルの中でそのスタイルを変更することはできないようなので、以下のようにしてみてはどうでしょうか？
Microsoft.Xaml.Behaviors.Wpfのパッケージが入っていなければ入れて、xmlns:i="http://schemas.microsoft.com/xaml/behaviorsを追加する必要があります。

処理としてはIsRaisedButtonがFalse,Trueの時にtestButtonのStyleに特定のスタイルを割り当てます。

<Window
    x:Class="WpfApp.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
    xmlns:local="clr-namespace:WpfApp"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="800"
    Height="450"
    mc:Ignorable="d">
    <Window.Resources>
        <!--  テスト用スタイル1  -->
        <Style x:Key="MaterialDesignPaperButton" TargetType="Button">
            <Setter Property="Background" Value="LightGray" />
            <Setter Property="Width" Value="150" />
        </Style>
        <!--  テスト用スタイル2  -->
        <Style x:Key="MaterialDesignRaisedButton" TargetType="Button">
            <Setter Property="Background" Value="LightBlue" />
            <Setter Property="Width" Value="200" />
        </Style>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <Button
                x:Name="testButton"
                Width="150"
                Margin="10"
                Content="ボタン"
                Style="{StaticResource MaterialDesignPaperButton}">
                <i:Interaction.Triggers>
                    <i:DataTrigger Binding="{Binding IsRaisedButton.Value}" Value="False">
                        <i:ChangePropertyAction
                            PropertyName="Style"
                            TargetName="testButton"
                            Value="{StaticResource MaterialDesignPaperButton}" />
                    </i:DataTrigger>
                    <i:DataTrigger Binding="{Binding IsRaisedButton.Value}" Value="True">
                        <i:ChangePropertyAction
                            PropertyName="Style"
                            TargetName="testButton"
                            Value="{StaticResource MaterialDesignRaisedButton}" />
                    </i:DataTrigger>
                </i:Interaction.Triggers>
            </Button>
        </StackPanel>
    </Grid>
</Window>

1Like

Comments

@sadattidesu
Questioner
ありがとうございます！
教えていただいた方法でやりたかったことができました。

Are you sure you want to delete the question?