0

記述するべき内容が不足していたら申し訳ありません。


やりたいこと

ボタンの色によって文字色を同時に変える方法を模索しています。


現状

今まではControlTemplateで、GridとRectangleでButtonの見た目を作っていました。
そしてButtonの上にTextblockを置いてButtonを実装しています。

・Control.Button.xaml(一部)

<ControlTemplate x:Key="RectangleButton" TargetType="Button">
    <Grid IsEnabled="{TemplateBinding IsEnabled}">
        <Rectangle Name="FillRectangle" Fill="{StaticResource AccentColorBrush}"
                   Height="30" Width="128"/>
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <VisualStateManager.VisualStateGroups>
        <!--省略-->

<!--ボタンスタイル-->
<Style x:Key="DialogButtonStyle" TargetType="{x:Type Button}" BasedOn="{StaticResource {x:Type Button}}">
    <Setter Property="Template" Value="{StaticResource RectangleButton}"/>
    <Setter Property="Margin" Value="5,0,0,0"/>
</Style>

・TestViewA.xaml(一部)

<!--リソース-->
<UserControl.Resources>
    <Style TargetType="TextBlock" BasedOn="{StaticResource DefaultDialogTextStyleKey}">
        <Setter Property="Width" Value="120"/>
    </Style>

    <Style TargetType="Button" BasedOn="{StaticResource DialogButtonStyle}"/>

    <Style x:Key="BottomStackPanel" TargetType="StackPanel">
        <Setter Property="Orientation" Value="Horizontal"/>
        <Setter Property="Margin" Value="0,5,0,5"/>
    </Style>
</UserControl.Resources>

<!--一部省略-->
    <Grid Grid.Row="2" Grid.Column="0">
        <StackPanel Style="{StaticResource BottomStackPanel}" HorizontalAlignment="Right">
            <Button Command="{Binding SaveCommand}"
                    IsEnabled="{Binding HasChanged}"
                    Name="SaveButton">
                <TextBlock Text="保存"
                           Style="{StaticResource TextButtonStyleKey}"/>
            </Button>
            <Button Command="{Binding CancelCommand}"
                    IsEnabled="{Binding HasChanged}"
                    Name="CancelButton">
                <TextBlock Text="キャンセル"
                           Style="{StaticResource TextButtonStyleKey}"/>
            </Button>
        </StackPanel>
    </Grid>


今回、「機能のON/OFFで見た目の色が変わるトグルボタン」を実装しようとしたのですが、
現在、ボタン上に配置している文字の色が別のスタイル(白色)を設定している為、
ボタンの色が明るくなると文字が見づらいです。
その為、トグルボタンの色によって文字色も変えたいと思ったのですが、
どう書けばいいか分からないのが現状です。

実際に実装するViewにTriggerでゴリゴリ書こうかと思ったのですが、
複数実装予定な為、テンプレートでまとめて見た目を作れないかなと思った次第です。
「この書き方じゃ無理、こっちの方がスマートで簡単な実装」等あれば
喜んでそちらに切り替えようと思っております。


実装の為に追加したコード

・Control.Button.xaml(一部)

