如何将 Children 添加到 WPF 中 ItemsControl 的 ItemsPanelTemplate？

Question

我有以下 ItemsControl：

<ItemsControl ItemsSource="{Binding ControllableLedList}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas Width="600" Height="600" Grid.Row="0" Grid.Column="0" Background="FloralWhite" >
                <Ellipse Width="600" Height="600" Fill="#FF252525" /> <!-- big Ellipse causing my error -->
            </Canvas>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Canvas.Left" Value="{Binding PositionX}" />
            <Setter Property="Canvas.Top" Value="{Binding PositionY}" />
        </Style>
    </ItemsControl.ItemContainerStyle>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Ellipse  Width="5" Height="5" Fill="Yellow"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

基本上这里的想法是有一个 canvas 和一组椭圆（我们称它们为 LED，因为它们在现实世界中代表的是它们），其中 LED 椭圆的位置由ViewModel 上面的代码运行良好，除了 Canvas 中的大椭圆 -> 一旦我添加它，我就会收到以下错误：

InvalidOperationException: Cannot explicitly modify Children collection of Panel used as ItemsPanel for ItemsControl. ItemsControl generates child elements for Panel

这是有道理的，因为“实际 children - LED 椭圆”应该在运行时动态生成。不管怎样，我怎样才能把我的大椭圆放到我的 canvas 中，这样可见的顺序就是 Canvas.Background->Big Ellipse-> LED Ellipses?

Answer 1

您可以将椭圆添加到 ItemsControl 的模板中：

<ItemsControl.Template>
    <ControlTemplate TargetType="ItemsControl">
        <Canvas>
            <Ellipse Width="600" Height="600" Fill="#FF252525" />
            <ItemsPresenter/>
        </Canvas>
    </ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <Canvas/>
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

如何将 Children 添加到 WPF 中 ItemsControl 的 ItemsPanelTemplate？

How can you add Children to an ItemsPanelTemplate of an ItemsControl in WPF?

wpf

xaml

canvas

itemscontrol