在XAML中添加动态图像中的画布

Question

我有一个观点：

<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> 

，是的.cs

public partial class WindowBoard : Window 
{ 

    protected MyCollectionVM _myCollection; // this class inherits of INotifyPropertyChanged 

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

我会为了使用数据绑定与动态图像添加在此XAML我ViewModelClass。

换句话说，我会知道如何创建一个userControl与一个dataTemplate图像，但许多图像动态添加。

我知道该怎么做，与列表视图，但我不知道怎么做，用帆布和没有GridView控件/ gridviewCellTemplate等等

Answer 1

您可以使用ItemsControl与它的ItemsPanel集到Canvas

这将创建一个父控件（在这种情况下，一个Canvas），然后将遍历一组对象并将每个对象添加到父面板。您可以指定使用ItemTemplate财产

注意的ItemsControl包装在一个<ContentPresenter>每个项目，所以你需要在画布上ContentPresenter定位在ItemContainerStyle拉拢的对象，而不是在Image本身。

您的最终代码会是这个样子：

<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

看到这个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> 

和在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" } 
      }; 
     } 
    } 
}