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

    • Edited by ForInfo Thursday, September 20, 2012 8:18 AM
    • Marked as answer by kata._ Friday, September 21, 2012 9:22 AM
    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="&#xE0A8;" Foreground="{TemplateBinding Background}"/> <TextBlock x:Name="NormalGlyph" Text="{StaticResource BackButtonGlyph}" Foreground="{TemplateBinding Foreground}"/> <TextBlock x:Name="ArrowGlyph" Text="&#xE0A6;" 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="&#xE0A8;" Foreground="{TemplateBinding Background}"/>
                                <TextBlock x:Name="NormalGlyph" Text="{StaticResource BackButtonGlyph}" Foreground="{TemplateBinding Foreground}"/>
                                <TextBlock x:Name="ArrowGlyph" Text="&#xE0A6;" 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>
    -

    • Edited by ForInfo Thursday, September 20, 2012 8:18 AM
    • Marked as answer by kata._ Friday, September 21, 2012 9:22 AM
    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