You would typically do this with an ItemsControl
that has a Canvas as ItemsPanel
and an ItemContainerStyle
that binds the Canvas.Left
and Canvas.Top
properties to appropriate properties in your data item class.
If this is your data item class:
public class ImageItem
{
public string Source { get; set; }
public double Left { get; set; }
public double Top { get; set; }
}
public class ViewModel
{
public ViewModel()
{
ImageItems = new ObservableCollection<ImageItem>();
}
public ObservableCollection<ImageItem> ImageItems { get; private set; }
}
the XAML of the ItemsControl would look like shown below. Note that its ItemsSource
property is bound to the ImageItems
property in your ViewModel class.
<ItemsControl ItemsSource="{Binding ImageItems}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas IsItemsHost="True"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="ContentPresenter">
<Setter Property="Canvas.Left" Value="{Binding Path=Left}"/>
<Setter Property="Canvas.Top" Value="{Binding Path=Top}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding Path=Source}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Somewhere in MainWindow initialization code:
var vm = new ViewModel();
DataContext = vm;
vm.ImageItems.Add(
new ImageItem
{
Source = @"C:\Users\Public\Pictures\Sample Pictures\Koala.jpg",
Left = 100,
Top = 50
});
vm.ImageItems.Add(
new ImageItem
{
Source = @"C:\Users\Public\Pictures\Sample Pictures\Desert.jpg",
Left = 200,
Top = 100
});