WPF：修改XAML绘制Item内多个Rect，保留ViewModel的AddNewItem功能

第一步：修改Item类 #

把单个ScaledRectangle属性替换为集合类型，推荐使用ObservableCollection<Rect>，确保集合内容变化时界面能自动更新：

public class Item
{
    public Color ItemColor { get; set; }
    public ObservableCollection<Rect> ScaledRectangles { get; set; } = new ObservableCollection<Rect>();
}

第二步：修改XAML布局 #

外层ItemsControl仍负责遍历ViewModel中的Items集合，每个Item内部新增嵌套ItemsControl来渲染自身包含的所有矩形：

<Grid>
    <!-- 外层ItemsControl：遍历ViewModel的Items集合 -->
    <ItemsControl Name="Items" ItemsSource="{Binding Items, Mode=TwoWay}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <!-- 内层ItemsControl：遍历当前Item的ScaledRectangles集合 -->
                <ItemsControl ItemsSource="{Binding ScaledRectangles}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <local:ItemView Visibility="Visible">
                                <local:ItemView.Background>
                                    <!-- 绑定外层Item的ItemColor属性 -->
                                    <SolidColorBrush Color="{Binding DataContext.ItemColor, RelativeSource={RelativeSource AncestorType=ItemsControl}}"/>
                                </local:ItemView.Background>
                            </local:ItemView>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                    <ItemsControl.ItemContainerStyle>
                        <Style TargetType="{x:Type ContentPresenter}">
                            <!-- 绑定当前Rect的位置与尺寸 -->
                            <Setter Property="Canvas.Left" Value="{Binding Left}"/>
                            <Setter Property="Canvas.Top" Value="{Binding Top}"/>
                            <Setter Property="FrameworkElement.Width" Value="{Binding Width}"/>
                            <Setter Property="FrameworkElement.Height" Value="{Binding Height}"/>
                        </Style>
                    </ItemsControl.ItemContainerStyle>
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <Canvas />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</Grid>

关键说明 #

• 原ViewModel的viewModel.AddNewItem(newItem)功能完全保留，因为外层ItemsControl仍绑定原Items集合，新增Item会自动触发界面渲染。
• 内层ItemsControl负责处理单个Item下的多个矩形，通过RelativeSource绑定外层Item的ItemColor，确保同一Item下的所有矩形颜色统一。
• 内层使用Canvas作为布局容器，保证每个矩形能根据自身Rect属性完成定位和尺寸设置。

内容的提问来源于stack exchange，提问作者dransom90