Question

I’m trying to have a user control where an image is passed in from its containing element. The purpose is so that I can reuse a common set of visual elements while only changing the image. For example:

The control usage:

<DataTemplate DataType={x:Type myType}>
    <local:MyControl PlotIconSource="..\Images\Scatter.png"/>
</DataTemplate>

The Image inside the control

<UserControl x:Class="MyControl">
    <Image Source="{Binding PlotIconSource}"/>
</UserControl>

Finally the dependency property for PlotIconSource in the code-behind for MyControl.xaml.cs.

    public ImageSource PlotIconSource
    {
        get { return (ImageSource)GetValue(PlotIconSourceProperty); }
        set { SetValue(PlotIconSourceProperty, value); }
    }

    public static readonly DependencyProperty PlotIconSourceProperty =
        DependencyProperty.Register(
            "PlotIconSource", 
            typeof(ImageSource), 
            typeof(PlotHeader), 
            new UIPropertyMetadata());

I’m sure I’ve missed something along the way so any help would be appreciated.

Answer 1

You might want to bind via RelativeSource or with ElementName:

<UserControl x:Class="MyControl" Name="control">
    <Image Source="{Binding PlotIconSource, ElementName=control}"/>
</UserControl>

(Do not set the DataContext, it will be invisible from the outside and mess with bindings meant for an inherited DataContext)