Unable to render SkiaEntry

[jbtdevgit]

Hi,

I am having trouble to make a entry with an icon beside it and it never renders. My goal is to create an entry with a border and an icon beside the entry. This is just an example for me to test the water.

Below is how I render it in a ContentPage

<VerticalStackLayout>
    <draw:Canvas>
        <draw:SkiaShape Padding="5"
                        CornerRadius="5"
                        StrokeColor="Gray"
                        StrokeWidth="1">
            <draw:SkiaLayout ColumnDefinitions="1*,*" Type="Grid">
                <draw:SkiaLabel Text="0" TextColor="Gray" />
                <draw:SkiaMauiEntry Grid.Column="1"
                                    Placeholder="Placeholder"
                                    Text="Test"
                                    TextColor="White" />
            </draw:SkiaLayout>
        </draw:SkiaShape>
    </draw:Canvas>
</VerticalStackLayout>

I also tried creating it in a ContentView and referencing it in the ContentPage.

<?xml version="1.0" encoding="utf-8" ?>
<ContentView x:Class="App.Controls.Entries.EntryIcon"
             xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:draw="http://schemas.appomobi.com/drawnUi/2023/draw"
             xmlns:entry="clr-namespace:App.Controls.Entries.Standard">
    <draw:Canvas>
        <draw:SkiaShape Padding="5"
                        CornerRadius="5"
                        StrokeColor="Gray"
                        StrokeWidth="1">
            <draw:SkiaLayout ColumnDefinitions="1*,*" Type="Grid">
                <draw:SkiaLabel Text="0" TextColor="Gray" />
                <draw:SkiaMauiEntry Grid.Column="1" Placeholder="Placeholder" />
            </draw:SkiaLayout>
        </draw:SkiaShape>
    </draw:Canvas>
</ContentView>

However none of them works. Any ideas?

[taublast]

Hey, the story behind this i started the implementation with a totally drawn entry, SkiaEntry then learned that Flutter went using native entry views at the end for native suggestions etc, so I stopped drawn implementation and created SkiaMauiEntry and SkiaMauiEditor, it's maui controls, custom handlers, embedded on the canvas. You can see the use in the maui demo example: https://github.com/taublast/DrawnUi.Maui.Demo. If the demo works for you might want to compare with your own implementation. If not, please ping me!

2 more points, I'm actually reworking them for a totally drawn app I'm working right now and fixed some stuff already. So I can tell there are maybe small issues in those on nuget. Those fixed will come out to main repo soon. And the second point: I will DEFINITELY go back to that totally drawn entry, the SkiaEntry, when I finish this app and get free time. Will be no native features but frankly it shows to be a dead end story to use MAUI controls because they have their own problems that I'm just carrying with me to the canvas so..

Please feel free to ask if you meet more problems, will be glad to help.

[jbtdevgit]

Hey, the story behind this i started the implementation with a totally drawn entry, SkiaEntry then learned that Flutter went using native entry views at the end for native suggestions etc, so I stopped drawn implementation and created SkiaMauiEntry and SkiaMauiEditor, it's maui controls, custom handlers, embedded on the canvas. You can see the use in the maui demo example: https://github.com/taublast/DrawnUi.Maui.Demo. If the demo works for you might want to compare with your own implementation. If not, please ping me!

2 more points, I'm actually reworking them for a totally drawn app I'm working right now and fixed some stuff already. So I can tell there are maybe small issues in those on nuget. Those fixed will come out to main repo soon. And the second point: I will DEFINITELY go back to that totally drawn entry, the SkiaEntry, when I finish this app and get free time. Will be no native features but frankly it shows to be a dead end story to use MAUI controls because they have their own problems that I'm just carrying with me to the canvas so..

Please feel free to ask if you meet more problems, will be glad to help.

Okay, I have few questions

• Can I still use ContentView to be root for my drawn controls or do I have to use SkiaLayout for my custom controls?
• To use the package, do I get to be tied up within the Canvas ? Thus, most layout and controls to be used are all Skia ?
• Is it not possible to use the package for solely drawing custom controls and use within Maui's default ecosystem? e.g. I have a root of VerticalStackLayout other elements are maui elements and other are drawn ui elements

[taublast]

@jbtdevgit

• Can I still use ContentView to be root for my drawn controls or do I have to use SkiaLayout for my custom controls?
  Yes, of course, set ContentView Content property to a created Canvas, and inside the canvas you will have drawn UI, your content view will pass stuff to them. Drawnui doesn't require you to access drawn properties on main thread.

