XAML / UWP 中主题样式的快捷方式

Question

希望这不是一个愚蠢的问题，但我已经花了几个小时寻找这个答案，但没有任何结果。

基本上，我希望能够控制悬停按钮和按下按钮的外观。我在下面包含了我的一个按钮的代码。

这是我的问题

• 我的 UI 中有其他按钮，我希望能够将相同的样式分配给
• 我不想复制/粘贴所有这些代码，因为如果我以后需要更改颜色，我就完蛋了
• <style> 标签不起作用，因为它无法设置悬停/按下的颜色（如果这确实可行，请告诉我）
• 覆盖主题（正如其他答案中所建议的那样）不起作用，因为只有 一些 按钮需要以这种方式设置样式，但覆盖主题会更改所有按钮

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

谢谢！

Answer 1

基本上，我希望能够控制悬停按钮和按下按钮的外观。我在下面包含了我的一个按钮的代码。

更好的方法是自定义按钮并在样式中内部设置ButtonBackgroundPointerOver。

步骤：

制作继承 Button 的完整控件。

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

编辑默认的并添加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>

用法

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