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="" />
<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>
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="" />
<TextBlock Style="{StaticResource ThemedBodyTextBlockStyle}" Margin="4" Text="Add to Shortlist" />
</StackPanel>
</Button.Content>
</Button>
So that the TextBlock
s in Button.Content
will use ContentPresenter
's Foreground
which can be changed in different VisualState
s.