创建时将形状信息添加到 ListView答案

【问题标题】：Add Shape information to a ListView when its created创建时将形状信息添加到 ListView
【发布时间】：2016-10-22 08:29:37
【问题描述】：

我正在画布中创建形状（矩形、椭圆、线条）。然后我在另一个窗口中有一个列表视图，我需要在其中输入形状的信息（例如位置，大小，它是什么形状）。

我在另一个窗口中的 XAML 中有这段代码：

    <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# 中，我有一个可观察的集合和这段代码：

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

编辑：我设法绑定宽度和高度，但我不知道如何绑定位置和形状（矩形或椭圆）

【问题讨论】：

请参阅this answer，了解如何在 MVVM 应用程序中使用 Rectangle 执行此操作。您可以通过声明不同的形状类型（类）并为它们使用不同的 DataTemplate 来概括它。

标签： c# wpf

【解决方案1】：

在适当的 MVVM 方法中，您应该有一个具有 Shape 抽象表示（而不是 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;
}

【讨论】：