none
Triggerを使用してContentプロパティを変更した場合の挙動について RRS feed

  • 質問

  • ToggleボタンのCheck状態に応じて、ボタン上に表示する図形を変更したいと考えています。

    実現方法として、Triggerを使用してContentプロパティを入れ替えるという方法を試しました。

    また、表示している図形の色は、有効状態などの状況に応じて通常のボタン同様に自動で変化してほしかったため、図形のFillプロパティを親ToggleボタンのForegroundとバインドしました。

    その状態で動作を試したところ、チェック状態に応じて図形は変わるのですが、チェック状態時の図形の色がうまく取得できずに透明となてしまいます。

    Triggerによって丸ごとContentプロパティを差し替えているため、差し替え後の図形オブジェクトが親Toggleボタンを探すことができないのかなと思うのですが、どのような解決方法がありますでしょうか?

    下記にXamlを記します。

    <Window x:Class="WpfApplication2.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="350" Width="525">
        <Grid>
            <StackPanel>
                <CheckBox x:Name="chkEnable" Content="ボタン有効化" HorizontalAlignment="Center"/>
                
                <ToggleButton IsEnabled="{Binding ElementName=chkEnable, Path=IsChecked}" Height="40" Width="40">
                    <ToggleButton.Style>
                        <Style TargetType="ToggleButton">
                            <Setter Property="Content">
                                <Setter.Value>
                                    <Rectangle Width="20" Height="20" Fill="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ToggleButton}, Path=Foreground}" />
                                </Setter.Value>
                            </Setter>
                            <Style.Triggers>
                                <Trigger Property="IsChecked" Value="True">
                                    <Setter Property="Content">
                                        <Setter.Value>
                                            <Ellipse Width="20" Height="20" Fill="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ToggleButton}, Path=Foreground}" />
                                        </Setter.Value>
                                    </Setter>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </ToggleButton.Style>
                </ToggleButton>
            </StackPanel>
            
        </Grid>
    </Window>
    

    2015年3月11日 10:09

回答

  • こんにちは。

    ContentではなくContentTemplateを入れ替えてはどうでしょうか。

    <ToggleButton IsEnabled="{Binding ElementName=chkEnable, Path=IsChecked}" Height="40" Width="40">
        <ToggleButton.Style>
            <Style TargetType="ToggleButton">
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Rectangle Width="20" Height="20" Fill="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ToggleButton}, Path=Foreground}" />
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="ContentTemplate">
                            <Setter.Value>
                                <DataTemplate>
                                    <Ellipse Width="20" Height="20" Fill="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ToggleButton}, Path=Foreground}" />
                                </DataTemplate>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ToggleButton.Style>
    </ToggleButton>
    

    • 回答としてマーク okkuu 2015年3月12日 2:06
    2015年3月11日 11:10
    モデレータ

すべての返信

  • こんにちは。

    ContentではなくContentTemplateを入れ替えてはどうでしょうか。

    <ToggleButton IsEnabled="{Binding ElementName=chkEnable, Path=IsChecked}" Height="40" Width="40">
        <ToggleButton.Style>
            <Style TargetType="ToggleButton">
                <Setter Property="ContentTemplate">
                    <Setter.Value>
                        <DataTemplate>
                            <Rectangle Width="20" Height="20" Fill="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ToggleButton}, Path=Foreground}" />
                        </DataTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="IsChecked" Value="True">
                        <Setter Property="ContentTemplate">
                            <Setter.Value>
                                <DataTemplate>
                                    <Ellipse Width="20" Height="20" Fill="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ToggleButton}, Path=Foreground}" />
                                </DataTemplate>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ToggleButton.Style>
    </ToggleButton>
    

    • 回答としてマーク okkuu 2015年3月12日 2:06
    2015年3月11日 11:10
    モデレータ
  • Tak1wa様

    ありがとうございます。ContentTemplateを使用するこどで、目的の動作を行うことができました!

    Content自体に図形を割り当てるのではなく、Contentの外観として図形を割り当てればいいのですね。

    2015年3月12日 2:05