Drawing custom canvas elements at arbitrary positions results in errors when using child elements like flyouts

[maxhoerstr]

Hello everyone,

i want to draw elements on the canvas with the help of ItemsControl:

<ItemsControl ClipToBounds="False" ItemsSource="{Binding CanvasElements}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas>
            </Canvas>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.Styles>
        <Style Selector="ContentPresenter" x:DataType="canvasElements:CanvasElement">
                <Setter Property="Canvas.Left" Value="{Binding Path=X}"/>
                <Setter Property="Canvas.Top" Value="{Binding Path=Y}"/>
        </Style>
    </ItemsControl.Styles>
</ItemsControl>

I change the style so the elements are drawn on the correct position. The CanvasElements are a base class from which my elements on the canvas derive and they are also specified via a DataTemplate which is selected by key:

<UserControl.DataTemplates>
      <dataTemplates:CanvasTemplateSelector>
          <DataTemplate x:Key="Test.ViewModels.CanvasElements.NodeViewModel" DataType="canvasElements:NodeViewModel">
              <Ellipse IsVisible="{Binding IsVisible}" Fill="#1f1f1f" Height="15" Width="15" PointerPressed="CanvasClassClicked">
                    <FlyoutBase.AttachedFlyout>
                             ....
                    </FlyoutBase.AttachedFlyout>
              </Ellipse>
          </DataTemplate>
        </dataTemplates:CanvasTemplateSelector>
    </UserControl.DataTemplates>

This is working as intended, however i recently tried adding Flyouts to these elements, which resulted in the style selector triggering for certain elements inside the flyout. For example, a Button with text throwing an exception, as they can not be cast to CanvasElement. I tried to work with the selector syntax to use the above for CanvasElements only, however, either nothing changes or nothing is drawn correctly anymore. Is there a way to realize the positioning but only for my CanvasElements without their childs?

[maxkatz6]

If I understand correctly, that your issue is with style selector applying too broadly, please try to change it to:

        <Style Selector="Canvas > ContentPresenter" x:DataType="canvasElements:CanvasElement">

[maxhoerstr]

Yes, that is the issue. The code you provided do not apply the style to my canvas elements, so they are all drawn at 0, 0. Thats the problem with most of the selectors i tried unfortunately.

[maxhoerstr]

I found this question on stackoverflow that fixed my problem and is quite similar to your suggestion:
https://stackoverflow.com/questions/76005932/binding-a-list-of-rectangles-to-a-canvas-in-avaloniaui

[maxkatz6]

Yeah, that solution is more correct.