XAML/UWP 中主题样式的快捷方式 [英] 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.

这是我的问题

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

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

谢谢！

推荐答案

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

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.

更好的方法是自定义 Button 并在样式中内部设置 ButtonBackgroundPointerOver.

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

步骤:

使完全控制继承按钮.

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>

这篇关于XAML/UWP 中主题样式的快捷方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！