windows - Windows8ストアアプリの設定バーのボタンスタイル

Question

Windowsストアアプリを作成しています。設定でフライアウトを作成するためにcallistoライブラリを使用します。ボタンのスタイリングに問題があります。背景の上にマウスを置くと、フォントが白になります...

写真を参照してください（マウスは2番目のボタンの上にあります）：ポミドロの設定

これは私のXAMLファイルです：

<UserControl
x:Class="Pomidoro.PomidoroUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Pomidoro"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">

<Grid>
    <StackPanel x:Name="FlyoutContent">
        <Button 
            Name="ChoosePomidoroButton" 
            Click="ChoosePomidoroButton_Click"
            Content="Choose pomidoro image..."    
            Background="LightGray"
            Foreground="Black"
            BorderBrush="Black"           
            />
        <Button 
            Name="DefaultPomidoroButton" 
            Click="DefaultPomidoroButton_Click"
            Content="Set default pomidoro image"  
            Background="LightGray"
            Foreground="Black"
            BorderBrush="Black"
            />
    </StackPanel>
</Grid>

これが、App.xaml.csでフライアウトを作成する方法です。

            // Add an Pomidoro settings
        var pomidoro = new SettingsCommand("pomidoro", "Pomidoro image", (handler) =>
        {
            var settings = new SettingsFlyout();
            settings.Content = new PomidoroUserControl();
            settings.HeaderText = "Pomidoro";
            settings.IsOpen = true;
        });

        args.Request.ApplicationCommands.Add(pomidoro);

デフォルトのスタイルを使おうとしたら...

<Button 
            Name="DefaultPomidoroButton" 
            Click="DefaultPomidoroButton_Click"
            Content="Set default pomidoro image"
            />

...背景、境界線、前景は白でした...そしてユーザーは何も見ることができませんでした。

灰色のボタンを持つようにデフォルトのスタイルを適用するにはどうすればよいですか（ストアの多くのアプリにあるように）？

score 2 · Accepted Answer

問題は、アプリケーションがダークテーマを使用している場合、デフォルトのボタンスタイルが白い前景ブラシとボーダーブラシを使用し、透明な背景ブラシを使用することです。ページでは、デフォルトのボタンスタイルは問題なく表示されます。

暗い背景のデフォルトボタンスタイルのスクリーンショット

ただし、Callisto SettingsFlyout のコンテンツペインでは、コンテンツペインの背景が白であるため、ボタンは表示されません。UserControl でボタンの Foreground および Background プロパティを手動で設定しているため、これに気付いたに違いありません。

解決策は、デフォルトのボタンテンプレートを使用して、SettingsFlyout のボタンに新しいスタイルを定義することです。デフォルトのスタイルは、64 ビットマシンでは次の場所にあります。

C:\Program Files (x86)\Windows Kits\8.0\Include\WinRT\Xaml\Design

default.xamlこのフォルダーにButton コントロールの既定のスタイルが見つかりました。

まず、この既定のスタイルを新しいリソースディクショナリにコピーしました。この新しいリソースディクショナリを参照するように App.xaml を次のように設定します。

<!-- Add this line to your MergedDictionaries in App.xaml -->
<ResourceDictionary Source="FlyoutResources.xaml"/>

少し手を加えて、コピーしたデフォルトのボタンスタイルを微調整し、一意のキーを付けました。次に例を示します。

<!-- contents of FlyoutResources.xaml -->
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1">

    <ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Default">
            <SolidColorBrush x:Key="FlyoutButtonForeground">#FF000000</SolidColorBrush>
            <SolidColorBrush x:Key="FlyoutButtonBackground">#FFD3D3D3</SolidColorBrush>
            <SolidColorBrush x:Key="FlyoutButtonBorder">#FF000000</SolidColorBrush>
            <SolidColorBrush x:Key="FlyoutButtonPointerOverBackgroundThemeBrush" Color="#21D3D3D3" />
            <SolidColorBrush x:Key="FlyoutButtonPointerOverForegroundThemeBrush" Color="#FF000000" />
            <SolidColorBrush x:Key="FlyoutButtonPressedBackgroundThemeBrush" Color="#FFFFFFFF" />
            <SolidColorBrush x:Key="FlyoutButtonPressedForegroundThemeBrush" Color="#FF000000" />
            <SolidColorBrush x:Key="FlyoutButtonDisabledBackgroundThemeBrush" Color="#FFD3D3D3" />
            <SolidColorBrush x:Key="FlyoutButtonDisabledBorderThemeBrush" Color="#66000000" />
            <SolidColorBrush x:Key="FlyoutButtonDisabledForegroundThemeBrush" Color="#66000000" />
        </ResourceDictionary>
    </ResourceDictionary.ThemeDictionaries>

    <Style TargetType="Button" x:Key="flyoutButton">
        <Setter Property="Background" Value="{StaticResource FlyoutButtonBackground}" />
        <Setter Property="Foreground" Value="{StaticResource FlyoutButtonForeground}"/>
        <Setter Property="BorderBrush" Value="{StaticResource FlyoutButtonBorder}" />
        <Setter Property="BorderThickness" Value="{StaticResource ButtonBorderThemeThickness}" />
        <Setter Property="Padding" Value="12,4,12,4" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}" />
        <Setter Property="FontWeight" Value="SemiBold" />
        <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                                       Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlyoutButtonPointerOverBackgroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlyoutButtonPointerOverForegroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                                       Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlyoutButtonPressedBackgroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlyoutButtonPressedForegroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                                       Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlyoutButtonDisabledBackgroundThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                                       Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlyoutButtonDisabledBorderThemeBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource FlyoutButtonDisabledForegroundThemeBrush}" />
                                        </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>
                        <Border x:Name="Border"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Margin="3">
                            <ContentPresenter x:Name="ContentPresenter"
                                              Content="{TemplateBinding Content}"
                                              ContentTransitions="{TemplateBinding ContentTransitions}"
                                              ContentTemplate="{TemplateBinding ContentTemplate}"
                                              Margin="{TemplateBinding Padding}"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                        </Border>
                        <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>

</ResourceDictionary>

最後の手順は、XAML ボタン定義でそのスタイルを設定することです。

<Button 
    Name="ChoosePomidoroButton" 
    Content="Choose pomidoro image..."   
        Style="{StaticResource flyoutButton}"
    />

<!-- etc. -->

そして、これがどのように見えるかです（中央のボタンはホバー状態です）：

カスタムスタイルのボタンのスクリーンショット

windows - Windows8ストアアプリの設定バーのボタンスタイル

1 に答える 1

Related

Reference