WPF Trigger改变属性无效问题排查

WPF Trigger改变属性无效问题排查

• WPF 使用trigger改变这个按钮的颜色，结果发现实际没有生效。第一眼感觉很奇怪，后来一想确实是这样，因为组件设置的优先级问题，直接在控件设置比模板里的设置属性的优先级高，覆盖了模板的设置。

<Button Button.Name="PART_DropDownButton" Foreground="Blue">
            <Control.Template>
                <ControlTemplate ControlTemplate.TargetType="{x:Type Button}">

                    <Border FrameworkElement.Cursor="Hand">
                        <Grid>
                            <Path
                                x:Name="filterIcon"
                                Width="16"
                                Height="16"
                                Margin="0,0,0,0"
                                Fill="{TemplateBinding Foreground}"
                                Path.Data="M3.42591 3H12.5741C12.6566 3 12.7373 3.02543 12.8065 3.07319C12.8756 3.12095 12.9302 3.189 12.9636 3.26905C12.997 3.3491 13.0077 3.43772 12.9945 3.52413C12.9813 3.61054 12.9447 3.69102 12.8892 3.75579L9.38851 7.84104C9.31723 7.92421 9.27774 8.03258 9.27774 8.14498V11.3432C9.27774 11.4176 9.26043 11.4909 9.22735 11.5564C9.19426 11.622 9.14642 11.6779 9.08808 11.7192L7.38443 12.9241C7.32028 12.9695 7.24574 12.9955 7.16874 12.9995C7.09174 13.0034 7.01517 12.9851 6.9472 12.9465C6.87923 12.9079 6.82241 12.8505 6.78279 12.7803C6.74318 12.7102 6.72226 12.6299 6.72226 12.5482V8.14498C6.72226 8.03258 6.68277 7.92421 6.61149 7.84104L3.11076 3.75579C3.05526 3.69102 3.01869 3.61054 3.00549 3.52413C2.99229 3.43772 3.00303 3.3491 3.03641 3.26905C3.06979 3.189 3.12437 3.12095 3.19352 3.07319C3.26267 3.02543 3.3434 3 3.42591 3Z"
                                Stretch="None" />
                        </Grid>
                    </Border>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Foreground" Value="Red" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Control.Template>
        </Button>

• 那么怎么修改呢

  最简单的就是增加style，在style里设置这个默认的字色

<Button Button.Name="PART_DropDownButton">
            <Button.Style>
                <Style TargetType="Button">
                    <Setter Property="Foreground" Value="Blue" />
                </Style>
            </Button.Style>
            <Control.Template>
               ... 代码省略
            </Control.Template>
</Button>

搞定。

• 其实还有很多修改方式，比如说，直接修改模板里的颜色值为固定值，不使用TemplateBinding，在这里也能解决问题，但是实际开发中扩展性会有点问题；另外一种就是使用附加属性，附加属性，附加属性不定义在宿主内部，一般定义在公共的类中，提供给全局使用，所以，如果你想定制一个样式，设置某两个属性，但是控件不支持时，可以使用附加属性在style的模板中使用改属性，这样可以兼容统一样式和个别自定义样式的修改需求。只是解决这个问题是显得太复杂了，不过可以了解下用途，下面来简单介绍下，

// 从这里可以看出你可以定制各种各样的属性，来改变控件的样式，圆角，颜色等等
    public class ControlAttachProperty
    {
        #region 圆角

        public static CornerRadius GetCornerRadius(DependencyObject obj)
        {
            return (CornerRadius)obj.GetValue(CornerRadiusProperty);
        }

        public static void SetCornerRadius(DependencyObject obj, CornerRadius value)
        {
            obj.SetValue(CornerRadiusProperty, value);
        }
        public static readonly DependencyProperty CornerRadiusProperty =
            DependencyProperty.RegisterAttached("CornerRadius", typeof(CornerRadius), typeof(ControlAttachProperty), new PropertyMetadata(null));

        #endregion
        
        #region 附加颜色1

        public static SolidColorBrush GetAttachColor(DependencyObject obj)
        {
            return (SolidColorBrush)obj.GetValue(AttachColorProperty);
        }

        public static void SetAttachColor(DependencyObject obj, SolidColorBrush value)
        {
            obj.SetValue(AttachColorProperty, value);
        }

        
        public static readonly DependencyProperty AttachColorProperty =
            DependencyProperty.RegisterAttached("AttachColor", typeof(SolidColorBrush), typeof(ControlAttachProperty), new PropertyMetadata(null));

        #endregion

        #region 附加颜色2

        public static SolidColorBrush GetAttachColor1(DependencyObject obj)
        {
            return (SolidColorBrush)obj.GetValue(AttachColor1Property);
        }

        public static void SetAttachColor1(DependencyObject obj, SolidColorBrush value)
        {
            obj.SetValue(AttachColor1Property, value);
        }

       
        public static readonly DependencyProperty AttachColor1Property =
            DependencyProperty.RegisterAttached("AttachColor1", typeof(SolidColorBrush), typeof(ControlAttachProperty), new PropertyMetadata(null));

        #endregion

        #region 附加图片资源

        public static ImageSource GetAttachImageSource(DependencyObject obj)
        {
            return (ImageSource)obj.GetValue(AttachImageSourceProperty);
        }

        public static void SetAttachImageSource(DependencyObject obj, ImageSource value)
        {
            obj.SetValue(AttachImageSourceProperty, value);
        }

        public static readonly DependencyProperty AttachImageSourceProperty =
            DependencyProperty.RegisterAttached("AttachImageSource", typeof(ImageSource), typeof(ControlAttachProperty), new PropertyMetadata(null));

        #endregion
  
    }