<!--トグルボタンテンプレート-->
<ControlTemplate x:Key="ToggleButton" TargetType="ToggleButton">
    <Grid IsEnabled="{TemplateBinding IsEnabled}">
        <Rectangle Name="FillRectangle" Height="30" Width="128"
                   Fill="{StaticResource AccentColorBrush}"
                   Stroke="{StaticResource AccentColorBrush}" StrokeThickness="3"/>
        <!--
        このTextBlockのTextを実装側で変えられたらなあ、と思います。
        苦し紛れにContentPresenterを置いてますが意味が無い…
        -->
        <TextBlock Name="ToggleButtonText" Margin="0,0,0,1" FontSize="15" Foreground="White" FontWeight="Normal"/>
        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
    <ControlTemplate.Triggers>
        <!--
        他はVisualStateManagerで書いているのですが、
        IsCheckedとIsMouseOverを同時に見たいのでこれだけMultiTriggerで書いています。
        個人的には気持ち悪いとは思うのですがこういうものですかね?
        -->
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsChecked" Value="False"/>
                <Condition Property="IsMouseOver" Value="False"/>
            </MultiTrigger.Conditions>
            <Setter TargetName="FillRectangle" Property="Fill" Value="{StaticResource AccentColorBrush}"/>
            <Setter TargetName="FillRectangle" Property="Stroke" Value="{StaticResource AccentColorBrush}"/>
            <Setter TargetName="ToggleButtonText" Property="Foreground" Value="White"/>
        </MultiTrigger>

        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsChecked" Value="False"/>
                <Condition Property="IsMouseOver" Value="True"/>
            </MultiTrigger.Conditions>
            <Setter TargetName="FillRectangle" Property="Fill" Value="{StaticResource StringColorBrush}"/>
            <Setter TargetName="FillRectangle" Property="Stroke" Value="{StaticResource StringColorBrush}"/>
            <Setter TargetName="ToggleButtonText" Property="Foreground" Value="White"/>
        </MultiTrigger>

        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsChecked" Value="True"/>
                <Condition Property="IsMouseOver" Value="True"/>
            </MultiTrigger.Conditions>
            <Setter TargetName="FillRectangle" Property="Fill" Value="{StaticResource LightGrayBrush}"/>
            <Setter TargetName="FillRectangle" Property="Stroke" Value="{StaticResource StringColorBrush}"/>
            <Setter TargetName="ToggleButtonText" Property="Foreground" Value="{StaticResource StringColorBrush}"/>
        </MultiTrigger>

        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsChecked" Value="True"/>
                <Condition Property="IsMouseOver" Value="False"/>
            </MultiTrigger.Conditions>
            <Setter TargetName="FillRectangle" Property="Fill" Value="{StaticResource AccentColorBrush4}"/>
            <Setter TargetName="FillRectangle" Property="Stroke" Value="{StaticResource AccentColorBrush}"/>
            <Setter TargetName="ToggleButtonText" Property="Foreground" Value="{StaticResource AccentColorBrush}"/>
        </MultiTrigger>

    </ControlTemplate.Triggers>
</ControlTemplate>

<!--トグルボタンスタイル-->
<Style x:Key="ToggleButtonStyle" TargetType="{x:Type ToggleButton}">
    <Setter Property="Template" Value="{StaticResource ToggleButton}"/>
    <Setter Property="Margin" Value="2,2,2,2"/>
</Style>

・TextViewB.xaml(一部)

<UserControl.Resources>
    <ResourceDictionary>
        <Style TargetType="TextBlock" BasedOn="{StaticResource DefaultDialogTextStyleKey}" />
        <Style TargetType="ToggleButton" BasedOn="{StaticResource ToggleButtonStyle}"/>

        <Style x:Key="BaseStackPanel" TargetType="StackPanel">
            <Setter Property="Orientation" Value="Horizontal"/>
        </Style>
    </ResourceDictionary>
</UserControl.Resources>

<StackPanel DockPanel.Dock="Right"
            Style="{StaticResource BaseStackPanel}"
            VerticalAlignment="Top" Margin="0,10,20,0"
            HorizontalAlignment="Right">

    <ToggleButton IsEnabled="{Binding IsAreaEnable}"
                  Command="{Binding CreateArea}"
                  IsChecked="{Binding EnableToggleButton}"">
        <!--
        Buttonはクリックするとデザインが変わりますが、
        ↓のTextBlockの色が変わらない
        -->
        <TextBlock Name="ToggleButtonText" Text="テスト"/>
    </ToggleButton>
</StackPanel>




皆様のお知恵をお貸しいただければと思います。
どうぞよろしくお願いいたします。


環境

・Microsoft Visual Studio 2013 Express for Windows
・.NET Framework 4.5.1
・C# 5.0

3
  • 記載されているコードでは「ToggleButtonのスタイル」に応じて「ToggleButton内のTextBlockの文字色を変える」という現在でも実装されている動作を要求しているように見えてしまうのですが、実際のビジュアルツリーやスタイル変更の条件を追記していただけませんか。
    – pgrho
    Commented 2017年8月22日 3:54
  • 「現在のコードで質問内容はもう解決できている」とおっしゃっているのでしょうか? 実装している部分のコードを追記しましたので、ご確認いただけると幸いです。 スタイル変更の条件はpgrho様のおっしゃる通り、「ToggleButtonのスタイルに応じてToggleButton内のTextBlockの文字色を変える」ことです。しかし、現在はButtonは期待通り動作するのですが、同時にTextBlockが変わってくれないのです…。
    – user24307
    Commented 2017年8月22日 4:35
  • ControlTemplate内にTextBlockがあったのですでにスタイルを指定済みなのかと思いましたが、本命はContentPresenterというなのですね。失礼しました。
    – pgrho
    Commented 2017年8月22日 5:05

