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内部设置。

步骤：

进行继承按钮的完全控制。

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>