Shortcut for theme styling in XAML / UWP

问题

Hopefully this isn't a stupid question but I've spent several hours looking for this answer with no results.

Basically, I want to be able to control the appearance of hovered and pressed buttons. I've included the code for one of my buttons below.

Here are my issues

• I have other buttons in my UI that I want to be able to assign this same style to
• I'd rather not copy/paste all this code because if I ever need to change the colors later, I'm screwed
• The <style> tag doesn't work because it can't set hovered/pressed colors (if this is actually possible please let me know)
• Overriding the theme (as has been suggested in others answers) doesn't work because only some of the buttons need to be styled this way, but overriding the theme changes all the buttons

<Button Margin="5" Click="Settings_Button">
    <StackPanel Orientation="Horizontal">
        <FontIcon Glyph="&#xE713;" Margin="0,0,10,0"/>
        <TextBlock>Settings</TextBlock>
    </StackPanel>
    <Button.Resources>
        <ResourceDictionary>
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Default">
                    <SolidColorBrush x:Key="ButtonForeground" Color="#FFFFFF"/>
                    <SolidColorBrush x:Key="ButtonBackground" Color="#212121"/>
                    <SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="#FFFFFF"/>
                    <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="#424242"/>
                    <SolidColorBrush x:Key="ButtonBorderBrushPointerOver" Color="#FFFFFF"/>
                    <SolidColorBrush x:Key="ButtonForegroundPressed" Color="#FFFFFF"/>
                    <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="#070707"/>
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>
        </ResourceDictionary>
    </Button.Resources>
</Button>

Thanks!

回答1:

Basically, I want to be able to control the appearance of hovered and pressed buttons. I've included the code for one of my buttons below.

The better way is custom Button and set internally ButtonBackgroundPointerOver in the style.

Steps:

Make Complete Control that inherit Button.

public sealed class CustomButton : Button
{
    public CustomButton()
    {
        this.DefaultStyleKey = typeof(CustomButton);
    }
}

Edit the default the and add the ThemeDictionaries

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ButtonTest"
    >

    <ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Default">
            <SolidColorBrush x:Key="ButtonForeground" Color="#FFFFFF"/>
            <SolidColorBrush x:Key="ButtonBackground" Color="#212121"/>
            <SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="#FFFFFF"/>
            <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="#424242"/>
            <SolidColorBrush x:Key="ButtonBorderBrushPointerOver" Color="#FFFFFF"/>
            <SolidColorBrush x:Key="ButtonForegroundPressed" Color="#FFFFFF"/>
            <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="#070707"/>
        </ResourceDictionary>
    </ResourceDictionary.ThemeDictionaries>

    <Style TargetType="local:CustomButton">
        <Setter Property="Background" Value="{ThemeResource ButtonBackground}" />
        <Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
        <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" />
        <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}" />
        <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" />
        <Setter Property="Padding" Value="{StaticResource ButtonPadding}" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
        <Setter Property="FontWeight" Value="Normal" />
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
        <Setter Property="FocusVisualMargin" Value="-3" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:CustomButton">
                    <ContentPresenter
                        x:Name="ContentPresenter"
                        Padding="{TemplateBinding Padding}"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                        AutomationProperties.AccessibilityView="Raw"
                        Background="{TemplateBinding Background}"
                        BackgroundSizing="{TemplateBinding BackgroundSizing}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Content="{TemplateBinding Content}"
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        ContentTransitions="{TemplateBinding ContentTransitions}"
                        CornerRadius="{TemplateBinding CornerRadius}"
                        >
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">

                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="PointerOver">

                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPointerOver}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPointerOver}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPointerOver}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="Pressed">

                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPressed}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPressed}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPressed}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerDownThemeAnimation Storyboard.TargetName="ContentPresenter" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="Disabled">

                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundDisabled}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushDisabled}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundDisabled}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>

                            </VisualStateGroup>

                        </VisualStateManager.VisualStateGroups>
                    </ContentPresenter>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Usage

<StackPanel>
    <Button Margin="5" Click="Settings_Button" >
        <StackPanel Orientation="Horizontal">
            <FontIcon Glyph="&#xE713;" Margin="0,0,10,0"/>
            <TextBlock>Settings</TextBlock>
        </StackPanel>

    </Button>
    <local:CustomButton Margin="5" Click="Settings_Button" >
        <StackPanel Orientation="Horizontal">
            <FontIcon Glyph="&#xE713;" Margin="0,0,10,0"/>
            <TextBlock>Settings</TextBlock>
        </StackPanel>

    </local:CustomButton>
</StackPanel>

来源：https://stackoverflow.com/questions/59816266/shortcut-for-theme-styling-in-xaml-uwp