1 件の回答 1

0

TextBlock.Foregroundプロパティはアンビエントプロパティですので、明示しない限り暗黙に上位要素の設定を継承します。ですのでContentPresenterを内包する要素のControl.Foregroundを指定すればスタイルを外部から反映することができます。

ですのでControlTemplate.Triggers<Setter TargetName="ToggleButtonText" Property="Foreground" />からTargetNameを削除し、単純にToggleButton自体のプロパティを変更するようにしてください。

<ControlTemplate TargetType="ToggleButton">
    <Grid IsEnabled="{TemplateBinding IsEnabled}">
        <Rectangle Name="FillRectangle" Height="30" Width="128"
                    Fill="{StaticResource AccentColorBrush}"
                    Stroke="{StaticResource AccentColorBrush}" StrokeThickness="3" />

        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Grid>
    <ControlTemplate.Triggers>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsChecked" Value="False" />
                <Condition Property="IsMouseOver" Value="False" />
            </MultiTrigger.Conditions>
            <Setter TargetName="FillRectangle" Property="Fill" Value="{StaticResource AccentColorBrush}" />
            <Setter TargetName="FillRectangle" Property="Stroke" Value="{StaticResource AccentColorBrush}" />
            <Setter  Property="Foreground" Value="White" />
        </MultiTrigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsChecked" Value="False" />
                <Condition Property="IsMouseOver" Value="True" />
            </MultiTrigger.Conditions>
            <Setter TargetName="FillRectangle" Property="Fill" Value="{StaticResource StringColorBrush}" />
            <Setter TargetName="FillRectangle" Property="Stroke" Value="{StaticResource StringColorBrush}" />
            <Setter   Property="Foreground" Value="White" />
        </MultiTrigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsChecked" Value="True" />
                <Condition Property="IsMouseOver" Value="True" />
            </MultiTrigger.Conditions>
            <Setter TargetName="FillRectangle" Property="Fill" Value="{StaticResource LightGrayBrush}" />
            <Setter TargetName="FillRectangle" Property="Stroke" Value="{StaticResource StringColorBrush}" />
            <Setter   Property="Foreground" Value="{StaticResource StringColorBrush}" />
        </MultiTrigger>

        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsChecked" Value="True" />
                <Condition Property="IsMouseOver" Value="False" />
            </MultiTrigger.Conditions>
            <Setter TargetName="FillRectangle" Property="Fill" Value="{StaticResource AccentColorBrush4}" />
            <Setter TargetName="FillRectangle" Property="Stroke" Value="{StaticResource AccentColorBrush}" />
            <Setter   Property="Foreground" Value="{StaticResource AccentColorBrush}" />
        </MultiTrigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

追記

上記でプロパティが反映されないということですので、DefaultDialogTextStyleKeyForegroundの指定があって継承より優先されているのだと思います。

でしたらStyleが反映されないようにするか、RelativeSourceを使用したバインドを追加するかのどちらかだと思います。

Styleを上書きするにはResourcesの既定のスタイルを再定義するか、

<ToggleButton.Resources>
    <Style TargetType="TextBlock" />
</ToggleButton.Resources>

直接Styleを指定するなどしてください。

<TextBlock Style="{x:Null}" />

RelativeSourceの場合は以下のようになりますが、プロパティの数だけ該当要素に指定をしないといけないことに注意してください。

<TextBlock
    Foreground="{Binding RelativeSource={RelativeSource AncestorType=Control}, Path=Foreground}" />
2
  • 回答誠にありがとうございます。Control.Button.xamlを上記コードに修正してみましたが変わりありませんでした。相変わらずボタンのスタイルは変わりますが文字は変わりません。ご迷惑をおかけし大変申し訳ございませんが、もう少しご教授願えますでしょうか? Viewの方が何か足りないのでしょうか?
    – user24307
    Commented 2017年8月22日 6:15
  • 追記誠にありがとうございます。確かにDefaultDialogTextStyleKeyにForegroundの指定がありました。TextBlockのStyleを{x:null}にすることで解決しました。ありがとうございました。
    – user24307
    Commented 2017年8月22日 7:28

この質問に回答するには、ログインする必要があります。