taublast / DrawnUi.Maui

UI Rendering Engine for .NET MAUI powered by SkiaSharp
MIT License
213 stars 15 forks source link

Canvas doesn't render in MAUI app on initial load #97

Closed nathenxbrewer closed 4 hours ago

nathenxbrewer commented 9 hours ago

I'm trying to consume a SkiaSlider using the Canvas. For some reason, when the app loads, the Canvas is not rendered. If I change the xaml in any way, the app will Hot Reload and the canvas is then rendered.

taublast commented 8 hours ago

Hi please can you share your xaml? Please also note the platform. Would guess your canvas is used with auto-size layout parameters and is not expanding at the first measurement due to content unknown size. DrawnUi is not using MAUI defaults Fill, but always Start.

nathenxbrewer commented 8 hours ago
<views:Canvas Gestures="Enabled" HeightRequest="60" x:Name="Canvas" Grid.Row="1">
            <controls:ColorSlider HeightRequest="50" SelectedColor="{Binding SliderColor, Mode=OneWayToSource}"/>
</views:Canvas>

I had it inside of an Expander view. Once I removed the Expander, the Canvas now draws on first load.

.NET 8 MAUI - iOS, haven't tested on Android yet

taublast commented 7 hours ago

As i see both canvas and its content (controls:ColorSlider) do not present any width constraint.

If do not set either canvas horizontaloptions="fill" either widthrequest="something" it would try to adapt its width to content. So if Colorsilder has no fixed with in that case you might see this behaviour. I suspect your content has horizontaloptions="fill" so with an auto-sized canvas that might present an issue for the first measurement.

So actually, this is by design. Again as stated in readme:

Some differences from Xamarin.Forms/Maui to notice: *Layouts as other controls come with HorizontalOptions and VerticalOptions as Start and not Fill by default, so if your children do not request a size explicitly, the parent layout will not take any space at all unless you ask it to Fill the desired dimension, for example a Column needs its HorizontalOptions to be Fill or specified explicitly.

taublast commented 7 hours ago

Regarding the point of canvas being inside expander.. Might affect the measurement indeed, Canvas auto-size is purely "custom-made" (as is measures virtual drawn controls) we might have some conflicts between MAUI controls and drawn controls. I would be glad to try to solve such issues, if we find this is all not due to the problem stated in the previous message.

nathenxbrewer commented 4 hours ago

Yup, adding HorizontalOptions="Fill" did the trick. Thanks!