WPF Usercontrol with custom properties

Question

I want to outsource two images to a custom usercontrol, which should have two properties to be set, one for the source of each image.

But I ran into trouble with the datacontext, which isnt recognised correctly. It might also be a problem, that its the first time that I use dependency properties. Anyway, I hope you can figure out my thoughts and help me here, here comes the sourcecode:

MainViewModel:

public class MainWindowViewModel : INotifyPropertyChanged
{
    private string _spielerL1;
    private string _spielerL2;

    public MainWindowViewModel()
    {
        SpielerL1 = System.IO.Directory.GetCurrentDirectory() + @"\Images\queen_of_clubs.png";
        SpielerL2 = System.IO.Directory.GetCurrentDirectory() + @"\Images\queen_of_diamonds.png";
    [...]
}

    public string SpielerL1
    {
        get { return _spielerL1; }
        private set
        {
            _spielerL1 = value;
            OnPropertyChanged("SpielerL1");
        }
    }

    public string SpielerL2
    {
        get { return _spielerL2; }
        private set
        {
            _spielerL2 = value;
            OnPropertyChanged("SpielerL2");
        }
    }
}

In my mainwindow view I am only instantiating the viewmodel and using the control with SourceLeft="{Binding SpielerL1}" and SourceRight="{Binding SpielerL2}"...

My control code behind looks like this (deleted sourceright to make it shorter):

public partial class HandControl
{
    public HandControl()
    {
        InitializeComponent();
        DataContext = this;
    }

    public string SourceLeft 
    {
        get
        {
            return (string) GetValue(SourceLeftProperty);
        }
        set
        {
            SetValue(SourceLeftProperty, value);
        }
    }
    public static readonly DependencyProperty SourceLeftProperty = DependencyProperty.Register("SourceLeft", typeof(string), typeof(HandControl), new PropertyMetadata(""));
}

And finally my usercontrol xaml, which isnt recognising the datacontext or atleast not showing my images:

<UserControl x:Class="FoolMe.Gui.Controls.HandControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="3*" />
        </Grid.ColumnDefinitions>
        <Image Grid.Column="1" 
               Source="{Binding SourceLeft}" />
        <Image Grid.Row="0"
               Grid.Column="0"
               Grid.ColumnSpan="2" 
               Source="{Binding SourceRight}" />
    </Grid>
</UserControl>

Since I havent done much with WPF and usercontrols yet, I have no clue, whats wrong. Without the usercontrol it has working fine, but outsourcing it like this, my window keeps "white".

Anyone got an idea, what went wrong?

Answer 1

You shouldn't set the DataContext of the UserControl to itself. However, your real problem comes from your Binding on the Image elements. You should use a RelativeSource Binding instead:

<Image Grid.Column="1" Source="{Binding SourceLeft, RelativeSource={RelativeSource 
    AncestorType={x:Type YourXmlNamespacePrefix:HandControl}}}" />
<Image Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Source="{Binding SourceRight, 
    RelativeSource={RelativeSource AncestorType={x:Type YourXmlNamespacePrefix:
    HandControl}}}" />