WPF通过附加属性给控件修改样式

为了让我们WPF控件样式能够重复利用和解耦，我们可以通过附加属性来给我们的样式添加扩展。今天就带大家看看如果使用扩展属性来定制样式！

假设一种应用场景：我们需要做一个状态按钮控件，但鼠标按下去的时候，呈现一种图片，弹起来的时候呈现一种图片。所以我们给他加两个附加属性：PressedIcon,ReleasedIcon.

先定义两个附加属性：

    public class UIHelper
    {
        /// <summary>
        /// 默认图标附加属性
        /// </summary>
        public readonly static DependencyProperty PressedIconProperty = DependencyProperty.RegisterAttached("PressedIcon", typeof(ImageSource), typeof(UIHelper));

        /// <summary>
        /// 
        /// </summary>
        /// <param name="frameworkElement"></param>
        /// <returns></returns>
        public static ImageSource GetPressedIcon(FrameworkElement frameworkElement)
        {
            return (ImageSource)frameworkElement.GetValue(PressedIconProperty);
        }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="frameworkElement"></param>
        /// <param name="value"></param>
        public static void SetPressedIcon(FrameworkElement frameworkElement, ImageSource value)
        {
            frameworkElement.SetValue(PressedIconProperty, value);
        }

        public readonly static DependencyProperty ReleasedIconProperty = DependencyProperty.RegisterAttached("ReleasedIcon", typeof(ImageSource), typeof(UIHelper));

        /// <summary>
        /// 
        /// </summary>
        /// <param name="frameworkElement"></param>
        /// <returns></returns>
        public static ImageSource GetReleasedIcon(FrameworkElement frameworkElement)
        {
            return (ImageSource)frameworkElement.GetValue(ReleasedIconProperty);
        }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="frameworkElement"></param>
        /// <param name="value"></param>
        public static void SetReleasedIcon(FrameworkElement frameworkElement, ImageSource value)
        {
            frameworkElement.SetValue(ReleasedIconProperty, value);
        }
    ｝

附加属性定义好后，我们只需要在Xaml代码中引用他们，并给予赋值。

RadioButton示例样式：

    <Style x:Key="RadioButtonStyle" TargetType="{x:Type RadioButton}">
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Foreground" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RadioButton}">
                    <Grid x:Name="markGrid" Background="Transparent">
                        <Ellipse x:Name="optionMark" Fill="Transparent" Width="{Binding ActualHeight, RelativeSource={RelativeSource Mode=Self}}"/>
                        <Image x:Name="img" Margin="{Binding ActualHeight,RelativeSource={RelativeSource Mode=TemplatedParent},Converter={StaticResource EllipseMarginConverter}}" Source="{Binding Path=(helper:UIHelper.ReleasedIcon),RelativeSource={ RelativeSource Mode=TemplatedParent}}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="true">
                            <Setter Property="Fill" TargetName="optionMark" Value="{StaticResource RadioButton.MouseOver.Glyph}"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="true">
                            <Setter Property="Fill" TargetName="optionMark" Value="{StaticResource RadioButton.Pressed.Glyph}"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="true">
                            <Setter Property="Source" TargetName="img" Value="{Binding Path=(helper:UIHelper.PressedIcon),RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
                            <Setter Property="Fill" Value="{StaticResource RadioButton.MouseOver.Glyph}" TargetName="optionMark"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

在我们控件中使用他们：

<UserControl x:Class="Hilk.InkMarker.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:helper="clr-namespace:test.XamlUI"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">

    <!--此处省略静态资源字典的引入，包含：PressedIcon和ReleasedIcon-->

    <Grid>
        <RadioButton Style="{StaticResource  RadioButtonStyle}" helper:UIHelper.PressedIcon="{StaticResource PressedIcon}" helper:UIHelper.ReleasedIcon="{StaticResource ReleasedIcon}"/>
    </Grid>
</UserControl> 