xaml - 将 ResourceDictionary 与多个按钮一起使用
问题描述
我有一个定义自定义主题词典的按钮。
<Button Content="Expand Slot"
FontWeight="SemiBold"
Command="{Binding ElementName=ThisPage, Path=ViewModel.NavigateToSlot, Mode=OneWay}"
CommandParameter="{x:Bind SlotNumber, Mode=OneWay}">
<Button.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
<!--Default colors-->
<SolidColorBrush x:Key="ButtonBackground" Color="Transparent"/>
<SolidColorBrush x:Key="ButtonForeground" Color="DarkSlateBlue"/>
<SolidColorBrush x:Key="ButtonBorderBrush" Color="DarkSlateBlue"/>
<!--Mouseover colors-->
<SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="Transparent"/>
<SolidColorBrush x:Key="ButtonForegroundPointerOver" Color="MediumSlateBlue"/>
<SolidColorBrush x:Key="ButtonBorderBrushPointerOver" Color="MediumSlateBlue"/>
<!--Colors while being clicked-->
<SolidColorBrush x:Key="ButtonBackgroundPressed" Color="Transparent"/>
<SolidColorBrush x:Key="ButtonForegroundPressed" Color="MediumSlateBlue"/>
<SolidColorBrush x:Key="ButtonBorderBrushPressed" Color="MediumSlateBlue"/>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Button.Resources>
</Button>
这工作正常,但我希望能够跨多个按钮使用相同的字典,而不必编辑每个按钮的<Button.Resources>
<Button Content="Button 1">
<Button.Resources>
-- Apply my colors --
</Button.Resources>
</Button>
<Button Content="Button 2">
<Button.Resources>
-- Apply my colors --
</Button.Resources>
</Button>
在 UWP 中执行此操作的正确方法是什么?
解决方案
您可以将 ResourceDictionary 放入,Page.Resources
以便该页面上的所有按钮都使用这种样式。如果您想将此样式应用于应用程序中的所有按钮,则可以将 ResourceDictionary 放在Application.Resources
App.xaml 文件中。
像这样:
<Page.Resources>
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Light">
<!--Default colors-->
<SolidColorBrush x:Key="ButtonBackground" Color="Transparent"/>
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
</Page.Resources>
更新:
如果要应用于某些按钮,最好使用自定义样式。您可以创建 Button 的默认样式并将属性更改为您想要的。您只需要找出哪些属性正在使用样式中ButtonBackground
的资源。ButtonBackgroundPointerOver
然后您可以将这些属性的值更改为您想要的值。
这是我更改的样式,您可以直接使用它。它与 ResourceDictionary 具有相同的行为。
<Style TargetType="Button" x:Key="TestKey">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BackgroundSizing" Value="OuterBorderEdge" />
<Setter Property="Foreground" Value="DarkSlateBlue" />
<Setter Property="BorderBrush" Value="DarkSlateBlue" />
<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="Button">
<ContentPresenter x:Name="ContentPresenter"
Background="{TemplateBinding Background}"
BackgroundSizing="{TemplateBinding BackgroundSizing}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
CornerRadius="{TemplateBinding CornerRadius}"
Padding="{TemplateBinding Padding}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
AutomationProperties.AccessibilityView="Raw">
<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="Transparent" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="MediumSlateBlue" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="MediumSlateBlue" />
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="MediumSlateBlue" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="MediumSlateBlue" />
</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>
你可以把这个样式放在Page.Resources
or中Application.Resources
,然后像下面这样使用它:
<Button Content="Expand Slot" FontWeight="SemiBold" Style="{StaticResource TestKey}" />
您可以在此处获得有关自定义样式的更多信息:创建自定义样式
推荐阅读
- oracle - 将数据库连接导出到 Oracle Developer
- php - 未捕获的错误:调用未定义的函数 sqlsrv_connect()
- python - python数组表示法速记:“k%parents.shape[0]”是什么意思?
- laravel-5.7 - 生成带前缀 Laravel 的自动增量数
- java - Java 无效的赋值运算符
- autodesk-forge - 如何在 Forge Autodesk 中从浏览器缓存中保存/加载模型
- vue.js - 如何使用 Vue Test utils 测试输入是否聚焦?
- android - TextView 背景不换行内容
- javascript - JSDoc:显示模块的嵌套树而不是项目中所有模块的列表
- c# - 我想创建一个像 iTextSharp 这样的 PDF 编写器,而不是使用 iTextSharp - 从头开始创建 PDF