How to display different object types on a canvas

[HowardPWeiss]

I would like add different object types (Line, TextBox) to a canvas in an MVVM WPF Application with .Net 7.0. I am using Visual Studio Code under Linux for development. I used the Uno template to generate 4 projects - , .Base, .Skia.GTK and .Windows. Under Visual Studio Code, I open a terminal window and cd to .Skia.GTK . I then enter "dotnet run" in the terminal window to build and run the application

In XAML, I have created an ItemsControl to display objects on the canvas as follows:

  <ItemsControl ItemsSource="{Binding ObjectCollection}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas x:Name="Gameboard" Margin="13,105"  Width="800" Height="922" Background="Red"  VerticalAlignment="Top" HorizontalAlignment="Left">
                    <Rectangle Top="100" Left ="400" Width="150" Height="150" Stroke="Red" Fill="Gray" StrokeThickness="2">
                    </Rectangle>
                </Canvas>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPane<testProject>.Skia.GTK l>
        <ItemsControl.ItemTemplate>

            <DataTemplate DataType="{x:Type local:LineObject}">
                <Line
                    StrokeThickness="{Binding StrokeThickness}" Stroke="{Binding Stroke}"
                    X1="{Binding X1}" Y1="{Binding Y1}" X2="{Binding X2}" Y2="{Binding Y2}">
                </Line>
            </DataTemplate>

            <DataTemplate DataType="{x:Type local:TextBlockObject}">
                <TextBlock Width="{Binding Width}" Height="{Binding Height}" Text="{Binding Text}" Foreground="White" Name="Cell_0_1_0">
                    <TextBlock.RenderTransform>
                        <TranslateTransform X="{Binding X}" Y="{Binding Y}"/>
                    </TextBlock.RenderTransform>
                </TextBlock><testProject>.Skia.GTK 
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

LineObject and TextBlockl Object are defined in my ViewModel as follows

public class TextBlockObject : Object
{
public double X {get;set;}
public double Y {get; set;}
public double Height {get;set;}
public double Width {get; set;}
public string Name {get; set;}
public string Foreground {get;set;}
public string Text {get; set;}
}

public class LineObject: Object
{
    public string Stroke {get;set;}
    public double StrokeThickness {get; set;}
    public double X1 {get;set;}
    public double Y1 {get;set;}
    public double X2 {get;set;}
    public double Y2 {get;set;}
}

and ObjectCollection is defined as

public ObservableCollection ObjectCollection {get; set;}

and initialized as follows

ObjectCollection = new ObservableCollection();

At runtime, I add 5 objects to the object collection - 1 TextBlockObject and 4 LineObjects. I am expecting that and will apply the datatemplate to each object based on the type of the object

What I see is that the 4 LineObjects are drawn on the canvas and the TextBlockObject is not drawn. If I switch the order of the DataTemplate definitions so that the TextBlockObject DataTemplate is first, then the TextBlockObject is drawn and the 4 LineObjects are not drawn

Note that DataTemplateSelector cannot be defined since the namespaces in DataTemplateSelector are defined are not included in Net 7.0

Please advise

Howard Weiss

[ToddGlodek]

I had a similar problem, [Skia] Polyline shape is not displaying properly in Stretch.None mode when using negative coordinates #10651 . @jeromelaban was able to provide some help there - although he had previously suggestion that I switch from using CANVAS to using PANEL instead. Perhaps his suggestion might work for you as well..