Button style in settings bar of Windows 8 store app

Question

I am creating Windows Store App. I use callisto library for create flyout in settings. I have problem with styling buttons. When I mouse over the background and font becomes white...

See the picture (mouse is over second button):

This is my XAML file:

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

And this is how I create flyout in 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);

When I tried use default styles...

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

...background, border and foreground was white...and user was unable to see anything.

What should I do to apply default style to have gray button (as it is in many apps in Store)?

Answer 1

The problem is that the default button style uses a white foreground and border brush, and a transparent background brush when your application is using the dark theme. On a Page, the default button style looks just fine:

On the content pane of the Callisto SettingsFlyout, however, the button is invisible, because the content pane's Background is white. You must have noticed this since you're setting the Foreground and Background properties of the button manually in your UserControl.

A solution is to define a new style for buttons on the SettingsFlyout, working off of the default button template to do so. The default styles are located here on an 64-bit machine:

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

I found the default style for the Button control in default.xaml in this folder.

First, I copied over this default style into a new resource dictionary. I set up App.xaml to reference this new resource dictionary like this:

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

With a bit of work, I tweaked the copied-over default button style and gave it an unique key. Here is the example:

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

The last step is to set that style on your XAML Button definitions:

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

<!-- etc. -->

And here is how it looks (middle button is in the hover state):