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