The content binding only works for integers and strings


I am very new to XAML and have to work on an existing project for university. Unfortunately I am very confused how to deal exactly with content binding. I have the following XAML code (snippet):

<!-- SnapshotsV.xaml -->
<s:ScatterView Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" Panel.ZIndex="2" Name="SnapshotsScatterView" ItemsSource="{Binding Path=SnapshotsCollection}" AllowDrop="False" Background="#FF151515" Width="{Binding ScrollContainerWidth}">
        <Style TargetType="s:ScatterViewItem">
            <Setter Property="Height" Value="300"/>
            <Setter Property="Width" Value="300"/>
            <Setter Property="Orientation" Value="0"/>
            <Setter Property="CanScale" Value="False"/>
            <Setter Property="CanMove" Value="True" />
            <Setter Property="CanRotate" Value="False" />
            <Setter Property="Center" Value="{Binding Path=ItemPosition}" />

                <Label Content="{Binding Path=ID}" />
                <Image Source="{Binding Path=SnapshotImage}" />

The following View-Model belongs to this view (snippet):

// SnapshotsVm.cs
public class SnapshotsVm : ViewModelBase


    public ObservableCollection<SnapshotItem> SnapshotsCollection
        get { return SnapshotMaker.SnapshotItemCollection; }

SnapshotsItemCollection is a List having one or multiple SnapshotItem-Classes. It is implemented as ObservableCollection<SnapshotItem>. The SnapshotItem-Class looks like the following:

public class SnapshotItem : ViewModelBase
    private int _Id;
    private Image _Image;
    private String _XMLString;
    private Point _position;

    public int ID
        get { return _Id; }

    public String Test { get { return "abc"; } }

    public Image SnapshotImage
        get { return _Image; }

    public String XMLString
        get { return _XMLString; }

    public Point ItemPosition
        get { return _position; }

    public SnapshotItem(int id, String SnapshotDirectory)
        this._Id = id;
        this._Image = Image.FromFile(SnapshotDirectory + @"\snapshot-" + id + @".png");
        this._XMLString = null; //TODO later
        this._position = new Point(id*400+200, 200);

So far so good.

What I do not understand is the fact, that the Content Binding only works for some datatypes. As you can see in the SnapshotItem class, there is an Integer called ID and a String called Test. They work fine in XAML when I bind them via {Binding Path=ID} or {Binding Path=Test}. The other data Properties such as SnapshotImage or ItemPosition are not working.

I inspected the Variables in the SnapshotItem Class via Breakpoints. They are successfully and correctly set in the constructor. But I do not understand why I cannot use them for my Content Binding.

Additionally I have noticed that it works when I create the SnapshotItems directly in the SnapshotsVm.cs file. I created a similar class there, filled it up with random data and it worked fine. But for code logic reasons I want to create the SnapshotItems in the static SnapshotMaker class. The creation of the elements work fine and I can see them in the GUI. But the ItemPosition and the SnapshotImage cannot be bound.

Binding of your ScatterView (i.e. ItemsSource="{Binding Path=SnapshotsCollection}") happens when you set SnapshotsCollection for the first time. Therefore you need to initialize all your data (e.g. positions, images, etc) when you're creating your collection. It should look like this:

SnapshotsCollection = new ObservableCollection<SnapshotItem>();

int Id = 1;
var point = new Point(800,200);
var image = Image.FromFile(SnapshotDirectory + @"\snapshot-" + id + @".png");
SnapshotsCollection.Add(SnapshotMaker.Create(1, point, image));