Geek Answers Handbook

Linking patterns for custom attached real estate

I am trying to use Image in Button Control, which animates in Hover and Pressed mode, showing different images. Accordingly, I defined 3 attached properties for Button Control, as follows.

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); }

I set these properties in the Button Style property settings as 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>

As you can see, I am trying to access custom attached properties from a control template for a button. I can get it to work with hard-coding the Source attribute of the Image control , but I will not use TemplateBinding instead

+4
1

. TemplateBinding:

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

, ButtonExtensions DependencyObject, .

DependencyProperty :

public static readonly DependencyProperty ImagePressedSourceProperty = ...
+5

More articles:


All Articles