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

2023年7月28日 273次阅读

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

我当然可以通过编辑样式来更改文本颜色,但这没有用,因为它在我编辑时感兴趣的状态中.

基本上,我只是想在鼠标悬停,悬停等方面改变按钮的文本,这似乎是一件合理的事情,但是无法编辑ContentPresenter的OpacityMask画笔.

有人提到将ContentPresenter更改为ContentControl.这确实有效,但我现在无法编辑按钮实例的文本.我必须将ContentControl链接到某些东西吗？

非常感谢任何帮助.我被困在这里几个小时,我一直在寻找答案,无济于事

最佳答案 您无需使用ContentControl并只使用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.

所以说例如将新的Foreground颜色应用于Button的文本的状态是MouseOver,

>首先,在编辑Button模板时,Blend不会为Button.MouseOver.Foreground创建Brush资源.

所以让我们创建一个. (只需添加以下行以及其他画笔资源)

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

>现在我们可以将Storyboard应用于contentPresenter的TextElement.Foreground.

所以你的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>

就是这样.

请注意我们在这里做的事情只有当按钮的内容只是文本时才会好,但由于这就是你在问题中提到的用法,你应该没问题.

边注：

只需将ContentPresenter切换到ControlTemplate中的TextBlock即可完成同样的操作.

如果您需要Foreground可用于Button的任何内容,那么您只需将ContentPresenter切换到ContentControl,您仍然可以以非常类似的方式使用VSM Storyboard.

更新：

要将ContentPresenter切换为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>

至：

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

您必须相应地更新其属性,例如ContentControl不支持RecognizesAccessKeys,并且还需要在其上设置Content =“{TemplateBinding Content}”以实际显示内容.使用ContentPresenter,可以隐式设置Content属性.

点赞