• To use the package, do I get to be tied up within the Canvas ? Thus, most layout and controls to be used are all Skia ?
  Yes totally. Canvas is a subclassed DrawnView that bring in gestures and much more. But, I invite you to see the Sanbox sample project included in the repo, to see how to use other skia code inside, for example there is a demo page to embed maui graphics, and inside the other Demo repo you will see how to draw camera frames and MapsUi on the same canvas.

• Is it not possible to use the package for solely drawing custom controls and use within Maui's default ecosystem? e.g. I have a root of
  VerticalStackLayout other elements are maui elements and other are drawn ui elements.

Maui controls use handlers that pass virtual properties to native views, so in theory one can create handlers to draw on skia canvas instead. Not my interest though, in practice you can just use Canvas inside other MAUI controls, same would be in Blazor this year.

[Tellus-farm]

[ False]
SkiaCanvas -> MauiControl

[True]
SkiaCanvas -> SkiaControl

[VisualTree Not Visible Height -1]
VerticalStackLayout -> SkiaCanvas (Width = True : Height = -1)

[True]
VerticalStackLayout -> SkiaCanvas (Height 100px) [ SkiaCanvas ] width = VerticalStackLayout : Height = 100px

[True]
SkiaCanvas height -1 -> Binding -> [ Maui Label ] x:Name="label" Height Default -> Canvas Height -> Maui Label height

[True]

<VerticalStackLayout>
    <Border>
        <Grid ColumnDefinitions="1*,*">
            <Label Text="0" Grid.Column="0"
                   TextColor="Gray"
                   x:Name="label"/>
            <Entry  Grid.Column="1"
                    Placeholder="Placeholder" 
                    Text="Test" 
                    TextColor="White" />
        </Grid>
    </Border>
    <draw:Canvas HorizontalOptions="Fill"  
                 HeightRequest="{Binding Source={x:Reference label},
                                 Path=Height, Mode=OneWay}" >
        <draw:SkiaShape Padding="5"
                    CornerRadius="5"
                    StrokeColor="Gray"
                    StrokeWidth="1">
            <draw:SkiaLayout ColumnDefinitions="1*,*" Type="Grid">
                <draw:SkiaLabel Text="0" Grid.Column="0"  HorizontalOptions="Fill"                               
                TextColor="Gray" FontSize="14" />
                <draw:SkiaMauiEntry Grid.Column="1" HorizontalOptions="Fill" VerticalOptions="Fill"
                 Placeholder="Placeholder"
                 Text="Test" FontSize="14"
                 TextColor="White"  />
            </draw:SkiaLayout>
        </draw:SkiaShape>
    </draw:Canvas>
</VerticalStackLayout>

[Solution]

  SKFont font = new SKFont(SKTypeface.FromFamilyName("Arial"), 20);
  var reck = new SKRect();
  font.MeasureText("Test",out reck);

[jbtdevgit]

Thanks for this, just note that the canvas height is kind of a must if being used along within a maui layout

[taublast]

@jbtdevgit Hey i just got your maybe initial message in email, but I cant find it here maybe you edited. But to remove the confusion:

1 you can (and maybe should) totally use this all as a mix. so if I had MAUI controls to use I could use a Grid, place a (not-accelerated!!!) canvas as first layer, with shape/frame and an icon to the right, and would place on top (inside maui Grid) my maui Entry.

so basically you can include canvases here and there to draw anything. that's what I do when I have an existing Xamarin/MAUI app to make faster, I define laggy points and replace bunch of native laggy controls with just 1 canvas and virtual stuff inside.

2 when you have a totally drawn app and you need a MAUI control you can include it over the canvas with SkiaMauiElement. an example is still there https://github.com/taublast/DrawnUi.Maui.Demo. you would see how I include maui WebView into the drawn modal drawer.

[jbtdevgit]

I'll take note of this gladly! Thanks!

[taublast]

@jbtdevgit regarding the canvas height, normally it should autosize to content, if it bugs please provide an example so I can fix this. if it doesn't autosize means the content inside did not define any size itself. a veeery important difference from MAUI here is that in Maui by default controls are using either Fill or some hardcoded minimum size. in drawnui everything is Start by default!

[jbtdevgit]

Yeap sure here you go, everything is within a ContentPage. The height request seen in the canvas below is something I added to test if the canvas will work with it.

