自定义附加属性的模板绑定 [英] Template Binding for Custom Attached Property

问题描述

我试图在按钮控件中使用一个图像，该图像通过显示不同的图像来对悬停和按下状态进行动画处理。因此，我为按钮控件定义了3个附加属性，如下所示。

I am trying to use an Image in Button Control which animates on Hover and Pressed state by showing different images. Accordingly, I have defined 3 attached properties for the Button Control as given below.

public class ButtonExtensions : DependencyObject {
    public static DependencyProperty ImageSourceProperty = ...
    public static DependencyProperty ImageHoverSourceProperty = ...
    public static DependencyProperty ImagePressedSourceProperty =
        DependencyProperty.RegisterAttached("ImagePressedSource", typeof(string), typeof(ButtonExtensions));
    public static string GetImagePressedSource(Button target) { return (string)target.GetValue(ImagePressedSourceProperty); }
    public static void SetImagePressedSource(Button target, string value) { target.SetValue(ImagePressedSourceProperty, value); }

我在下面的Button样式属性设置器中设置这些属性

I set these properties in Button's Style property setters as given below

    <Style x:Key="AddButtonStyle" TargetType="{x:Type Button}" >
        <Setter Property="gs:ButtonExtensions.ImageSource" Value="/HotelReservation.ControlLibrary;component/Images/add-record-icon.png"/>
        <Setter Property="gs:ButtonExtensions.ImageHoverSource" Value="/HotelReservation.ControlLibrary;component/Images/add-record-hover-icon.png"/>
        <Setter Property="gs:ButtonExtensions.ImagePressedSource" Value="/HotelReservation.ControlLibrary;component/Images/add-record-pressed-icon.png"/>

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Grid Height="32" Width="32">
                        <!-- How to use TemplateBinding Here. This does not work -->
                        <Image Name="Normal" Source="{TemplateBinding Property=gs:ButtonExtensions.ImageSource}" />
/>
                        <!-- This Works -->
                        <Image Name="Hover" Source="/HotelReservation.ControlLibrary;component/Images/add-record-hover-icon.png" Opacity="0"/>
                        <Image Name="Pressed" Source="/HotelReservation.ControlLibrary;component/Images/add-record-pressed-icon.png" Opacity="0" />
                    </Grid>
    ...

                </ControlTemplate>

            </Setter.Value>
        </Setter>
    </Style>

如您所见，我正在尝试从控制模板中访问自定义附加属性按钮我可以通过对 Image 控件的 Source 属性进行硬编码来使其工作，但我不想使用 TemplateBinding

As you can see, I am trying to access the custom attached properties from within the Control Template for the Button. I can get it working by hard coding the Source attribute of the Image control, but I wan't to use TemplateBinding instead

推荐答案

使用附加属性作为绑定源需要在属性路径中使用括号。您必须使用常规绑定而不是TemplateBinding：

Using an attached property as binding source requires to use parentheses in the property path. You'll have to use a regular binding instead of a TemplateBinding:

<Image Source="{Binding Path=(gs:ButtonExtensions.ImagePressedSource),
                        RelativeSource={RelativeSource TemplatedParent}}"/>

还请注意，当ButtonExtensions类仅声明附加属性时，不需要从DependencyObject派生。

Note also that your ButtonExtensions class does not need to be derived from DependencyObject when it only declares attached properties.

还建议将DependencyProperty字段声明为只读：

It is also recommended to declare DependencyProperty fields read-only:

public static readonly DependencyProperty ImagePressedSourceProperty = ...

这篇关于自定义附加属性的模板绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！