xaml - Windows 8 アプリ、BackButtonStyle の色を変更

Question

デフォルトでダークテーマを要求する Windows ストアアプリを作成しています。ページの 1 つを白くする必要があることを除けば、これは素晴らしいことです。すべてをグリッド内に配置し、背景を白に変更しました。ナビゲーションボタンが次のようにスタイルされていることを除けば、すべて正常に動作しています。

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

{StaticResource BackButtonStyle} は (Apps のダークテーマのため) 白いボタンを返すため、白い背景に対して戻るボタンは見えません。

この戻るボタンの色を黒に変更するにはどうすればよいですか? つまり、黒い円の中に黒い矢印が表示されます。

StandardStyles.xaml で独自のスタイルを作成しようとしましたが、喜びはありませんでした:

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

ありがとう！

score 4 · Accepted Answer

このスタイルを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>

score 1 · Accepted Answer

背景が白の場合は、Back Button プロパティに次のコードを記述できます。

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

score 0 · Accepted Answer

コントロールのスタイルを変更するという明白な解決策があります。しかし、UI にコントロールを追加する必要があるたびにスタイル名を入力する必要はありません。また、通常は暗い背景で入力コントロールを使用するため、2 つの異なるスタイルは必要ありません。この場合、別のアプローチを使用できます。

ソリューション：

まず、次を開きます。

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

「Dark」ResourceDictionary 宣言を検索します。ボタンに関連付けられているすべての SolidColorBrush オブジェクト定義をコピーし、最後にすべてのブラシをリソースディクショナリに貼り付けて、それを使用できるようにします。

ソース: : XAML Metro アプリでのテーマの混合

score 0 · Accepted Answer

(要件に応じて) ライトテーマ/ダークテーマを適用するには、次のコードを 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

アプリバーをカスタマイズするには、これらのリンクを参照してください。

それはあなたを助けるでしょう。

score -1 · Accepted Answer

コントロールが初期化された後、コード内でコードを介してスタイルを変更できます。

乾杯マーク

xaml - Windows 8 アプリ、BackButtonStyle の色を変更

5 に答える 5

ソリューション：

Related

Reference