wpf 如何在 Expression Blend 中针对不同状态更改按钮的文本颜色？

How do I change the text color of a button for different states in Expression Blend?

提问by John Rooney

I'm 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 such as mouseover and checked. However, when I'm editing the template and I select the contentPresenter, the only brush is OpacityMask and it is not affected by any brush color changes.

我还在学习 Blend，所以请耐心等待。我在 WPF 项目中有一个切换按钮，我需要更改不同状态的文本颜色，例如鼠标悬停和选中。但是，当我编辑模板并选择 contentPresenter 时，唯一的画笔是 OpacityMask，它不受任何画笔颜色更改的影响。

I can of course change the text color by editing the style, but this is not useful as it is within the states I'm interesting in editing.

我当然可以通过编辑样式来更改文本颜色，但这没有用，因为它在我感兴趣的状态内进行编辑。

Basically, I simply want the text of the button to change on mouseover, hover, etc, this seems a reasonable thing to do, but the OpacityMask Brush of the ContentPresenter cannot be edited.

基本上，我只是希望按钮的文本在鼠标悬停、悬停等时更改，这似乎是合理的做法，但无法编辑 ContentPresenter 的 OpacityMask Brush。

Someone mentioned to change the ContentPresenter into a ContentControl. This does work, but I now cannot edit the text for an instance of the button. Do I have to link the ContentControl to something?

有人提到将 ContentPresenter 更改为 ContentControl。这确实有效，但我现在无法编辑按钮实例的文本。我是否必须将 ContentControl 链接到某些内容？

Many thanks for any help. I'm stuck right here for a few hours and I've been searching everywhere for the answer, to no avail

非常感谢您的帮助。我被困在这里几个小时，我一直在到处寻找答案，但无济于事

采纳答案by Viv

You can do what your looking for without having to use a ContentControland by just using the VisualStateManager

你可以做你想要的，而不必使用 aContentControl并且只使用VisualStateManager

I can of course change the text color by editing the style, but this is not useful as it is within the states I'm interesting in editing.

我当然可以通过编辑样式来更改文本颜色，但这没有用，因为它在我感兴趣的状态内进行编辑。

So say for example the state to apply a new Foregroundcolor to the text of your Buttonis MouseOver,

因此，例如，将新Foreground颜色应用于文本的状态Button是MouseOver，

• Firstly Blend does not create a Brushresource for Button.MouseOver.Foregroundwhen editing a Buttontemplate.

• 首先，Blend在编辑模板时不会创建Brush资源。Button.MouseOver.ForegroundButton

so let's create one. (Just add the following line along with the other brush resources)

所以让我们创建一个。（只需将以下行与其他画笔资源一起添加）

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

• Now we can apply a Storyboardto the TextElement.Foregroundof the contentPresenter.

• 现在我们可以将 aStoryboard应用于TextElement.Foreground的contentPresenter。

so your VSM will look like:

所以你的 VSM 看起来像：

<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 that's it.

就是这样。

Do note what we're doing here would be fine onlywhen the Contentof the Buttonis just text, but since that's what your usage is as mentioned in your question, you should be fine.

的确注意到我们在这里做什么会被罚款仅当Content的Button是文本，但因为这是您的使用是什么在你的问题中提到，你应该罚款。

Sidenote:

边注：

You can do the exact same thing by just switching the ContentPresenterto a TextBlockin the ControlTemplate.

您可以通过只切换做同样的事情ContentPresenter到TextBlock的ControlTemplate。

If you need the Foregroundto be available for any Contentof the Button, then yeh just switch the ContentPresenterto a ContentControland you can still your VSM Storyboard's in a very similar way.

如果你需要的Foreground是可用于任何Content的Button，然后叶刚切换ContentPresenter到ContentControl，你仍然可以在故事板VSM在一个非常类似的方式。

Update:

更新：

To switch the ContentPresenterto a ContentControl, in your ControlTemplatejust switch the actual element with the new one.

要切换ContentPresenter到 a ContentControl，ControlTemplate只需将实际元素与新元素切换即可。

<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>

to:

到：

<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 would have to update their properties accordingly like for eg ContentControldoes not support RecognizesAccessKeysand it also needs Content="{TemplateBinding Content}"set on it to actually show the content. With a ContentPresenterthe Contentproperty is set implicitly.

您必须相应地更新它们的属性，例如ContentControl不支持RecognizesAccessKeys，并且还需要对其进行Content="{TemplateBinding Content}"设置以实际显示内容。随着ContentPresenter该Content属性隐式设置。

回答by Kapitán Mlíko

Foreground property is present in Style. So you can edit Style and there you can set Foreground. It could be something like this

前景属性存在于样式中。所以你可以编辑 Style 并在那里你可以设置Foreground. 它可能是这样的

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

Or if you want to change it in ControlTemplatethen you can do it like this.

或者如果你想改变它，ControlTemplate那么你可以这样做。

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

So in expression blend you do it like this

所以在表达混合中你这样做

1. Locate your Style in the Resourcespanel, and then click the Editresource button next to the resource. Or right-click and choose Edit.
2. Add trigger in Triggerspanel.
3. Go to Propertiespanel and change Foreground property.

1. 在资源面板中找到您的样式，然后单击资源旁边的编辑资源按钮。或右键单击并选择编辑。
2. 在触发器面板中添加触发器。
3. 转到“属性”面板并更改“前景”属性。