<VerticalStackLayout>
    <Border>
        <Grid ColumnDefinitions="1*,*">
            <Label x:Name="label"
                   Grid.Column="0"
                   Text="0"
                   TextColor="Gray" />
            <Entry Grid.Column="1"
                   Placeholder="Placeholder"
                   Text="Test"
                   TextColor="White" />
        </Grid>
    </Border>
    <Border>
        <Grid ColumnDefinitions="1*,*">
            <Label Grid.Column="0"
                   Text="0"
                   TextColor="Gray" />
            <Entry Grid.Column="1"
                   Placeholder="Placeholder"
                   Text="Test"
                   TextColor="White" />
        </Grid>
    </Border>
    <draw:Canvas HeightRequest="200" HorizontalOptions="Fill">
        <draw:SkiaShape Padding="5"
                        CornerRadius="5"
                        StrokeColor="Gray"
                        StrokeWidth="1">
            <draw:SkiaLayout ColumnDefinitions="1*,*" Type="Grid">
                <draw:SkiaLabel Grid.Column="0"
                                FontSize="14"
                                HorizontalOptions="Fill"
                                Text="0"
                                TextColor="Gray" />
            </draw:SkiaLayout>
        </draw:SkiaShape>
    </draw:Canvas>
</VerticalStackLayout>

Result with height:

Result with no height:

[Tellus-farm]

override SKiaLabel

 SKFont font = new SKFont(SKTypeface.FromFamilyName("Arial"), 20);
 var reck = new SKRect();

 font.MeasureText("Test",out reck);

reck ={Left=0,Top=-15,Width=39.339844,Height=15}

maui source

public static void MapHeight(ILabelHandler handler, ILabel view) =>
	// VerticalAlignment only works when the container's Height is set and the child's Height is Auto. The child's Height
	// is set to Auto when the container is introduced
	handler.ToPlatform().UpdateHeight(view);

[jbtdevgit]

SKFont font = new SKFont(SKTypeface.FromFamilyName("Arial"), 20); var reck = new SKRect(); font.MeasureText("Test",out reck);

This is kind of a work around, but this should not be needed at all.

[Tellus-farm]

VerticalOptions="Fill"

    <VerticalStackLayout>
        <VerticalStackLayout>
            <Border>
                <Grid ColumnDefinitions="1*,*">
                    <Label x:Name="label"
                   Grid.Column="0"
                   Text="0"
                   TextColor="Gray" />
                    <Entry Grid.Column="1"
                   Placeholder="Placeholder"
                   Text="Test"
                   TextColor="White" />
                </Grid>
            </Border>
            <Border>
                <Grid ColumnDefinitions="1*,*">
                    <Label Grid.Column="0"
                   Text="0"
                   TextColor="Gray" />
                    <Entry Grid.Column="1"
                   Placeholder="Placeholder"
                   Text="Test"
                   TextColor="White" />
                </Grid>
            </Border>
            <draw:Canvas HeightRequest="200" HorizontalOptions="Fill">
                <draw:SkiaShape Padding="5"
                        CornerRadius="5"
                        StrokeColor="Gray"
                        StrokeWidth="1">
                    <draw:SkiaLayout ColumnDefinitions="1*,*" Type="Grid">
                        <draw:SkiaLabel Grid.Column="0"
                                FontSize="14"
                                HorizontalOptions="Fill"
                                VerticalOptions="Fill"
                                Text="0"
                                TextColor="Gray"/>
                    </draw:SkiaLayout>
                </draw:SkiaShape>
            </draw:Canvas>
        </VerticalStackLayout>
    </VerticalStackLayout>
</ContentView>

**

**

What is the problem?

[Tellus-farm]

VerticalOptions="Fill" -> Delete

[taublast]

@jbt what happens if you add HorizontalOptions="Fill" to your <draw:SkiaLayout ColumnDefinitions="1*,*" Type="Grid"> will this measure ok when Height is not set? sorry cant repro myself right now, but will tomorrow.

[taublast]

@jbtdevgit hmm ty, will look into Grid. btw do not feel obliged to use Grid here, Absolute is faster and less buggy. it's not maui absolute, it's just like a maui grid with 1 col and 1 row that we use all the time to just overlay stuff.

[jbtdevgit]

All good, I was trying out stuffs, and saw it in your demo and just copied it. However, the reason why I want to use grid is because I want to use multiple columns and rows.

So I tried the code below:

