CODEWITHSUNDEEP
xamlwindows-8windows-store-apps
Oliver Mahoney
Oliver Mahoney

Reputation: 706

Windows 8 App, change colour of BackButtonStyle

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!

Upvotes: 5

Views: 6924

Answers (5)

Maher Elhendy
Maher Elhendy

Reputation: 23

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

Upvotes: 1

Rahul Saksule
Rahul Saksule

Reputation: 417

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.

Upvotes: 0

Inder Kumar Rathore
Inder Kumar Rathore

Reputation: 39988

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="&#xE0A8;" Foreground="{StaticResource MyBackButtonBackgroundBrush}"/>
                        <TextBlock x:Name="NormalGlyph" Text="{StaticResource BackButtonGlyph}" Foreground="{StaticResource MyBackButtonNormalBrush}"/>
                        <TextBlock x:Name="ArrowGlyph" Text="&#xE0A6;" 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>

Upvotes: 4

Tomas Ramirez Sarduy
Tomas Ramirez Sarduy

Reputation: 17471

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

Upvotes: 0

markblue777
markblue777

Reputation: 879

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

Cheers Mark

Upvotes: -1

Related Questions