1

I have the following 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>

Basically the idea here is to have a canvas with a collection of ellipses (let's call them LEDs, since that what they represent in the real world), where the position of the LED ellipses is controlled from the ViewModel The above code works well except for the big Ellipse in the Canvas -> as soon as I add it, I get the following Error:

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

This makes sense, since the "actual children - the LED Ellipses" should be generated dynamically during runtime. Anyway, how can I get my big ellipse into my canvas, so that the order of visibility would be Canvas.Background->Big Ellipse-> LED Ellipses?

Roland Deschain
  • 2,211
  • 19
  • 50
  • 1
    As a note, in order to draw centered circles, you may use a Path with an EllipseGeometry instead of an Ellipse in the ItemTemplate. – Clemens Apr 22 '21 at 12:33

1 Answers1

2

You may add the Ellipse to the Template of the 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>
Clemens
  • 123,504
  • 12
  • 155
  • 268
  • Works perfectly fine. So one needs two canvas, or are they referencing each other? – Roland Deschain Apr 22 '21 at 12:09
  • The second is created in the place where ItemsPresenter is specified. And it is better to replace the first one with a regular Grid. – EldHasp Apr 22 '21 at 12:16
  • A Grid isn't better. The point is that there is another *suitable* Panel element in the ControlTemplate. Whether you nest Canvases or other Panels depends on your actual layout constraints. The ControlTemplate is also the place where you would typically put a ScrollViewer in case the ItemsControl needs to be scrollable. – Clemens Apr 22 '21 at 12:17