<VerticalStackLayout>
    <Border>
        <Grid ColumnDefinitions="1*,*">
            <Label x:Name="label"
                   Grid.Column="0"
                   Text="0"
                   TextColor="Gray" />
            <Entry Grid.Column="1"
                   Placeholder="Placeholder"
                   Text="Test"
                   TextColor="White" />
        </Grid>
    </Border>
    <Border>
        <Grid ColumnDefinitions="1*,*">
            <Label Grid.Column="0"
                   Text="0"
                   TextColor="Gray" />
            <Entry Grid.Column="1"
                   Placeholder="Placeholder"
                   Text="Test"
                   TextColor="White" />
        </Grid>
    </Border>
    <draw:Canvas HorizontalOptions="Fill" VerticalOptions="Fill">
        <draw:SkiaShape Padding="5"
                        CornerRadius="5"
                        StrokeColor="Gray"
                        StrokeWidth="1">
            <draw:SkiaLayout ColumnDefinitions="*,*"
                             HorizontalOptions="Fill"
                             Type="Absolute">
                <draw:SkiaLabel Grid.Column="0"
                                FontSize="14"
                                HorizontalOptions="Fill"
                                Text="0"
                                TextColor="Gray" />
            </draw:SkiaLayout>
        </draw:SkiaShape>
    </draw:Canvas>
</VerticalStackLayout>

This is the output seems buggy to me as well

This is on Windows .NET 9 if this helps.

[jbtdevgit]

@taublast Do you know what's causing this in Windows?

I have copied the smallbutton in the demo so I ended up with the separate xaml control. I was also trying to add an image here, however, it is causing me an exception

<draw:SkiaButton x:Class="App.Controls.Buttons.ButtonIcon"
                 xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:draw="http://schemas.appomobi.com/drawnUi/2023/draw"
                 Padding="1"
                 ApplyEffect="Ripple"
                 HeightRequest="40"
                 TouchEffectColor="{StaticResource CardBackground}">
    <draw:SkiaShape BackgroundColor="{StaticResource CardBackground}"
                    CornerRadius="10"
                    HorizontalOptions="Fill"
                    IsClippedToBounds="True"
                    StrokeColor="{StaticResource Border}"
                    Tag="MainFrame"
                    VerticalOptions="Fill" />

    <draw:SkiaImage Aspect="AspectCover"
                    HeightRequest="14"
                    HorizontalOptions="Start"
                    Source="icon_google.png"
                    VerticalOptions="Center"
                    WidthRequest="14" />


    <draw:SkiaLabel HorizontalOptions="Center"
                    Tag="MainLabel"
                    TextColor="{StaticResource PrimaryText}"
                    VerticalOptions="Center" />
</draw:SkiaButton>

public partial class ButtonIcon : SkiaButton
{
    public ButtonIcon()
    {
        InitializeComponent();
    }

    protected override void OnMeasured()
    {
        base.OnMeasured();

        if (MainLabel == null)
        {
            MainLabel = this.FindView<SkiaLabel>("MainLabel");
            MainLabel.Text = Text;
        }
        if (MainFrame == null)
        {
            MainFrame = this.FindView<SkiaShape>("MainFrame");
            this.TransformView = MainFrame;
        }
    }

    //protected override void OnPropertyChanged(string propertyName = null)
    //{
    //    base.OnPropertyChanged(propertyName);

    //    if (propertyName == nameof(Text))
    //    {
    //        if (MainLabel != null)
    //        {
    //            MainLabel.Text = this.Text;
    //        }
    //    }
    //}
}

I ended up having 2 texts

For the image, if I add it. I ended up having an exception.

[Tellus-farm]

Task is canceled based on image path

<!-- Images -->
<MauiImage Include="Resources\Images\*" />
<MauiImage Update="Resources\Images\dotnet_bot.png" Resize="True" BaseSize="300,185" />

<!-- Raw Assets (also remove the "Resources\Raw" prefix) -->
<MauiAsset Include="Resources\Raw\**" LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />

Images can be added to your app project by dragging them to the Resources\Images folder of your project, where its build action will automatically be set to [MauiImage]

### **You are using the skia image.**

[Android]

FileSystem.CacheDirectory
Returns the CacheDir of the current context.

FileSystem.AppDataDirectory
Returns the FilesDir of the current context, which are backed up using Auto Backup starting on API 23 and above.

FileSystem.OpenAppPackageFileAsync
Files that were added to the project with the Build Action of MauiAsset can be opened with this method. .NET MAUI projects will process any file in the Resources\Raw folder as a MauiAsset.

