소개

MaterialDesign을 사용하고 GroupBox를 사용하는 경우 ColorZoneAssist.Mode에서 색상을 변경할 수 있습니다.

xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"

<GroupBox x:Name="SampleGroupBox" Header="グループボックス"
          materialDesign:ColorZoneAssist.Mode="PrimaryLight"/>

이런 느낌의 GroupBox가 됩니다.

이번 과제

그래서 이번에는이 GroupBox의 색상을 CheckBox가 체크되었을 때 변경하고 싶었습니다.

예를 들어 체크가 있을 때 Background를 바꾸면 이런 식으로 할 수 있습니다.

    <GroupBox x:Name="SampleGroupBox" Header="グループボックス"
            materialDesign:ColorZoneAssist.Mode="PrimaryLight">
        <GroupBox.Style>
            <Style TargetType="{x:Type GroupBox}" BasedOn="{StaticResource MaterialDesignGroupBox}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Path=IsChecked, ElementName=SampleCheck}" Value="True">
                        <Setter Property="Background" Value="PaleGreen"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </GroupBox.Style>
        <CheckBox x:Name="SampleCheck"
                Content="チェック"
                HorizontalAlignment="Left"/>
    </GroupBox>

체크하면 배경색이 바뀌고 있음을 알 수 있습니다.

그래서 Setter Property="materialDesign:ColorZoneAssist.Mode"Value="Accent"라고 하면 어떨까라고 생각했습니다.

           ...中略...
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Path=IsChecked, ElementName=SampleCheck}" Value="True">
                        <Setter Property="materialDesign:ColorZoneAssist.Mode" Value="Accent"/>
                    </DataTrigger>
                </Style.Triggers>
           ...中略...

그런데 이것은 작동하지 않았습니다.

코드 숨김으로 해결했습니다.

또 다른 방법이 있을지도 모르지만 결국 생각해 낸 것은 코드 숨김에서하는 것이 었습니다.

우선 xaml측

    <GroupBox x:Name="SampleGroupBox" Header="グループボックス"
                materialDesign:ColorZoneAssist.Mode="PrimaryLight">
        <CheckBox x:Name="SampleCheck"
                    Content="チェック"
                    Checked="SampleCheck_Checked"
                    Unchecked="SampleCheck_Unchecked"
                    HorizontalAlignment="Left"/>
    </GroupBox>

CheckBox에서 Checked 및 Unchecked 사용
코드 비하인드 측은 다음과 같습니다.

        private void SampleCheck_Checked(object sender, RoutedEventArgs e)
        {
            MaterialDesignThemes.Wpf.ColorZoneAssist.SetMode(this.SampleGroupBox, MaterialDesignThemes.Wpf.ColorZoneMode.Accent);
        }

        private void SampleCheck_Unchecked(object sender, RoutedEventArgs e)
        {
            MaterialDesignThemes.Wpf.ColorZoneAssist.SetMode(this.SampleGroupBox, MaterialDesignThemes.Wpf.ColorZoneMode.PrimaryLight);
        }

MaterialDesignThemes.Wpf.ColorZoneAssist.SetMode에서 ColoZoneAssist를 설정하는 컨트롤과 값을 설정합니다.
이제 다음과 같이 디스플레이를 동적으로 변경할 수 있습니다.