Answered by:
how to modify the color of Goback Button

Question
-
I create a project for Store App using C++/XAML.
In the default project, background color is black, and text color and Goback button is White.
I want to modify those colors. For example, background is white, text and Goback button is black.
I can modify the color of background and text color easily.
But I cannot modify the color of the GoBack button.
The Goback button has Style="{StaticResource BackButtonStyle}".
Do I need to modify StandardStyle.xaml ??
Please advice !
kata.
Thursday, September 20, 2012 2:15 AM
Answers
-
- The GoBack button uses indeed the Style you mention.
- You can modify part of this Style as follows:<Page x:Class="App6.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App6" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Button Style="{StaticResource BackButtonStyle}" Background="Green" Foreground="Orange"/> </Grid> </Page>
-
In StandardStyle.xaml:
1.- Basic Colors
<Style x:Key="BackButtonStyle" TargetType="Button"> <Setter Property="MinWidth" Value="0"/> <Setter Property="Width" Value="48"/> <Setter Property="Height" Value="48"/> <Setter Property="Margin" Value="36,0,36,36"/> <Setter Property="VerticalAlignment" Value="Bottom"/> <Setter Property="FontFamily" Value="Segoe UI Symbol"/> <Setter Property="FontWeight" Value="Normal"/> <Setter Property="FontSize" Value="56"/> <Setter Property="AutomationProperties.AutomationId" Value="BackButton"/> <Setter Property="AutomationProperties.Name" Value="Back"/> <Setter Property="AutomationProperties.ItemType" Value="Navigation Button"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid x:Name="RootGrid" Background="Red"> <Grid Margin="-1,-16,0,0"> <TextBlock x:Name="BackgroundGlyph" Text="" Foreground="{TemplateBinding Background}"/> <TextBlock x:Name="NormalGlyph" Text="{StaticResource BackButtonGlyph}" Foreground="{TemplateBinding Foreground}"/> <TextBlock x:Name="ArrowGlyph" Text="" Foreground="{TemplateBinding Foreground}" Opacity="0"/> </Grid>
...
---
2.- VSM State-based colors: the VisualStateManager in the Style definition uses the 3 TextBlocks in order to obtain the correct visual effect when PointerOver, etc. So you will also have to adapt parts of the VSM like in:
<VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal" /> <VisualState x:Name="PointerOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="Blue"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalGlyph" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource BackButtonPointerOverForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState>
...
If you don't want to do this in StandardStyle.xaml, you can move your new style into a LocalStyle.xaml.
---
Here is a complete example for you to tune:
<Application x:Class="App6.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App6"> <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <!-- Styles that define common aspects of the platform look and feel Required by Visual Studio project and item templates --> <ResourceDictionary Source="Common/LocalStyles.xaml"/> <ResourceDictionary Source="Common/StandardStyles.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources> </Application>
- LocalStyles.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Style x:Key="MyBackButtonStyle" TargetType="Button"> <Setter Property="MinWidth" Value="0"/> <Setter Property="Width" Value="48"/> <Setter Property="Height" Value="48"/> <Setter Property="Margin" Value="36,0,36,36"/> <Setter Property="VerticalAlignment" Value="Bottom"/> <Setter Property="FontFamily" Value="Segoe UI Symbol"/> <Setter Property="FontWeight" Value="Normal"/> <Setter Property="FontSize" Value="56"/> <Setter Property="AutomationProperties.AutomationId" Value="BackButton"/> <Setter Property="AutomationProperties.Name" Value="Back"/> <Setter Property="AutomationProperties.ItemType" Value="Navigation Button"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid x:Name="RootGrid" Background="Red"> <Grid Margin="-1,-16,0,0"> <TextBlock x:Name="BackgroundGlyph" Text="" Foreground="{TemplateBinding Background}"/> <TextBlock x:Name="NormalGlyph" Text="{StaticResource BackButtonGlyph}" Foreground="{TemplateBinding Foreground}"/> <TextBlock x:Name="ArrowGlyph" Text="" Foreground="{TemplateBinding Foreground}" Opacity="0"/> </Grid> <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeEndLineCap="Square" StrokeDashArray="1,1" Opacity="0" StrokeDashOffset="1.5"/> <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeEndLineCap="Square" StrokeDashArray="1,1" Opacity="0" StrokeDashOffset="0.5"/> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal" /> <VisualState x:Name="PointerOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="Blue"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalGlyph" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource BackButtonPointerOverForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource BackButtonForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> <DoubleAnimation Storyboard.TargetName="ArrowGlyph" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/> <DoubleAnimation Storyboard.TargetName="NormalGlyph" Storyboard.TargetProperty="Opacity" To="0" Duration="0"/> </Storyboard> </VisualState> <VisualState x:Name="Disabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="FocusStates"> <VisualState x:Name="Focused"> <Storyboard> <DoubleAnimation Storyboard.TargetName="FocusVisualWhite" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/> <DoubleAnimation Storyboard.TargetName="FocusVisualBlack" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/> </Storyboard> </VisualState> <VisualState x:Name="Unfocused" /> <VisualState x:Name="PointerFocused" /> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </ResourceDictionary>
-
<Page x:Class="App6.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App6" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Button Style="{StaticResource MyBackButtonStyle}" Background="Green" Foreground="Orange"/> </Grid> </Page>
-
Thursday, September 20, 2012 8:17 AM
All replies
-
- The GoBack button uses indeed the Style you mention.
- You can modify part of this Style as follows:<Page x:Class="App6.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App6" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Button Style="{StaticResource BackButtonStyle}" Background="Green" Foreground="Orange"/> </Grid> </Page>
-
In StandardStyle.xaml:
1.- Basic Colors
<Style x:Key="BackButtonStyle" TargetType="Button"> <Setter Property="MinWidth" Value="0"/> <Setter Property="Width" Value="48"/> <Setter Property="Height" Value="48"/> <Setter Property="Margin" Value="36,0,36,36"/> <Setter Property="VerticalAlignment" Value="Bottom"/> <Setter Property="FontFamily" Value="Segoe UI Symbol"/> <Setter Property="FontWeight" Value="Normal"/> <Setter Property="FontSize" Value="56"/> <Setter Property="AutomationProperties.AutomationId" Value="BackButton"/> <Setter Property="AutomationProperties.Name" Value="Back"/> <Setter Property="AutomationProperties.ItemType" Value="Navigation Button"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid x:Name="RootGrid" Background="Red"> <Grid Margin="-1,-16,0,0"> <TextBlock x:Name="BackgroundGlyph" Text="" Foreground="{TemplateBinding Background}"/> <TextBlock x:Name="NormalGlyph" Text="{StaticResource BackButtonGlyph}" Foreground="{TemplateBinding Foreground}"/> <TextBlock x:Name="ArrowGlyph" Text="" Foreground="{TemplateBinding Foreground}" Opacity="0"/> </Grid>
...
---
2.- VSM State-based colors: the VisualStateManager in the Style definition uses the 3 TextBlocks in order to obtain the correct visual effect when PointerOver, etc. So you will also have to adapt parts of the VSM like in:
<VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal" /> <VisualState x:Name="PointerOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="Blue"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalGlyph" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource BackButtonPointerOverForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState>
...
If you don't want to do this in StandardStyle.xaml, you can move your new style into a LocalStyle.xaml.
---
Here is a complete example for you to tune:
<Application x:Class="App6.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App6"> <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <!-- Styles that define common aspects of the platform look and feel Required by Visual Studio project and item templates --> <ResourceDictionary Source="Common/LocalStyles.xaml"/> <ResourceDictionary Source="Common/StandardStyles.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources> </Application>
- LocalStyles.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Style x:Key="MyBackButtonStyle" TargetType="Button"> <Setter Property="MinWidth" Value="0"/> <Setter Property="Width" Value="48"/> <Setter Property="Height" Value="48"/> <Setter Property="Margin" Value="36,0,36,36"/> <Setter Property="VerticalAlignment" Value="Bottom"/> <Setter Property="FontFamily" Value="Segoe UI Symbol"/> <Setter Property="FontWeight" Value="Normal"/> <Setter Property="FontSize" Value="56"/> <Setter Property="AutomationProperties.AutomationId" Value="BackButton"/> <Setter Property="AutomationProperties.Name" Value="Back"/> <Setter Property="AutomationProperties.ItemType" Value="Navigation Button"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid x:Name="RootGrid" Background="Red"> <Grid Margin="-1,-16,0,0"> <TextBlock x:Name="BackgroundGlyph" Text="" Foreground="{TemplateBinding Background}"/> <TextBlock x:Name="NormalGlyph" Text="{StaticResource BackButtonGlyph}" Foreground="{TemplateBinding Foreground}"/> <TextBlock x:Name="ArrowGlyph" Text="" Foreground="{TemplateBinding Foreground}" Opacity="0"/> </Grid> <Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}" StrokeEndLineCap="Square" StrokeDashArray="1,1" Opacity="0" StrokeDashOffset="1.5"/> <Rectangle x:Name="FocusVisualBlack" IsHitTestVisible="False" Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}" StrokeEndLineCap="Square" StrokeDashArray="1,1" Opacity="0" StrokeDashOffset="0.5"/> <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualState x:Name="Normal" /> <VisualState x:Name="PointerOver"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="Blue"/> </ObjectAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalGlyph" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource BackButtonPointerOverForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> <VisualState x:Name="Pressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource BackButtonForegroundThemeBrush}"/> </ObjectAnimationUsingKeyFrames> <DoubleAnimation Storyboard.TargetName="ArrowGlyph" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/> <DoubleAnimation Storyboard.TargetName="NormalGlyph" Storyboard.TargetProperty="Opacity" To="0" Duration="0"/> </Storyboard> </VisualState> <VisualState x:Name="Disabled"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Visibility"> <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> </ObjectAnimationUsingKeyFrames> </Storyboard> </VisualState> </VisualStateGroup> <VisualStateGroup x:Name="FocusStates"> <VisualState x:Name="Focused"> <Storyboard> <DoubleAnimation Storyboard.TargetName="FocusVisualWhite" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/> <DoubleAnimation Storyboard.TargetName="FocusVisualBlack" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/> </Storyboard> </VisualState> <VisualState x:Name="Unfocused" /> <VisualState x:Name="PointerFocused" /> </VisualStateGroup> </VisualStateManager.VisualStateGroups> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </ResourceDictionary>
-
<Page x:Class="App6.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App6" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Button Style="{StaticResource MyBackButtonStyle}" Background="Green" Foreground="Orange"/> </Grid> </Page>
-
Thursday, September 20, 2012 8:17 AM -
Hi ForInfo,
Thank you for the comment.
I will check this later.
I suppose this should work..
Sorry, I'm working on different project currently..
kata.
Friday, September 21, 2012 9:29 AM