Skip to main content
コメントに基づき一部追加
ソース リンク
user24307
user24307

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

<!--トグルボタンテンプレート-->
<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>
<!--トグルボタンテンプレート-->
<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>

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

<!--トグルボタンテンプレート-->
<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>
ソース リンク
user24307
user24307

ボタンの色によって文字色を変える

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


やりたいこと

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


現状

今までは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>



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


環境

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