多种wpf自定义控件库样式

Question

我希望拥有一个

WPF Custom Control Library

多种风格，并且能够访问不同的风格以供不同的使用。

例如

假设我有一个名为

IconButtonControl

的项目，其中有一个

cs

类文件和所有需要的依赖项，几个

.xaml

文件，例如：

Blue.Generic.xaml

、

Green.Generic.xaml

（等等），它们都在主目录中引用

Generic.xaml

使用

<ResourceDictionary.MergedDictionaries>

.

第一款

<Style TargetType="{x:Type local:IconButton}" x:Key="BlueButton">
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="VerticalAlignment" Value="Bottom"/>
    <Setter Property="FlowDirection" Value="LeftToRight"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:IconButton}">
                <Grid Background="Transparent">
                    <Viewbox Height="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=IconScale}">
                        <Path Name="PurplePath"
                                  Fill="{StaticResource LightBlueBrush}"
                                  Stretch="Fill"
                                  Data="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=IconPath}"/>
                    </Viewbox>
                </Grid>
                <ControlTemplate.Triggers>
                    <EventTrigger RoutedEvent="MouseEnter">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)">
                                        <LinearColorKeyFrame KeyTime="0:0:0:0.1" Value="{StaticResource Blue}"/>
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="MouseLeave">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)">
                                        <LinearColorKeyFrame KeyTime="0:0:0:0.1" Value="{StaticResource LightBlue}"/>
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="PreviewMouseLeftButtonDown">
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)">
                                    <LinearColorKeyFrame KeyTime="0:0:0:0.1" Value="{StaticResource DeepBlue}"/>
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="PreviewMouseLeftButtonUp">
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)">
                                    <LinearColorKeyFrame KeyTime="0:0:0:0.1" Value="{StaticResource Blue}"/>
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

第二种风格

<Style TargetType="{x:Type local:IconButton}" x:Key="GreenButton">
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="VerticalAlignment" Value="Bottom"/>
    <Setter Property="FlowDirection" Value="LeftToRight"/>
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:IconButton}">
                <Grid Background="Transparent">
                    <Viewbox Height="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=IconScale}">
                        <Path Name="PurplePath"
                                  Fill="{StaticResource LightGreenBrush}" 
                                  Stretch="Fill"
                                  Data="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=IconPath}"/>
                    </Viewbox>
                </Grid>
                <ControlTemplate.Triggers>
                    <EventTrigger RoutedEvent="MouseEnter">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)">
                                        <LinearColorKeyFrame KeyTime="0:0:0:0.1" Value="{StaticResource Green}"/>
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="MouseLeave">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimationUsingKeyFrames Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)">
                                        <LinearColorKeyFrame KeyTime="0:0:0:0.1" Value="{StaticResource LightGreen}"/>
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="PreviewMouseLeftButtonDown">
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)">
                                    <LinearColorKeyFrame KeyTime="0:0:0:0.1" Value="{StaticResource DeepGreen}"/>
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="PreviewMouseLeftButtonUp">
                        <BeginStoryboard>
                            <Storyboard>
                                <ColorAnimationUsingKeyFrames Storyboard.TargetName="path" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)">
                                    <LinearColorKeyFrame KeyTime="0:0:0:0.1" Value="{StaticResource Green}"/>
                                </ColorAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

等等……

IconButton.cs

#region Dependency Properties

public static readonly DependencyProperty IconScaleProperty = DependencyProperty.Register(nameof(IconScale), typeof(double), typeof(IconButton), new PropertyMetadata(10.0));

public static readonly DependencyProperty IconPathProperty = DependencyProperty.Register(nameof(IconScale), typeof(Geometry), typeof(IconButton));

#endregion Dependency Properties

#region Properties

public double IconScale
{
    get => (double)GetValue(IconScaleProperty);
    set => SetValue(IconScaleProperty, value);
}

public Geometry IconPath
{
    get => (Geometry)GetValue(IconPathProperty);
    set => SetValue(IconPathProperty, value);
}

#endregion Properties

如何使用

<IconButtonControl:IconButton>

和

GreenButton

风格？

Answer 1

如果有设置

Style

的

IconButton

的属性（我假设它是

IconButtonControl

模板的一部分），您可以使用这个：

<local:IconButtonControl IconButtonStyle="{StaticResource GreenButton}" />

如果没有像

IconButtonStyle

这样的属性，您可以使用隐式

Style

来更改

IconButton

的

Style

：

<local:IconButtonControl>
    <local:IconButtonControl.Resources>
        <Style TargetType="{x:Type local:IconButton}" BasedOn="{StaticResource GreenButton}" />
    </local:IconButtonControl.Resources>
</local:IconButtonControl>

这是否有效取决于

IconButtonControl

的模板是如何定义的。如果模板明确设置了

Style

的

IconButton

，则必须为整个

IconButtonControl

创建自定义模板才能更改“内部”

Style

.

 的

IconButton