Windows 8 App, change colour of BackButtonStyle - xaml

Question

I'm creating a Windows store app which requests the Dark theme by default. This is great apart from one of the pages needs to be white. I placed everything inside a grid and changed the background to white.. everything is working fine, apart from my navigation button is styled as:
<Button Foreground="Black" x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}" />
{StaticResource BackButtonStyle} returns a white button (due to my Apps Dark theme), so the back button is invisible against the white background.
How can I change the colour of this back button to black? i.e so it will show a black arrow inside a black circle.
I've tried creating my own style in StandardStyles.xaml without any joy:
<Style x:Key="PortraitBackButtonStyle" TargetType="Button" BasedOn="{StaticResource BackButtonStyle}">
<Setter Property="Margin" Value="26,0,26,36"/>
</Style>
Thanks!

Answer 1

Put this style in StandardStyles.xaml file and use it in your back button
<Color x:Key="Color1">#ffffff</Color>
<Color x:Key="Color2">#000000</Color>
<Color x:Key="Color3">#666666</Color>
<SolidColorBrush x:Key="MyBackButtonNormalBrush" Color="{StaticResource Color2}"/>
<SolidColorBrush x:Key="MyBackButtonBackgroundBrush" Color="{StaticResource Color1}"/>
<SolidColorBrush x:Key="MyBackButtonHoverBrush" Color="{StaticResource Color3}"/>
<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">
<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="{StaticResource MyBackButtonHoverBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalGlyph" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MyBackButtonNormalBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundGlyph" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource MyBackButtonNormalBrush}"/>
</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 Margin="-1,-16,0,0">
<TextBlock x:Name="BackgroundGlyph" Text="" Foreground="{StaticResource MyBackButtonBackgroundBrush}"/>
<TextBlock x:Name="NormalGlyph" Text="{StaticResource BackButtonGlyph}" Foreground="{StaticResource MyBackButtonNormalBrush}"/>
<TextBlock x:Name="ArrowGlyph" Text="" Foreground="{StaticResource MyBackButtonBackgroundBrush}" 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"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Answer 2

if Your Background is white
You Can write at Back Button Property the Following Code :
<Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
RequestedTheme="Light"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>

Answer 3

There is an obvious solution – to re-style controls. But you don't want to type style name every time you need to add control to UI. Also you usually use input controls on a dark background so you don’t even need two different styles. In this case a different approach can be used.
The solution:
First, open:
C:\Program Files (x86)\Windows Kits\8.0\Include\winrt\xaml\design\themeresources.xaml
and search for "Dark" ResourceDictionary declaration. Copy all SolidColorBrush object definitions associated with buttonsa and finally paste all the brushes into your resource dictionary, and you can use it.
Source:: Mixing themes in XAML Metro apps

Answer 4

To apply Light theme/Dark theme(as per your requirement), just copy the following code into StandardStyles.xaml and do change the respective resoluce
1)For Light Theme
<SolidColorBrush x:Key="AppBarBackgroundThemeBrushLight" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="AppBarBorderThemeBrushLight" Color="#FFFFFFFF" />
<SolidColorBrush x:Key="AppBarItemBackgroundThemeBrushLight" Color="Transparent" />
<SolidColorBrush x:Key="AppBarItemDisabledForegroundThemeBrushLight" Color="#66000000" />
<SolidColorBrush x:Key="AppBarItemForegroundThemeBrushLight" Color="#FF000000" />
<SolidColorBrush x:Key="AppBarItemPointerOverBackgroundThemeBrushLight" Color="#3D000000" />
<SolidColorBrush x:Key="AppBarItemPointerOverForegroundThemeBrushLight" Color="#FF000000" />
<SolidColorBrush x:Key="AppBarItemPressedForegroundThemeBrushLight" Color="#FFFFFFFF" />
For Dark Theme
<SolidColorBrush x:Key="AppBarBackgroundThemeBrushDark" Color="{StaticResource SystemColorButtonFaceColor}" />
<SolidColorBrush x:Key="AppBarBorderThemeBrushDark" Color="{StaticResource SystemColorHighlightColor}" />
<SolidColorBrush x:Key="AppBarItemBackgroundThemeBrushDark" Color="{StaticResource SystemColorButtonFaceColor}" />
<SolidColorBrush x:Key="AppBarItemDisabledForegroundThemeBrushDark" Color="{StaticResource SystemColorGrayTextColor}" />
<SolidColorBrush x:Key="AppBarItemForegroundThemeBrushDark" Color="{StaticResource SystemColorButtonTextColor}" />
<SolidColorBrush x:Key="AppBarItemPointerOverBackgroundThemeBrushDark" Color="{StaticResource SystemColorHighlightColor}" />
<SolidColorBrush x:Key="AppBarItemPointerOverForegroundThemeBrushDark" Color="{StaticResource SystemColorHighlightTextColor}" />
<SolidColorBrush x:Key="AppBarItemPressedForegroundThemeBrushDark" Color="{StaticResource SystemColorButtonFaceColor}" />
and accordingly change
AppBarItemForegroundThemeBrush to AppBarItemForegroundThemeBrushLight/AppBarItemForegroundThemeBrushDark
refer these links for customising the App Bar
Here and Here
It'll help you.

Answer 5

Within the code you could change the style via code after the controls have been initialized.
Cheers
Mark