How to change button text color for different states in Expression Blend?

Question

I am still learning Blend, so please bear with me. I have a toggle button in a WPF project and I need to change the text color for different states like mouseover and checked. However, when I edit the template and I select contentPresenter, the only brush is the OpacityMask and it is not affected by the color changes of the brush.

I can, of course, change the color of the text by editing the style, but this is not useful, because it is in states that are interesting to me in editing.

Basically, I just want the button text to change when you hover, hover, etc., this seems reasonable, but the OpacityMask from ContentPresenter cannot be edited.

Someone mentioned changing ContentPresenter in ContentControl. It really works, but now I can’t edit the text for the button instance. Should I associate ContentControl with something?

Thanks so much for any help. I was stuck here for several hours and I searched everywhere for an answer, to no avail.

Answer 1

You can do what you are looking for without using ContentControl and just using VisualStateManager

I can, of course, change the color of the text by editing the style, but this is not useful, because it is in states that are interesting to me in editing.

So, say, for example, to apply the new Foreground color to the text of your Button : MouseOver ,

• First, Blend does not create a Brush resource for Button.MouseOver.Foreground when editing a Button template.

so create it. (Just add the following line along with other brush resources)

 <SolidColorBrush x:Key="Button.MouseOver.Foreground" Color="Tomato" /> 

• Now we can apply the Storyboard to TextElement.Foreground contentPresenter .

so your VSM will look like this:

 <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal"/> <VisualState x:Name="MouseOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(TextElement.Foreground)"> <DiscreteObjectKeyFrame KeyTime="0"> <DiscreteObjectKeyFrame.Value> <SolidColorBrush Color="{Binding Source={StaticResource Button.MouseOver.Foreground}, Path=Color}" /> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Pressed"/> <VisualState x:Name="Disabled"/> </VisualStateGroup> </VisualStateManager.VisualStateGroups> 

and what is he.

Notice what we are doing here will only be fine when the Content from the Button is just text, but since your use is mentioned in your question, you should be fine.

Sidenote:

You can do the same just by switching the contentPresenter to TextBlock in the ControlTemplate .

If you need Foreground for any Content for Button , then ye just switch the contentPresenter to ContentControl , and you can still open your VSM layout in a very similar way.

Update

To switch the contentPresenter to a ContentControl , in your ControlTemplate simply switch the actual item to a new one.

 <ControlTemplate TargetType="{x:Type Button}"> ... <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/> ... </ControlTemplate> 

in

 <ControlTemplate TargetType="{x:Type Button}"> ... <ContentControl x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}"/> ... </ControlTemplate> 

you will need to update your properties accordingly, for example, ContentControl does not support RecognizesAccessKeys , and it also needs Content="{TemplateBinding Content}" to actually display the content. With contentPresenter Content property is set implicitly.

Answer 2

The foreground property is present in style. This way you can edit the style, and there you can set the Foreground . It could be something like this

 <Style.Triggers> <Trigger Property="IsChecked" Value="False"> <Setter Property="Foreground" Value="Blue"/> </Trigger> </Style.Triggers> 

Or if you want to change it in a ControlTemplate , then you can do it as follows.

 <Trigger Property="IsChecked" Value="True"> <Setter Property="TextBlock.Foreground" TargetName="contentPresenterName" Value="White"/> </Trigger> 

So in the blend expression you do it like this:

• Find your style in the Resources panel, and then click the Edit resource button next to the resource. Or right-click and select Modify .
• Add a trigger in the Triggers panel.
• Go to the Properties panel and change the Foreground property.