在style中定义过滤按钮的样式，默认的话黑色，当鼠标悬浮的时候是绿色。这是系统的统一样式。

<Window.Resources>
        <Style x:Key="FilterButton" TargetType="{x:Type Button}">
            <Setter Property="local:ControlAttachProperty.AttachColor" Value="Black" />
            <Setter Property="local:ControlAttachProperty.AttachColor1" Value="Green" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate ControlTemplate.TargetType="{x:Type Button}">
                        <Border FrameworkElement.Cursor="Hand">
                            <Grid>
                                <Path
                                    x:Name="filterIcon"
                                    Width="16"
                                    Height="16"
                                    Margin="0,0,0,0"
                                    Fill="{TemplateBinding local:ControlAttachProperty.AttachColor}"
                                    Path.Data="M3.42591 3H12.5741C12.6566 3 12.7373 3.02543 12.8065 3.07319C12.8756 3.12095 12.9302 3.189 12.9636 3.26905C12.997 3.3491 13.0077 3.43772 12.9945 3.52413C12.9813 3.61054 12.9447 3.69102 12.8892 3.75579L9.38851 7.84104C9.31723 7.92421 9.27774 8.03258 9.27774 8.14498V11.3432C9.27774 11.4176 9.26043 11.4909 9.22735 11.5564C9.19426 11.622 9.14642 11.6779 9.08808 11.7192L7.38443 12.9241C7.32028 12.9695 7.24574 12.9955 7.16874 12.9995C7.09174 13.0034 7.01517 12.9851 6.9472 12.9465C6.87923 12.9079 6.82241 12.8505 6.78279 12.7803C6.74318 12.7102 6.72226 12.6299 6.72226 12.5482V8.14498C6.72226 8.03258 6.68277 7.92421 6.61149 7.84104L3.11076 3.75579C3.05526 3.69102 3.01869 3.61054 3.00549 3.52413C2.99229 3.43772 3.00303 3.3491 3.03641 3.26905C3.06979 3.189 3.12437 3.12095 3.19352 3.07319C3.26267 3.02543 3.3434 3 3.42591 3Z"
                                    Stretch="None" />

                                <Path
                                    x:Name="filterIcon_mouseover"
                                    Width="16"
                                    Height="16"
                                    Margin="0,0,0,0"
                                    Fill="{TemplateBinding local:ControlAttachProperty.AttachColor1}"
                                    Path.Data="M3.42591 3H12.5741C12.6566 3 12.7373 3.02543 12.8065 3.07319C12.8756 3.12095 12.9302 3.189 12.9636 3.26905C12.997 3.3491 13.0077 3.43772 12.9945 3.52413C12.9813 3.61054 12.9447 3.69102 12.8892 3.75579L9.38851 7.84104C9.31723 7.92421 9.27774 8.03258 9.27774 8.14498V11.3432C9.27774 11.4176 9.26043 11.4909 9.22735 11.5564C9.19426 11.622 9.14642 11.6779 9.08808 11.7192L7.38443 12.9241C7.32028 12.9695 7.24574 12.9955 7.16874 12.9995C7.09174 13.0034 7.01517 12.9851 6.9472 12.9465C6.87923 12.9079 6.82241 12.8505 6.78279 12.7803C6.74318 12.7102 6.72226 12.6299 6.72226 12.5482V8.14498C6.72226 8.03258 6.68277 7.92421 6.61149 7.84104L3.11076 3.75579C3.05526 3.69102 3.01869 3.61054 3.00549 3.52413C2.99229 3.43772 3.00303 3.3491 3.03641 3.26905C3.06979 3.189 3.12437 3.12095 3.19352 3.07319C3.26267 3.02543 3.3434 3 3.42591 3Z"
                                    Stretch="None"
                                    Visibility="Collapsed" />
                            </Grid>
                        </Border>

                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="filterIcon_mouseover" Property="Visibility" Value="Visible" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

// 按钮使用
    <Grid>
        <Button Button.Name="PART_DropDownButton" Style="{StaticResource FilterButton}" />
    </Grid>

那么如果有个需求：有一个要默认蓝色，悬浮红色呢，只要

使用按钮的时候使用如下代码即可，这样就可以实现了样式的统一和个性简单的定制。

        <Button
            local:ControlAttachProperty.AttachColor="Blue"
            local:ControlAttachProperty.AttachColor1="Red"
            Button.Name="PART_DropDownButton"
            Style="{StaticResource FilterButton}" />