在适当的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>();}您现在可以将此视图模型绑定到如下所示的视图。从形状对象的
Bounds属性中检索每个形状的位置和大小
Geometry。
<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;}