The FileSystem.OpenPackageFileAsync method can't get the length of the stream on Android by accessing the Result.Length property. Instead, you have to read the whole stream and count how many bytes there are to get the size of the asset.

[Mac/Ios]
FileSystem.CacheDirectory
Returns the Library/Caches directory.

FileSystem.AppDataDirectory
Returns the Library directory that is backed up by iTunes and iCloud.

Important

The Application ID, which is part of the directory name, changes on every build so you have to retrieve the correct ID each time you build your app for a Simulator or device.

FileSystem.OpenAppPackageFileAsync
Files that were added to the project with the Build Action of MauiAsset can be opened with this method. .NET MAUI projects will process any file in the Resources\Raw folder as a MauiAsset.

[Windows]
FileSystem.CacheDirectory
Returns the LocalCacheFolder directory.

FileSystem.AppDataDirectory
Returns the LocalFolder directory that is backed up to the cloud.

FileSystem.OpenAppPackageFileAsync
Files that were added to the project with the Build Action of MauiAsset can be opened with this method. .NET MAUI projects will process any file in the Resources\Raw folder as a MauiAsset.

Important

On Windows, packaged apps operate over a virtual file system where read and write operations are relocated to mapped locations. Therefore, files might not be located where expected. For more information, see Common file system operations and Flexible virtualization.

[True]
-> Resource\Raw\icon_google.png
[False]
-> Resource\Images\icon_google.png
-> Resource\AppIcon\icon_google.png
-> Resource\Splash\icon_google.png

    <VerticalStackLayout>
        <Border>
            <Grid ColumnDefinitions="1*,*">
                <Label x:Name="label"
                   Grid.Column="0"
                   Text="0"
                   TextColor="Gray" />
                <Entry Grid.Column="1"
                   Placeholder="Placeholder"
                   Text="Test"
                   TextColor="White" />
            </Grid>
        </Border>
        <Border>
            <Grid ColumnDefinitions="1*,*">
                <Label Grid.Column="0"
                   Text="0"
                   TextColor="Gray" />
                <Entry Grid.Column="1"
                   Placeholder="Placeholder"
                   Text="Test"
                   TextColor="White" />
            </Grid>
        </Border>
        <draw:Canvas HeightRequest="200" HorizontalOptions="Fill" VerticalOptions="Fill">
            <draw:SkiaShape Padding="5"
                        CornerRadius="5"
                        StrokeColor="Gray"
                        StrokeWidth="1">
                <draw:SkiaLayout ColumnDefinitions="1*,*" Type="Grid">
                    <draw:SkiaLabel Grid.Column="0"
                                FontSize="14"
                                HorizontalOptions="Fill"
                                VerticalOptions="Fill"
                                Text="0"
                                TextColor="Gray"/>
                    <xc:SmallButton Text="Test" Grid.Column="1"
                                WidthRequest="100" HeightRequest="50" 
                                HorizontalOptions="Fill" VerticalOptions="Fill" />
                </draw:SkiaLayout>
            </draw:SkiaShape>

        </draw:Canvas>
    </VerticalStackLayout>

    <draw:SkiaShape
        BackgroundColor="BlanchedAlmond"
        CornerRadius="20"
        HorizontalOptions="Fill"
        IsClippedToBounds="True"
        StrokeColor="Gainsboro"
        StrokeWidth="1"
        Tag="MainFrame"
        VerticalOptions="Fill" />
    <draw:SkiaImage Aspect="AspectCover"
                    HeightRequest="38"
                    HorizontalOptions="Start"
                    Margin="5,0,0,0"
                   Source="google.png" 
                    VerticalOptions="Center"
                    WidthRequest="38" />
    <!--  we could put text inside shape btw..  -->
    <draw:SkiaLabel
        HorizontalOptions="Center"
        Tag="MainLabel" FontAttributes="Bold" FontSize="20"
        Margin="25,0,0,0"
        TextColor="Black"
        VerticalOptions="Center" />

</draw:SkiaButton>

public partial class SmallButton : SkiaButton
{
    public SmallButton()
    {
        InitializeComponent();
    }


    async void AnimatePress(SkiaControl icon)
    {
        await icon.ScaleToAsync(0.9, 0.9, 50, Easing.CubicOut);
        await icon.ScaleToAsync(1.0, 1.0, 50, Easing.SpringOut);
    }

