WPFでRectangleGeometryのObservableCollectionにバインドするにはどうすればよいですか？

Question

ViewModelで追加および削除されるRectangleGeometry矩形のコレクションを表示する必要があります。そのため、RectangleGeometryオブジェクトのObservableCollectionを作成し、GeometryGroup内でバインドします。

私の問題を本当に見やすくするために、私はMVVMなしで非常に簡単なプロジェクトを作成しました。たとえ単純なコードビハインドにバインドしても、長方形は表示されません。私はまだWPF学習モードですので、テンプレートや他の何かを使ってこれを行うより良い方法があれば、私はとてもオープンです。

XAML：

<Window x:Class="MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:local="clr-namespace:WpfApplication1" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     Title="MainWindow" 
     Width="1024" 
     Height="768" 
     mc:Ignorable="d"> 
    <Grid> 
     <Canvas> 
     <Path Fill="Red" Opacity=".4"> 
      <Path.Data> 
       <GeometryGroup Children="{Binding Rectangles}" 
           FillRule="NonZero" /> 
      </Path.Data> 
     </Path> 
     </Canvas> 
    </Grid> 
</Window> 

コードビハインド：

Imports System.Collections.ObjectModel 

Class MainWindow 

    Public Sub New() 
     InitializeComponent() 
     Rectangles = New ObservableCollection(Of RectangleGeometry) 
     Rectangles.Add(New RectangleGeometry(New Rect(50, 50, 500, 100))) 
     Rectangles.Add(New RectangleGeometry(New Rect(50, 50, 100, 500))) 
     Rectangles.Add(New RectangleGeometry(New Rect(200, 200, 100, 100))) 
     Rectangles.Add(New RectangleGeometry(New Rect(400, 400, 100, 100))) 
     Rectangles.Add(New RectangleGeometry(New Rect(20, 20, 100, 100))) 
    End Sub 

    Public Property Rectangles As ObservableCollection(Of RectangleGeometry) 

End Class 

Answer 1

あなたは完全にこのことについて間違った道を進みました。一方では、直接GUIオブジェクト（つまり、RectangeGeometry）を構築しようとしており、もう一方はデータバインディングを使用しようとしています。一つを選ぶ。

DataBindingを使用する場合は、矩形オブジェクトのデータ構造を作成し、その代わりにObservableCollectionにバインドします。また、Canvasを使用しないで、ItemPanelをCanvasに設定​​したItemsControlを使用します。 DataTemplateを使用して描画するアイテムのItemTemplateをオーバーライドし、次にItemContainerStyleのCanvas.Left/Canvas.Topパラメータを設定します。