Add dynamically an image in XAML in a Canvas

Question

I have a view :

 <Grid>
    <Canvas Grid.Row="1" Grid.Column="1" Grid.RowSpan="2" HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch" x:Name="ImageHolder">
        <!-- there is something to do here !!! -->
        <!-- like 
             <ImageCollection>
             <DataTemplate For One Image>
                <Image Canvas.Left="{Binding Path=posX}" 
                       Canvas.Top="{Binding Path=posY}" 
                       Source="{Binding Path=fileName}"
                       x:Name="{Binding Path=fileName}"
                       MouseDown="Img_MouseDown" 
                       MouseUp="Img_MouseUp" /> 
             </DataTemplate For One Image>
             </ImageCollection> -->
     </Canvas>
 </Grid>

and is .cs

public partial class WindowBoard : Window
{

    protected MyCollectionVM _myCollection; // this class inherits of INotifyPropertyChanged

    public WindowBoard()
    {
        InitializeComponent();
        _myCollection = new MyCollectionVM();
    }
}

I would add dynamically images in this XAML in order to use dataBinding with my ViewModelClass.

In other words, I would know how create a userControl with one dataTemplate image but for many images add dynamically.

I know how to do that with a listview but i don't know how to do that with a canvas and no gridView/gridviewCellTemplate etc...

Answer 1

You can use an ItemsControl with it's ItemsPanel set to a Canvas

This will create a parent control (in this case, a Canvas), then will loop through a collection of objects and add each object to a parent panel. You can specify how to draw the object using the ItemTemplate property

Note that an ItemsControl wraps each item in a <ContentPresenter> so you need to position the ContentPresenter on the Canvas in the ItemContainerStyle, and not in the Image itself.

Your end code would look something like this:

<ItemsControl ItemsSource="{Binding MyCollectionOfImages}">
    <!-- ItemsPanelTemplate -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <!-- ItemContainerStyle -->
    <ItemsControl.ItemContainerStyle>
        <Style>
            <Setter Property="Canvas.Left" Value="{Binding posX}" />
            <Setter Property="Canvas.Top" Value="{Binding posY}" />
        </Style>
    </ItemsControl.ItemContainerStyle>

    <!-- ItemTemplate -->
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Image x:Name="{Binding Path=fileName}"
                   Source="{Binding Path=fileName}"
                   MouseDown="Img_MouseDown" 
                   MouseUp="Img_MouseUp" /> 
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

Answer 2

See this question

 <Window x:Class="WpfApplication1.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Width="750" Height="350" 
            FontSize="16">
        <Grid>
            <ComboBox x:Name="cb" ItemsSource="{Binding}" IsSynchronizedWithCurrentItem="True" VerticalAlignment="Top"
                      DisplayMemberPath="Title" SelectedValuePath="Image">
            </ComboBox>
            <Canvas Margin="0,50,0,0" Width="100" Height="100" >
                <Canvas.Background>
                    <ImageBrush ImageSource="{Binding ElementName=cb, Path=SelectedValue}"/>
                </Canvas.Background>
            </Canvas>
        </Grid>
    </Window>

and in c#

using System.Collections.Generic;
using System.Windows;
using System.Linq;

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            cb.DataContext = new[] 
            {
                new { Title="title1", Image=@"C:\img001.jpg" },
                new { Title="title2", Image=@"C:\img002.jpg" }
            };
        }
    }
}