Why custom ItemsControl does not show anything?

[alex-valchuk]

I need to create a custom control based on ItemsControl.
Just to simplify question I will not be demonstrating the internals of the control I'm working with but rather show much simpler example.

So, I have a data item of the following type:

 public class DataItem
 {
     public Image Picture { get; set; }
     public int Top { get; set; }
     public int Left { get; set; }
 }

I have a blank CustomItemsControl:

 public class CustomItemsControl : ItemsControl
 {
 }

and here is a markup I'm expecting to work, that currently shows the empty blank screen at runtime:

   <cc:CustomItemsControl ItemsSource="{Binding Items}">
 
     <ItemsControl.ItemTemplate>
       <DataTemplate>
         <ContentPresenter Content="{Binding Path=Picture}" />
       </DataTemplate>
     </ItemsControl.ItemTemplate>
 
     <ItemsControl.ItemsPanel>
       <ItemsPanelTemplate>
         <Canvas />
       </ItemsPanelTemplate>
     </ItemsControl.ItemsPanel>
 
     <ItemsControl.Styles>
       <Style Selector="ContentPresenter">
         <Setter Property="Canvas.Left" Value="{Binding Left}" />
         <Setter Property="Canvas.Top" Value="{Binding Top}" />
       </Style>
     </ItemsControl.Styles>
 
   </cc:CustomItemsControl>
 

Funny enough the similar markup is perfectly working with traditional ItemsControl:
But unfortunately it does not apply to my requirements as the control I'm working with has lot's of additional internal logic for displaying data.

I already tried to use DrawingContext to draw pictures and it works, but I need these pictures to by rotate-transformed from time to time while DrawingContext freezes them in initial state.

So, can anybody explain how to instruct custom ItemsControl to display the data by means of data binding and ContentPresenter?

[stevemonaco]

All TemplatedControls require a ControlTheme with its type key by default. Without that, Avalonia cannot render a visual. If you want to use the same ControlTheme as ItemsControl, then you want to use StyleKeyOverride. Otherwise, define and add your own ControlTheme.

You may also need to change <ItemsControl.ItemTemplate> (and the other children) to <cc:CustomItemsControl.ItemTemplate>.

[alex-valchuk]

Hi @stevemonaco,
Thanks a lot you've made my day

[alex-valchuk]

@stevemonaco, once again thank you very much for helping me.

Unfortunately, solving one problem I immediately faced another.
First, I tried to fix it by myself using many different ways for the past few days but with no success.

The problem is that when I fill the Items property in viewModel constructor then they are displayed perfectly on the canvas.
But as soon as I try to add additional item dynamically I'm facing the well known and many times discussed issue relative to visual parent:

The control Image (Name = d0ce3738-3f6f-43a5-82e3-dbab19644f77) already has a visual parent ContentPresenter while trying to add it as a child of ContentPresenter.

1. I checked all the discussions relative to that problem and found the recommendation by @maxkatz6 to disable Virtualization by means of VirtualizingMode=None but it seems like this approach is already stale and removed from the source code: I simply don't see the VirtualizingMode property in ItemsPresenter anymore...

2. I also tried to set VirtualizingStackPannel instead of Canvas and it works without issues but the nature of stack panel does not fit my requirements to display images whatever I want, so I do need a canvas.

3. Finally, I started looking into the way to create something like VirtualizingCanvas and already even implemented a part of it but with no success yet.

This all struggle brought me back to you with hope Avalonia already has more elegant weapon that could solve this issue.

[stevemonaco]

The control Image (Name = d0ce3738-3f6f-43a5-82e3-dbab19644f77) already has a visual parent ContentPresenter while trying to add it as a child of ContentPresenter.

An Image, like all visuals, can only have one parent. That is, it can only be displayed one time across the screen. If you're trying to cache image data and reuse it (multiple times simultaneously), then you should store a Bitmap and create individual Image controls that reference it. It's uncommon to experience this error in a non-virtualized layout.

Finally, I started looking into the way to create something like VirtualizingCanvas and already even implemented a part of it but with no success yet.

You would need to derive from VirtualizingPanel and implement this yourself. I do question whether you actually need virtualization, but you didn't mention the use case. If you have an incredibly large surface with many images being placed whereever (think of a spatial notetaking app or storyboarding app for design), then a virtualized canvas might be probably worth it. Virtualized controls exist to reduce the number of active controls to only what's on-screen. You may also need to write quadtrees depending on how much data there is.