Windows 8 App，改变 BackButtonStyle 的颜色

Question

我正在创建一个默认请求黑暗主题的 Windows 商店应用程序。这很好，除了其中一页需要是白色的。我将所有内容都放在网格中并将背景更改为白色.. 一切正常，除了我的导航按钮样式为：

<Button Foreground="Black" x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}" />

{StaticResource BackButtonStyle} 返回一个白色按钮（由于我的 Apps Dark 主题），因此后退按钮在白色背景下是不可见的。

如何将此后退按钮的颜色更改为黑色？也就是说，它会在黑色圆圈内显示一个黑色箭头。

我尝试在 StandardStyles.xaml 中创建自己的样式，但没有任何乐趣：

<Style x:Key="PortraitBackButtonStyle" TargetType="Button" BasedOn="{StaticResource BackButtonStyle}">
    <Setter Property="Margin" Value="26,0,26,36"/>
</Style>

谢谢！

Answer 1

将此样式放入StandardStyles.xaml 文件并在您的后退按钮中使用它

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

Answer 2

如果您的背景是白色的 您可以在后退按钮属性中编写以下代码：

   <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

有一个明显的解决方案——重新设置控件的样式。但是您不想每次需要向 UI 添加控件时都键入样式名称。此外，您通常在深色背景上使用输入控件，因此您甚至不需要两种不同的样式。在这种情况下，可以使用不同的方法。

解决办法：

首先，打开：

C:\Program Files (x86)\Windows Kits\8.0\Include\winrt\xaml\design\themeresources.xaml

并搜索“Dark” ResourceDictionary 声明。复制所有与buttona关联的SolidColorBrush对象定义，最后将所有画笔粘贴到你的资源字典中，就可以使用了。

来源：：Mixing themes in XAML Metro apps

Answer 4

要应用浅色主题/深色主题（根据您的要求），只需将以下代码复制到 StandardStyles.xaml 并更改相应的分辨率

1)对于浅色主题

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

对于深色主题

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

并相应地改变

AppBarItemForegroundThemeBrush to AppBarItemForegroundThemeBrushLight/AppBarItemForegroundThemeBrushDark

请参阅这些链接以自定义应用栏 Here 和 Here

它会帮助你。

Answer 5

在代码中，您可以在控件初始化后通过代码更改样式。

干杯 标记