Search code examples
c#xamlwindows-phone-8.1windows-phoneuwp

Button Foreground color change on Pressed


I am writing a Windows 10 UWP App. I created a button which contains stackpanel with two textblocks. I want to change foreground of these textblocks on pressed.

I modified Default Button Style. so, on clicking of this button, BorderBrush is changing but foreground of textblocks is not.

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

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

Solution

  • In your XAML code, you have set TextBlock's Foreground property to {StaticResource Color|BrandLogoPurpleSolidColorBrush} explicitly. So the foreground won't change.

    To make sure the foreground of textblocks can be changed as BorderBrush, please delete Foreground property in your TextBlock and also make sure you didn't set Foreground property in TextBlock's style.

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

    So that the TextBlocks in Button.Content will use ContentPresenter's Foreground which can be changed in different VisualStates.