按下时按钮前景色更改

Posted 2023-04-12

【中文标题】按下时按钮前景色更改

【英文标题】：Button Foreground color change on Pressed

【发布时间】：2016-12-11 13:48:18

【问题描述】：

我正在编写一个 Windows 10 UWP 应用程序。我创建了一个按钮，其中包含带有两个文本块的堆栈面板。我想在按下时更改这些文本块的前景。

我修改了默认按钮样式。因此，单击此按钮时，BorderBrush 会发生变化，但文本块的前景不会。

<Button Command="Binding" Style="StaticResource Button|SecondaryPurpleButtonStyle" >
  <Button.Content>  
    <StackPanel Orientation="Horizontal">
      <TextBlock Margin="4" Style="StaticResource TextBlock|MenuIconTextBlockStyle" Foreground="StaticResource Color|BrandLogoPurpleSolidColorBrush"
      Text="&#xE734;" />
      <TextBlock Style="StaticResource ThemedBodyTextBlockStyle"  Foreground="StaticResource Color|BrandLogoPurpleSolidColorBrush"
      Margin="4"  Text="Add to Shortlist" />     
    </StackPanel>  
  </Button.Content>
</Button>

风格：

<Style x:Key="Button|SecondaryPurpleButtonStyle"
       TargetType="Button">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Foreground" Value="StaticResource Color|BrandLogoPurpleSolidColorBrush" />
    <Setter Property="BorderBrush" Value="StaticResource Color|BrandLogoPurpleSolidColorBrush" />
    <Setter Property="BorderThickness" Value="ThemeResource ButtonBorderThemeThickness" />
    <Setter Property="Padding" Value="8,4,8,4" />
    <Setter Property="HorizontalAlignment" Value="Left" />

    <Setter Property="HorizontalContentAlignment" Value="Center" />

    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="FontFamily" Value="ThemeResource ContentControlThemeFontFamily" />
    <Setter Property="FontWeight" Value="Normal" />
    <Setter Property="FontSize" Value="ThemeResource ControlContentThemeFontSize" />
    <Setter Property="UseSystemFocusVisuals" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid x:Name="RootGrid"
                      Background="TemplateBinding Background">
                    <ContentPresenter x:Name="ContentPresenter"
                                      HorizontalContentAlignment="TemplateBinding HorizontalContentAlignment"
                                      VerticalContentAlignment="TemplateBinding VerticalContentAlignment"
                                      AutomationProperties.AccessibilityView="Raw"
                                      BorderBrush="TemplateBinding BorderBrush"
                                      BorderThickness="0.7"
                                      Content="TemplateBinding Content"



                                      ContentTemplate="TemplateBinding ContentTemplate"
                                      ContentTransitions="TemplateBinding ContentTransitions"
                                      Padding="TemplateBinding Padding" />
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="StaticResource BrandLogoOrangePointerChangeSolidColorBrush"/>
                                    </ObjectAnimationUsingKeyFrames>-->
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
                                                                   Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="StaticResource Color|BrandLogoLightestPurplePointerChangeSolidColorBrush" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="StaticResource OLXLogoOrangeSolidColorBrush"/>
                                    </ObjectAnimationUsingKeyFrames>-->
                                    <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
                                                                   Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="StaticResource Color|BrandLogoPurpleSolidColorBrush" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                   Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="StaticResource Color|BrandLogoPurpleSolidColorBrush" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                   Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="White" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
                                                                   Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="ThemeResource SystemControlBackgroundBaseLowBrush" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                   Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="ThemeResource SystemControlDisabledBaseLowBrush" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                   Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                Value="ThemeResource SystemControlDisabledTransparentBrush" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

【参考方案1】：

在您的 XAML 代码中，您已将 TextBlock 的 Foreground 属性显式设置为 StaticResource Color|BrandLogoPurpleSolidColorBrush。所以前景不会改变。

为确保文本块的前景可以更改为BorderBrush，请删除TextBlock 中的Foreground 属性，并确保您没有在TextBlock 的样式中设置Foreground 属性。

<Button Command="Binding" Style="StaticResource Button|SecondaryPurpleButtonStyle" >
  <Button.Content>  
    <StackPanel Orientation="Horizontal">
      <TextBlock Margin="4" Style="StaticResource TextBlock|MenuIconTextBlockStyle" Text="&#xE734;" />
      <TextBlock Style="StaticResource ThemedBodyTextBlockStyle" Margin="4"  Text="Add to Shortlist" />     
    </StackPanel>  
  </Button.Content>
</Button>

这样Button.Content中的TextBlocks将使用ContentPresenter的Foreground，可以在不同的VisualStates中更改。