Develop Reference

UWP ScrollViewer.TopHeader with SkiaSharp does not drawing

The 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.
Anybody has an idea, why the skia is not working in ScrollView TopHeader and Left Header?
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

UWP ScrollViewer.TopHeader with SkiaSharp does not drawing
I could reproduce your issue, and I tried to re-draw canvas within PaintSurface but it also does not work, please feel free post this issue in SkiaSharp github, And I will report this to the team.

It was a bug In SkiaSharp.
It is fixed: https://github.com/mono/SkiaSharp/pull/1133
Thank you: mattleibow

UWP Fit zoomable image in its container

To make an image zoomable I'm using wrapping the image control with a ScrollViewer like such:
<Page ...>
<ScrollViewer ZoomMode="Enabled" HorizontalScrollMode="Auto" VerticalScrollMode="Auto">
<Image Source="http://i.imgur.com/iseJWq1.jpg" />
</ScrollViewer>
</Page>
I want the image to be resized to fit inside the page in both horizontal and vertical directions, just like the Stretch="Uniform" behaviour of the Image control:
But instead it resizes the image to fit horizontally only, clipping the excess of the image on the vertical direction:
I got some head start from this website, so I changed the xaml to look like:
<Page x:Name="Page"
... />
<ScrollViewer ZoomMode="Enabled" HorizontalScrollMode="Auto" VerticalScrollMode="Auto">
<Image Source="http://i.imgur.com/iseJWq1.jpg" Width="{Binding ActualWidth, ElementName=Page}" Height="{Binding ActualHeight, ElementName=Page}" />
</ScrollViewer>
</Page>
While this works fine on the stretching side of things, the image then becomes aligned to the left of the screen, and weird things happen when you zoom in/out:
Playing with the Stretch properties of the image have no effect.
How do I then make the image zoomable while initially fitting the image inside its container, just like any photo viewer app would do?

This works:
<Page x:Name="Page" ...>
<ScrollViewer ZoomMode="Enabled" MinZoomFactor="1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Image Source="http://i.imgur.com/iseJWq1.jpg" MaxWidth="{Binding ActualWidth, ElementName=Page}" MaxHeight="{Binding ActualHeight, ElementName=Page}"/>
</ScrollViewer>
</Page>
...which is exactly what the article recommended to be done.

Difficult to get an item tapped - Expand hit area

I have a Image, which I want to get the tap from it (actually the grid that contains it, because it is bigger). But this is not working right, because I have to be really precise when touching the screen to touch the button, otherwise it wont work.
<Grid Grid.Column="0" Tapped="DrawerIcon_Tapped" HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Margin="5" x:Name="DrawerIcon" Source="/Assets/but_drawer.png" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" >
<Image.RenderTransform>
<CompositeTransform ScaleX="0.5" ScaleY="0.5"/>
</Image.RenderTransform>
</Image>
</Grid>
Is there any way to expand the area of an element that gets hit when I tap?

The CompositeTransform only makes the image larger, to make the Hit area larger you have to do the following:
As you did, surround the object (Image) with a Grid
Add the Tapped event to the Grid
The Margin of the Image will determine the hit area; thus making this larger will make the hit area larger (or anything that makes the Grid larger).
Finally, and most annoyingly: Make the Background of the Grid Transparent!
To fix your code, just add Background="Transparent" and you can also increase the Margin to 10 if you like:
<Grid Grid.Column="0" Background="Transparent" Tapped="DrawerIcon_Tapped" HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Margin="10" x:Name="DrawerIcon" Source="/Assets/but_drawer.png" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" >
<Image.RenderTransform>
<CompositeTransform ScaleX="0.5" ScaleY="0.5"/>
</Image.RenderTransform>
</Image>
</Grid
Hope this helps.

I achieve it by making a transparent Rectangle out of every Grid over the object that I want to be tapped (only under the root Grid) and attaching the Tapped event to it. Apparently being under Grids and Stackpanels affect the Tapped event somehow. This is not a real fix, just a workaround. Maybe it's a bug.

how to make MediaElement to take the whole space of a Grid?

I have a MediaElement in a Grid , and i want it to take the entire space when i play it.
here is my code:
<Grid Grid.Row="2" Grid.ColumnSpan="2">
<Grid.Background>
<ImageBrush ImageSource="Resource/bgrdMedia.png" Stretch="None"/>
</Grid.Background>
<MediaElement x:Name="VideoControl" LoadedBehavior="Manual" UnloadedBehavior="Stop"
Stretch="Uniform" StretchDirection="DownOnly" MediaEnded="Element_MediaEnded"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
</Grid>
but i have that:
any ideas! thanks !

By setting the StretchDirection to DownOnly you are preventing it from scaling upwards:
DownOnly | The content scales downward only when it is larger than the parent. If the content is smaller, no scaling upward is performed.
Source
If you leave the StretchDirection as Both (the default) and have the horizontal and vertical alignments as Stretch (which you have) it should give the result you want.
Note, however, that upscaling may result in a blurred or pixelated image if the original media isn't of sufficiently high resolution.

XAML image gets cut off

In XAML I'm trying to make a large image that's cut off as a background to slowly move across the screen until it reaches the images otherside. Problem is the image is always no bigger than the display even it was stretched out. So I'm left with a image that's the size of the screen moving off with a black background.
<Image x:Name="background" HorizontalAlignment="Left" Grid.Row="1" Width="1500" Stretch="Fill" MaxWidth="1500" MinWidth="1500">
<Image.RenderTransform>
<TranslateTransform x:Name="bgTranslate" X="0"></TranslateTransform>
</Image.RenderTransform>
</Image>

The Grid control arranges the Image with the available cell size. Then the Image control cuts off the parts of the image that are outside the arrange rectangle (and hence not visible), before any RenderTransform is applied.
A simple workaround is to put the Image in a Canvas, which arranges its child elements with their desired size:
<Grid ...>
...
<Canvas Grid.Row="1">
<Image x:Name="background" Width="1500">
<Image.RenderTransform>
<TranslateTransform x:Name="bgTranslate"/>
</Image.RenderTransform>
</Image>
</Canvas>
...
</Grid>