    public override bool OnDown(SkiaGesturesParameters args, GestureEventProcessingInfo apply)
    {
        this.ScaleToAsync(0.98, 0.95, 16, Easing.CubicOut);

        return base.OnDown(args, apply);
    }


    public override void OnUp(SkiaGesturesParameters args, GestureEventProcessingInfo apply)
    {
        this.ScaleToAsync(1.0, 1.0, 32, Easing.SpringOut);

        base.OnUp(args, apply);
    }



    SkiaLabel MainLabel;
    SkiaShape MainFrame;

    protected override void OnMeasured()
    {
        base.OnMeasured();

        if (MainLabel == null)
        {
            MainLabel = this.FindView<SkiaLabel>("MainLabel");
            MainLabel.Text = Text;
        }
        if (MainFrame == null)
        {
            MainFrame = this.FindView<SkiaShape>("MainFrame");
            this.TransformView = MainFrame;
        }
    }

    protected override void OnPropertyChanged(string propertyName = null)
    {
        base.OnPropertyChanged(propertyName);

        if (propertyName == nameof(Text))
        {
            if (MainLabel != null)
            {
                MainLabel.Text = this.Text;
            }
        }
    }

I was testing it just in case, and the mouse clicks aren't recognized.

[jbtdevgit]

Ohh, thanks for this, I'll take note of this in the future for the usage images. From what I can see, the controls such as entry fields and buttons are pretty buggy. So I will skip the usage of it for now, I've tried couple of usages for other drawing, and I find it really useful. I will keep this discussion unanswered for now so I will avoid creating new discussions in the future if I would ever need help once more.

Just to give you a context, the image I put in was .svg and also tried using it with the SkiaSvg, apparently it wasn't showing up as well for some reason. I checked your implementation with the dotnet_bot.svg and it works fine, not sure why on my end it wasn't working as well, I double checked the build action, and it was fine as well. The image is located at Resources/Images.

[Tellus-farm]

mages can be added to your app project by dragging them to the Resources\Images folder of your project, where its build action will automatically be set to MauiImage. At build time, vector images are resized to the correct resolutions for the target platform and device, and added to your app package. This is necessary because different platforms support different image resolutions, and the operating system chooses the appropriate image resolution at runtime based on the device's capabilities.

DrawUI [False] Maui[True]

icon_google.svg ->( build action will automatically be set to [MauiImage]) ->icon_google.png

Maui -> icon_google.svg (false)
Maui -> icon_google.png (true)

<Image Source="icon_google.png" /> [****change]

DrawUI [True]

Resources/raw/icon_google.svg

<draw:SkiaSvg Source="icon_google.svg" />

You are using the skia

Drawui -> Skia
Maui -> Native

[taublast]

Regarding your button, or rather canvas, you have to enable gestures for it with <draw:Canvas Gestures="Enabled".

Looking into the other grid stuff now..

[taublast]

Images, we are not useing Resources/Images it's purely MAUI stuff. As stated in README:

All files to be consumed (images etc) must be placed inside the MAUI app Resources/Raw folder, subfolders allowed. If you need to load from the native app folder use prefix "file://". Please look at sample project Sandbox od the Demo app for example.

[taublast]

Regarding your "bugged" layout issue, this happens because you have set Canvas to Fill an unknown size, it gets height constraint Infinity from Parent. It's author MAUI parent would send him the height to fill (it doesn't) either you can ask Canvas to adapt to children height then need to set Start instead of Fill. Try that and your child shape+label will appear. At the same time if you want your stuff to fill the screen set Fill to the parent SkiaShape. At the moment it's start and it's just adapting to underlying child width, not taking the full width like MAUI borders.

Since you love grids I invite you to use nice props that maui doesn't have, might like these:

DefaultColumnDefinition, DefaultRowDefinition.

At the same time there is a funny way to create columns and rows inside not Grid layout:

1. You can use type Wrap, a bit like flex, then play with Split prop. This is nice because with split 0 you can adapt to display size instead of presuming that you will have 2 columns fit. Look at Sandbox MainPage how buttons are layout.

2. Try play with HorizontalFillRatio="0.5" and HorizontalPositionOffsetRatio might be fun:

[taublast]

Ill try to out a new nuget in few days max with many fixes for shape etc, the one out there has bugs aligning strokes on low density like windows screen and padding issue. There are way so many fixes. Along with Buttons btw, you would get platform looks to choose from out-of-the box for button, checkbox, switch for now. Some breaking changes there but worth it..