UWP ScrollViewer.TopHeader with SkiaSharp does not drawing

[gyorgygulyas]

I want to use the SkiaSharp Canvas in ScrollViewer, but not only in Main content, but in TopHeader and LeftHeader as well. The paint events are called, the skia is drawing, but the result does not displayed on the screen, just in a main content.

here is the example:

<ScrollViewer
	HorizontalScrollBarVisibility="Visible"
	HorizontalScrollMode="Enabled"
	VerticalScrollBarVisibility="Visible"
	VerticalScrollMode="Enabled">
	<ScrollViewer.TopHeader>
		<Grid
			Width="{Binding ElementName=Canvas, Path=ActualWidth}"
			Height="30"
			Background="LightGray">
			<TextBlock Text="Hello" />
			<skia:SKXamlCanvas
				x:Name="TopHeaderCanvas"
				Margin="0"
				HorizontalAlignment="Stretch"
				VerticalAlignment="Stretch"
				PaintSurface="OnPaintTopHeader" />
		</Grid>
	</ScrollViewer.TopHeader>
	<ScrollViewer.LeftHeader>
		<skia:SKXamlCanvas
			Width="60"
			Height="{Binding ElementName=Canvas, Path=ActualHeight}"
			Background="Gray"
			PaintSurface="OnPaintLeftHeader" />
	</ScrollViewer.LeftHeader>
	<ScrollViewer.Content>
		<skia:SKXamlCanvas
			x:Name="Canvas"
			Width="4000"
			Height="3500"
			Margin="0"
			HorizontalAlignment="Left"
			VerticalAlignment="Top"
			PaintSurface="OnPaintMainContent" />
	</ScrollViewer.Content>
</ScrollViewer>

As You can see, I tried the skia sharp canvas in wrapped in grid, directly under the ScrollViewer. Unfortunately it does not help.

Here is the result.

The left is totally empty, but is should be filled with HotPink, and the TopHeader just displays the Grid with "hello" , but it should be covered by canvas, and filled with Green color.

The SkiaSharp nuget which contains the canvas:
https://www.nuget.org/packages/SkiaSharp.Views/1.68.2-preview.21

And here are some SkiaSharp example:
https://github.com/mono/SkiaSharp/tree/master/samples/Basic/UWP/SkiaSharpSample

StackOverflow link: https://stackoverflow.com/posts/59921693

[gyorgygulyas]

Any Update?

[mattleibow]

Ah, sorry for the delay. I am actually looking at this now.

[mattleibow]

So, just found out WHAT was happening. For some reason, it is calculating the size of the canvas for the headers, but not drawing... If you use Hot Reload and change the size, then it magically starts drawing...

Thanks for bringing this up. I'll get it fixed.

[mattleibow]

So, I think I figured out what is causing this issue. It appears that the same canvas is being loaded twice, and then unloaded once. The unload causes the canvas to clear itself and unset properties to free memory. But, since it is never re-loaded (because it was already loaded), the canvas never actually realizes that it needs to hook things up again.

Looking to see if it is my fault with the double load, or a UWP bug. But, because it works for the main content, and not the header template. It may mean things...

[mattleibow]

Just found this: microsoft/microsoft-ui-xaml#1367

Basically, the exact same issue, but with Win2D. I think I can get a fix for this really soon.