WinUI 3 ListView Linked To Observablecollection contains layer classes derived from class canvas

Question

WinUI 3 ListView Linked To Observablecollection contains layer classes derived from class canvas

mustapha chaibi 65

I want to create an application like photoshop main canvas which groups layer canvases,

a listview which displays the name of the layers and a visibility button via a datatemplate of each layer added to the main canvas.

I created the class layer derived from the class convas

public class Layer : Canvas
{
     public string Name { get; set; }
     public bool IsVisible { get; set; }
    
     public Layer(Canvas mainCanvas)
     {
         // Initialize layer properties
         Name = "New Layer";
         IsVisible = true;
        mainCanvas.Children.Add(this);
     }
}

ListView Layers

<StackPanel
     Grid.Row="1"
     Orientation="Vertical">
     <ListView
         x:Name="listViewLayers"
         x:FieldEdit="public"
         Background="SeaGreen">
         <ListView.ItemTemplate>
             <DataTemplate x:DataType="Layer">
                 <StackPanel>
                     <TextBlock Text="{x:Bind Name, Mode=TowWay}" />
                 </StackPanel>
             </DataTemplate>
         </ListView.ItemTemplate>
     </ListView>
</StackPanel>

ObservableCollection ocLayers :

ObservableCollection<Layer> ocLayers = new ObservableCollection<Layer>();

                ocLayers.Add(new Layer(mainCanvas){Name="AAA"});
         
                ocLayers.Add(new Layer(mainCanvas){Name="BBB"});
      
 listViewLayers.ItemsSource = ocLayers;

DataTemplate with DataType="Canvas" and ObservableCollection<Canvas>

if i add simple canvas Object just for testing it works

DataTemplate with DataType="Layer" and ObservableCollection<Layer>

if i add Layer Object execution hangs

Accepted answer

0 additional answers

Your answer

Answer 1

Xiaopo Yang - MSFT 12,731 Microsoft External Staff

The two Layers which used by listViewLayers ListView cannot be added by another Canvas anymore. As far as I'm concerned, the ListView should just contain string items which control Canvas behavior instead of Canvas in ListView.

Xiaopo Yang - MSFT 12,731 Reputation points Microsoft External Staff

2023-03-07T08:58:10.5033333+00:00

@mustapha chaibi Any update? Have observed you have resolved with the code solution...

mustapha chaibi 65

Hi , Xiaopo Yang

I decided to add a field to the Layer class. This field will be an object of type Canvas and will allow for storing a drawing or image for each layer. The Layer class will then be stored in an ObservableCollection<Layer> and displayed in a ListView.

public class Layer 
{
    public string Name { get; set; }
    public Canvas canvas { get; set; }

    public Layer(Canvas mainCanvas)
    {
        // Initialise les propriétés de la couche
        Name = "New Layer";
        Canvas = new Canvas();
        mainCanvas.Children.Add(this.canvas);
    }
}

ObservableCollection<Layer> ocLayers = new ObservableCollection<Layer>(); 
ocLayers.Add(new Layer(mainCanvas) { Name = "AAA" }); ocLayers.Add(new Layer(mainCanvas) { Name = "BBB" });

listViewLayers.ItemsSource = ocLayers;

and it works thank you.

Share via

WinUI 3 ListView Linked To Observablecollection contains layer classes derived from class canvas

0 additional answers

Your answer