WPF畫布，如何與MVVM代碼動態添加留守兒童

Question

要求：

繪製（1024×1024像素）的一個位圖圖像和基於點的集合矩形（一個或多個）。矩形應該精確地適合圖像上的像素位置。還需要在矩形內添加一些文本。

圖像將永遠只有一個，矩形將動態添加。

當前解決方案：

有一個帶有圖像控件的畫布。在文件ViewImageResult.xaml.cs後面的代碼下添加動態代碼。

private void DrawResult(int left, int right, int width, int height) 
    { 
     Border bord = new Border(); 
     bord.BorderThickness = new Thickness(1); 
     bord.BorderBrush = Brushes.Red; 
     bord.Width = width; 
     bord.Height = height; 
     _mainCanvas.Children.Add(bord); 
     Canvas.SetLeft(bord, left); 
     Canvas.SetTop(bord, right); 
    } 

問題：

因爲我跟着MVVM模式，點的矩形集合在我的ViewModel文件ViewImageResultModel.cs。我無法從ViewModel文件動態添加子矩形。

任何幫助，非常感謝。

在此先感謝

Answer 1

ItemsControl是你的朋友：

<Grid> 
    <Image Source="..."/> 
    <ItemsControl ItemsSource="{Binding Points}"> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <Canvas/> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
     <ItemsControl.ItemContainerStyle> 
      <Style> 
       <Setter Property="Canvas.Left" Value="{Binding X}"/> 
       <Setter Property="Canvas.Top" Value="{Binding Y}"/> 
      </Style> 
     </ItemsControl.ItemContainerStyle> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Border BorderBrush="Red" BorderThickness="1" Width="{Binding Width}" Height="{Binding Height}"/> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 
</Grid> 

以上假設你的VM通過Points屬性公開點的集合，並且每個點VM具有X，Y，Width，和Height屬性。

Answer 2

新增IsItemsHost="True"肯特的解決方案的Canvas：

<Grid> 
    <Image Source="..."/> 
    <ItemsControl ItemsSource="{Binding Points}"> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <Canvas IsItemsHost="True"/> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
     <ItemsControl.ItemContainerStyle> 
      <Style> 
       <Setter Property="Canvas.Left" Value="{Binding X}"/> 
       <Setter Property="Canvas.Top" Value="{Binding Y}"/> 
      </Style> 
     </ItemsControl.ItemContainerStyle> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Border BorderBrush="Red" BorderThickness="1" Width="{Binding Width}" Height="{Binding Height}"/> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 
</Grid>