作成時にListViewにシェイプ情報を追加します。

Question

キャンバスにシェイプ（四角形、楕円、線）を作成します。そして、私は別のウィンドウにリストビューを持っています。ここでは、形状の情報（位置、サイズ、形状など）を入力する必要があります。

私は別のウィンドウでXAMLでこのコードを持っている：

ObservableCollection<Shape> shapes = new ObservableCollection<Shape>(); 

myRect.Width = var1; 
myRect.Height = var2; 
Page.Children.Add(myRect); 
Canvas.SetLeft(myRect, posx); 
Canvas.SetTop(myRect, posy); 

shapes.Add(myRect); 
2ndwindow.Information.ItemsSource = shapes; // this is working because the 2ndwindow is owned by the mainwindow 

EDIT：

<ListView Name="Information"> 

     <ListView.View> 
      <GridView> 
       <GridViewColumn Header="Type"/> 
       <GridViewColumn Header="PositionX"/> 
       <GridViewColumn Header="PositionY"/> 
       <GridViewColumn Header="Width" DisplayMemberBinding="{Binding ActualWidth}"/> 
       <GridViewColumn Header="Height" DisplayMemberBinding="{Binding ActualHeight}"/> 
      </GridView> 
     </ListView.View> 

    </ListView> 

、メインウィンドウのC＃で

は、私が観察コレクションと、このコードを持っている私が管理しました幅と高さをバインドしますが、位置と形状（矩形または楕円）をバインドする方法はわかりません

Answer 1

適切なMVVMアプローチでは、抽象表現シェイプの（UIエレメントのリストの代わりに）

public class ShapeData 
{ 
    public string Type { get; set; } 
    public Geometry Geometry { get; set; } 
    public Brush Fill { get; set; } 
    public Brush Stroke { get; set; } 
    public double StrokeThickness { get; set; } 
} 

public class ViewModel 
{ 
    public ObservableCollection<ShapeData> Shapes { get; } 
     = new ObservableCollection<ShapeData>(); 
} 

このビューモデルを以下に示すようなビューにバインドできるようになりました。各形状の位置およびサイズは、形状オブジェクトのGeometryのBoundsプロパティから検索されます。

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition/> 
     <ColumnDefinition/> 
    </Grid.ColumnDefinitions> 

    <ItemsControl ItemsSource="{Binding Shapes}"> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <Canvas/> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Path Data="{Binding Geometry}" 
         Fill="{Binding Fill}" 
         Stroke="{Binding Stroke}" 
         StrokeThickness="{Binding StrokeThickness}"/> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl> 

    <ListView Grid.Column="1" ItemsSource="{Binding Shapes}"> 
     <ListView.View> 
      <GridView> 
       <GridViewColumn Header="Type" 
           DisplayMemberBinding="{Binding Type}"/> 
       <GridViewColumn Header="X" 
           DisplayMemberBinding="{Binding Geometry.Bounds.X}"/> 
       <GridViewColumn Header="Y" 
           DisplayMemberBinding="{Binding Geometry.Bounds.Y}"/> 
       <GridViewColumn Header="Width" 
           DisplayMemberBinding="{Binding Geometry.Bounds.Width}"/> 
       <GridViewColumn Header="Height" 
           DisplayMemberBinding="{Binding Geometry.Bounds.Height}"/> 
      </GridView> 
     </ListView.View> 
    </ListView> 
</Grid> 

あなたは、ウィンドウのコンストラクタにビューモデルのインスタンスを作成し、このようないくつかのサンプルデータを追加することができます。

public MainWindow() 
{ 
    InitializeComponent(); 

    var viewModel = new ViewModel(); 

    viewModel.Shapes.Add(new ShapeData 
    { 
     Type = "Circle", 
     Geometry = new EllipseGeometry(new Point(100, 100), 50, 50), 
     Fill = Brushes.Orange, 
     Stroke = Brushes.Navy, 
     StrokeThickness = 2 
    }); 

    viewModel.Shapes.Add(new ShapeData 
    { 
     Type = "Rectangle", 
     Geometry = new RectangleGeometry(new Rect(200, 50, 50, 100)), 
     Fill = Brushes.Yellow, 
     Stroke = Brushes.DarkGreen, 
     StrokeThickness = 2 
    }); 

    DataContext = viewModel; 
}