MVVMを使用してキャンバスに矩形を追加

Question

MVVMを使用してビューにRectangleを追加するにはどうすればよいですか？

これは私の見解のためのコードです。

<Grid> 
      <Image x:Name="img" Source="{Binding ImagePath, Source={x:Static vm:DrawingVM.instance}, Converter={StaticResource nullImageConverter}}" Stretch="None" > 
      </Image> 

      <ItemsControl ItemsSource="{Binding ListRectangle, Source={x:Static vm:DrawingVM.instance}}" > 

       <ItemsControl.ItemsPanel> 
        <ItemsPanelTemplate> 
         <Canvas Background="Transparent" x:Name="cnvas" Width="{Binding ElementName=img, Path=ActualWidth}" 
         Height="{Binding ElementName=img,Path=ActualHeight}" 
         LayoutTransform="{Binding ElementName=img, Path=LayoutTransform}" > 
          <i:Interaction.Triggers> 
           <i:EventTrigger EventName="MouseDown"> 
            <!--<command:EventToCommand CommandParameter="{Binding ElementName=cnvas}" Command="{Binding MouseDownCommand, Source={x:Static vm:DrawingVM.instance}}" PassEventArgsToCommand="True" />--> 
            <ei:CallMethodAction MethodName="MouseDownEvente" TargetObject="{Binding Source={x:Static vm:DrawingVM.instance}}" /> 
           </i:EventTrigger> 

          </i:Interaction.Triggers> 
         </Canvas> 
        </ItemsPanelTemplate> 
       </ItemsControl.ItemsPanel> 
       <ItemsControl.ItemContainerStyle> 
        <Style TargetType="ContentPresenter"> 
         <Setter Property="Canvas.Left" Value="{Binding X}"/> 
         <Setter Property="Canvas.Top" Value="{Binding Y}"/> 
        </Style> 
       </ItemsControl.ItemContainerStyle> 
       <ItemsControl.ItemTemplate> 
        <DataTemplate> 
         <Rectangle Width="{Binding Width}" Height="{Binding Height}" Stroke="Blue" Fill="Transparent" /> 
        </DataTemplate> 
       </ItemsControl.ItemTemplate> 
      </ItemsControl> 
     </Grid> 

と、これは私のビューモデル

Canvas canvas = new Canvas(); 
     public void MouseDownEvente(object s, MouseButtonEventArgs e) 
     { 
      try 
      { 
       if (s == null) return; 
       canvas = s as Canvas; 
       if (canvas == null) return; 

       startPoint = e.GetPosition(canvas); 

       // Remove the drawn rectanglke if any. 
       // At a time only one rectangle should be there 
       //if (rectSelectArea != null) 
       // canvas.Children.Remove(rectSelectArea); 

       // Initialize the rectangle. 
       // Set border color and width 
       rectSelectArea = new Rectangle 
       { 
        Stroke = Brushes.Blue, 
        StrokeThickness = 2, 
        Fill = Brushes.Transparent, 
       }; 

       Canvas.SetLeft(rectSelectArea, startPoint.X); 
       Canvas.SetTop(rectSelectArea, startPoint.X); 
       canvas.Children.Add(rectSelectArea); 
      } 
      catch (Exception ex) 
      { 
       Console.WriteLine(ex.Message); 
       Console.WriteLine(ex.StackTrace); 
       throw ex; 
      } 
     } 

である。しかし、そのエラーをスロー：

Cannot explicitly modify Children collection of Panel used as ItemsPanel for ItemsControl. ItemsControl generates child elements for Panel. 

それでは、どのように私はこの問題を解決するのですか？

私は同じ問題を鉱山で調べてみました。そして、彼らに役立つソリューションを使用しました。しかし、エラーは依然として続きます。誰かが私を助けることができる？ありがとうございました。

Answer 1

Cannot explicitly modify Children collection of Panel used as ItemsPanel for ItemsControl. ItemsControl generates child elements for Panel.

これは、あなたがItemsControlためItemsPanelとしてCanvasを使用するときにCanvas.Children.Addを使用できないことを意味します。 ItemsControl.ItemsSourceプロパティがバインドされている場所（あなたの場合はListRectangle）にアイテムを追加する必要があります。