Dependency property not working, trying to set through style setter.

Question

I am trying to set up a custom style for my newly made usercontrol, however i am getting the error : "Cannot convert the value in attribute 'Property' to object of type 'System.Windows.DependencyProperty'."

I thought i had set up Dependency properties but it seemed this was not the case, so i did some research and added:

   public static readonly DependencyProperty ImageSourceProperty = 
   DependencyProperty.Register("ImageSource", typeof(BitmapSource), typeof(Image));

to make this: -- MyButton.Xaml.Cs --

    namespace Client.Usercontrols
{
    public partial class MyButton : UserControl
    {
        public static readonly DependencyProperty ImageSourceProperty = 
            DependencyProperty.Register("ImageSource", typeof(BitmapSource), typeof(Image));

        public MyButton()
        {
            InitializeComponent();            
        }


        public event RoutedEventHandler Click;

        void onButtonClick(object sender, RoutedEventArgs e)
        {
            if (this.Click != null)
                this.Click(this, e);
        }

        BitmapSource _imageSource;
        public BitmapSource ImageSource
        {
            get { return _imageSource; }
            set
            {
                _imageSource = value;
                tehImage.Source = _imageSource;
            }
        }
    }
}

This unfortunately does not work. I also tried this:

public BitmapSource ImageSource
{
    get { return (BitmapSource)GetValue(MyButton.ImageSourceProperty); }
    set
    {
        SetValue(ImageSourceProperty, value);
    }
}

But that did not work and the image was not shown and generated the same error as mentioned previously anyway.

Any ideas? Regards Kohan.

-- MyButton.Xaml --

<UserControl x:Class="Client.Usercontrols.MyButton"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" MinHeight="30" MinWidth="40"
    DataContext="{Binding RelativeSource={RelativeSource Self}}">


    <Button Width="Auto" HorizontalAlignment="Center" Click="onButtonClick">

        <Border CornerRadius="5" BorderThickness="1" BorderBrush="Transparent" >
            <Grid>
                <Image Name="tehImage" Source="{Binding ImageSource}" />
                <TextBlock Name="tehText" Text="{Binding Text}" Style="{DynamicResource ButtonText}" />
            </Grid>
        </Border>

    </Button>
</UserControl>

-- MYButton Style --

<Style TargetType="{x:Type my:MyButton}" >
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type my:MyButton}">
                <ContentPresenter />
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="ImageSource" Value="../Images/Disabled.png" />                        
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Answer 1

Biggest problem I see is that you're registering the property as owned by Image rather than by your UserControl. Change to:

public static readonly DependencyProperty ImageSourceProperty = 
            DependencyProperty.Register("ImageSource", typeof(BitmapSource), typeof(MyButton));

If that doesn't work, will need to see your XAML.

HTH, Kent

Answer 2

Set the DataContext for your UserControl:

public MyButton()
{
    InitializeComponent();
    DataContext = this;
}

Alternatively, if you can't do that (since the DataContext is set to another object, for example), you can do this in your XAML:

<UserControl x:Class="Client.Usercontrols.MyButton"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" MinHeight="30" MinWidth="40"
    DataContext="{Binding RelativeSource={RelativeSource Self}}"
    x:Name="MyControl">


    <Button Width="Auto" HorizontalAlignment="Center" Click="onButtonClick">

        <Border CornerRadius="5" BorderThickness="1" BorderBrush="Transparent" >
            <Grid>
                <Image Name="tehImage" Source="{Binding ElementName=MyControl, Path=ImageSource}" />
                <TextBlock Name="tehText" Text="{Binding ElementName=MyControl, Path=Text}" Style="{DynamicResource ButtonText}" />
            </Grid>
        </Border>

    </Button>
</UserControl>

Answer 3

The standard form for a dependency property is (i've added in your information):

        public BitmapSource ImageSource
    {
        get { return (BitmapSource)GetValue(ImageSourceProperty); }
        set { SetValue(ImageSourceProperty, value); }
    }

    // Using a DependencyProperty as the backing store for ImageSource.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty ImageSourceProperty =
        DependencyProperty.Register("ImageSource", typeof(BitmapSource), typeof(MyButton), new UIPropertyMetadata(null));

it seems like your also trying to pass through the dependency property to the ImageSource of the object called "tehImage". You can set this up to automatically update using the PropertyChangedCallback... this means that whenever the property is updated, this will call the update automatically.

thus the property code becomes:

        public BitmapSource ImageSource
    {
        get { return (BitmapSource)GetValue(ImageSourceProperty); }
        set { SetValue(ImageSourceProperty, value); }
    }

    // Using a DependencyProperty as the backing store for ImageSource.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty ImageSourceProperty =
        DependencyProperty.Register("ImageSource", typeof(BitmapSource), typeof(MyButton), new UIPropertyMetadata(null, ImageSource_PropertyChanged));

    private static void ImageSource_PropertyChanged(DependencyObject source, DependencyPropertyChangedEventArgs e)
    {
        ((MyButton)source).tehImage.ImageSource = (ImageSource)e.NewValue
    }

Hopefully with the correctly registered dependency property, this will help you narrow down the issue (or even fix it)

Answer 4

The correct way of implementing a source for an Image in a user control in my opinion is not BitmapSouce. The easiest and best way (according to me again) is using Uri.

Change your dependency property to this (while also defining a change callback event):

ImageSourceProperty = DependencyProperty.Register(
    "ImageSource", typeof (Uri), typeof (MyButton),
    new FrameworkPropertyMetadata(new PropertyChangedCallback(OnImageSourceChanged)));

and the property to this:

public Uri ImageSource
{
    get
    {
           return (Uri)GetValue(ImageSourceProperty);
    }
    set
    {
           SetValue(ImageSourceProperty, value);
    }
}

Where your call back is like this:

private static void OnImageSourceChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
    MyButton hsb = (MyButton)sender;

    Image image = hsb.tehImage;
    image.Source = new BitmapImage((Uri) e.NewValue);
}