将 ResourceDictionary 与多个按钮一起使用

Question

我有一个定义自定义主题词典的按钮。

<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 中执行此操作的正确方法是什么？

Answer 1

您可以将 ResourceDictionary 放入 Page.Resources 以便该页面上的所有按钮都使用这种样式。如果您想将此样式应用于应用程序中的所有按钮，则可以将 ResourceDictionary 放在 App.xaml 文件中的 Application.Resources 中。

像这样：

 <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或Application.Resources，然后像下面这样使用它：

 <Button Content="Expand Slot" FontWeight="SemiBold" Style="{StaticResource TestKey}" />

您可以在此处获取有关自定义样式的更多信息：Create custom styles