Error while binding image source in DataTemplate

Question

I have an ItemsControl with a Canvas that should show my images. I have an ObservableCollection with objects of a class with propoties:

Image Image;
double X;
double Y;

My XAML contains the following code:

<ItemsControl ItemsSource="{Binding Images}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas AllowDrop="True" Drop="Canvas_Drop_1" MouseDown="canvas_MouseDown_1" Background="{StaticResource LightColor}" Name="canvas" >
            </Canvas>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding Image}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemContainerStyle>
        <Style>
            <Setter Property="Canvas.Top" Value="{Binding Y}" />
            <Setter Property="Canvas.Left" Value="{Binding X}" />
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>

where Images is my ObservableCollection . Now the problem is that I cannot bind an Image from that collection to an ImageSource in a DataTemplate . If I do it as I wrote, I'm getting an error:

System.Windows.Data Error: 1 : Cannot create default converter to perform 'one-way' conversions between types 'System.Windows.Controls.Image' and 'System.Windows.Media.ImageSource'. Consider using Converter property of Binding. BindingExpression:Path=Image; DataItem='ImageItemViewModel' (HashCode=7670737); target element is 'Image' (Name=''); target property is 'Source' (type 'ImageSource')

System.Windows.Data Error: 5 : Value produced by BindingExpression is not valid for target property.; Value='System.Windows.Controls.Image' BindingExpression:Path=Image; DataItem='ImageItemViewModel' (HashCode=7670737); target element is 'Image' (Name=''); target property is 'Source' (type 'ImageSource')

It works when I put:

<Image Source="{Binding Image.Source}"/>

instead of

<Image Source="{Binding Image}"/>

but then I'm losing all image's properties that it has (like effects etc).

So the question is: How can I put there the whole Image object that I have in my collection object instead of binding just its source?

Answer 1

Your Image property should not be an Image control, but an ImageSource , or perhaps an Uri or string instead.

public class DataItem
{
    public ImageSource Image { get; set; }
    ...
}

or

public class DataItem
{
    public string ImageUrl { get; set; }
    ...
}

---

However, if you really need the property to be a control, you might put it into a ContentControl:

<ItemsControl.ItemTemplate>
    <DataTemplate>
        <ContentControl Content="{Binding Image}"/>
    </DataTemplate>
</ItemsControl.ItemTemplate>