在适当的MVVM方法中,您将拥有一个视图模型,该模型带有矩形列表的抽象表示,例如:
public class RectItem{ public double X { get; set; } public double Y { get; set; } public double Width { get; set; } public double Height { get; set; }}public class ViewModel{ public ObservableCollection<RectItem> RectItems { get; set; }}然后,您将拥有一个使用ItemsControl可视化此类
Rect项目的集合的视图。ItemsControl的将具有画布作为其
ItemsPanel与一个适当的
ItemContainerStyle和
ItemTemplate其各自结合到相应的视图模型属性。它可能看起来像这样:
<ItemsControl ItemsSource="{Binding RectItems}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <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}" Fill="Black"/> </DataTemplate> </ItemsControl.ItemTemplate></ItemsControl>在样式设置器中没有绑定的替代方法(在UWP中不起作用)可能如下所示:
<ItemsControl ItemsSource="{Binding RectItems}"> <ItemsControl.ItemsPanel> <ItemsPanelTemplate> <Canvas/> </ItemsPanelTemplate> </ItemsControl.ItemsPanel> <ItemsControl.ItemTemplate> <DataTemplate> <Rectangle Width="{Binding Width}" Height="{Binding Height}" Fill="Black"> <Rectangle.RenderTransform> <TranslateTransform X="{Binding X}" Y="{Binding Y}"/> </Rectangle.RenderTransform> </Rectangle> </DataTemplate> </ItemsControl.ItemTemplate></ItemsControl>


