記述するべき内容が不足していたら申し訳ありません。
やりたいこと
ボタンの色によって文字色を同時に変える方法を模索しています。
現状
今までは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
ToggleButton
のスタイル」に応じて「ToggleButton
内のTextBlock
の文字色を変える」という現在でも実装されている動作を要求しているように見えてしまうのですが、実際のビジュアルツリーやスタイル変更の条件を追記していただけませんか。ControlTemplate
内にTextBlock
があったのですでにスタイルを指定済みなのかと思いましたが、本命はContentPresenter
というなのですね。失礼しました。