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

Transform a colored image to a grayscale image using XAML?

Using XAML preferably,
I need to dynamically apply a gray-scale filter on a colored image from bottom to top. That's to say, i would like to be able to change the offset value of the gray-scale filter applied to my image pro grammatically.
For example, I would like to programmatically set 50% of the image in color (from the bottom of the image to its middle), and the other 50% of the image in gray-scale (e.g. from the middle of the image to its top).
I have read a lot of different answers, tried a lot of different things, and thought about a lot of different ways to do this.
I could have two images, one on top of the other. One would be in gray-scale and the other would be in color. I would then programmatically change the size of the gray-scale image so that the image in color below it would partially show and create a sort of half-half view to the user.
However, this solution poses an issue that I do not seem to be able to resolve. When changing the height value of the gray-scale image, the image automatically rescale itself due to the 'Stretch' property which is set to Uniform (and that I do not wish to change to None).
Another way to do this would be to programmatically change the color pixels of the image. I have had some success with this in the past, however, this is too slow for what I am trying to do here (ideally, I would be changing the colors of the image from gray-scale to the original color of the image selected by the user every 50 milliseconds until a certain height is reached).
A third method could be to apply an Opacity Mask on the image and use LinearGradientBrush to change the offset value to the desired position. This is the code I am currently using, it works but simply apply a gray color to the image without changing the original colors of the image to gray-scale (resulting in a sort of a washed out colored image):
XAML:
<Image x:Name="myImage" HorizontalAlignment="Left" VerticalAlignment="Top" Source="C:\Users\Clement\Desktop\test.png" Canvas.Left="159" Canvas.Top="81" Width="500" Height="375" >
<Image.OpacityMask>
<LinearGradientBrush EndPoint="0.5,0" MappingMode="RelativeToBoundingBox" StartPoint="0.5,1">
<GradientStop x:Name="myImageLinearGradientBrushStop" Color="Black"/>
<GradientStop Color="Transparent" Offset="1"/>
</LinearGradientBrush>
</Image.OpacityMask>
</Image>
Code-behind (in a timerEventProcessor that repeats itself every 50ms):
myImageLinearGradientBrushStop.Offset = percent * 0.01;
As mentioned previously, I have browsed a lot of different websites, read a lot of similar questions and tried a lot of different answers and still cant satisfactorily solve the problem.

The XAML below uses a Grid with two rows to display two Images on top of each other. The Width and Heigh of the top Image are bound to the size of the bottom Image, which spans both Grid rows. An inner Grid is used to clip the top Image.
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Image x:Name="image" Grid.RowSpan="2" Source="..."/>
<Grid>
<Image Width="{Binding ActualWidth, ElementName=image}"
Height="{Binding ActualHeight, ElementName=image}"
HorizontalAlignment="Center" VerticalAlignment="Top">
<Image.Source>
<FormatConvertedBitmap Source="{Binding Source, ElementName=image}"
DestinationFormat="Gray8"/>
</Image.Source>
</Image>
</Grid>
</Grid>

Thanks to Clemens' help, I was able to get a solution to my problem!
This is the final XAML code for those whom might be interested:
<Grid Width="500" Height="375">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Image x:Name="image" Grid.RowSpan="2" Source="C:\Users\Clement\Desktop\test_image.png" />
<Grid Margin="0,0,0,166" Grid.RowSpan="2">
<Image Width="{Binding ActualWidth, ElementName=image}"
Height="{Binding ActualHeight, ElementName=image}"
HorizontalAlignment="Center" VerticalAlignment="Top">
<Image.Source>
<FormatConvertedBitmap Source="{Binding Source, ElementName=image}"
DestinationFormat="Gray8"/>
</Image.Source>
<Image.OpacityMask>
<ImageBrush ImageSource="C:\Users\Clement\Desktop\test_image.png"/>
</Image.OpacityMask>
</Image>
</Grid>
</Grid>
Here I simply added the OpacityMask to the Gray8 image to bring back its transparency.
Happy coding!

Bring Window Buttons to Front

I'm currently developing a Twitter application for Windows, similar to the Twitter client for OSX.
I'm using the Windows Shell Extensions library found here to make the entire window Aero, and be able to extend beyond the bounds of the designated window location.
I want the window buttons (Minimize, Maximize, Close) to be shown over top of the grid with the white background. This is a functionality that I thought would have been built into Windows, but apparently I'm wrong.
The two images below illustrate my point. In the second image, I want the window buttons to take precedence over the white-background grid, not the other way around like it's shown.
Is there some kind of code snippet or XAML-snippet that'll help me? Has anyone else ever had this problem before?

I stumbled upon a simple, yet dirty solution. I just made a path to go around the outside of the Windows buttons, and set the background of the outside to white, or whatever background color I was using. Then I just pieced rectangles together to make it look nice.
Here's the resulting code:
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Top" Grid.Row="0" Height="20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.0*" />
<ColumnDefinition Width="105" />
<ColumnDefinition Width="5" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Fill="#FFFFFFFF" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<Path HorizontalAlignment="Stretch" Grid.Column="1" Stretch="Fill" VerticalAlignment="Bottom" Height="20" Fill="#FFFFFFFF" Data="M 0,4.11334L 4.008,4.11334C 1.792,4.11334 0,2.27332 0,0L 0,4.11334 Z M 140,4.11334L 135.957,4.11334C 138.192,4.11334 140,4.11334 140,0L 140,4.11334 Z " />
<Border Grid.Column="2" CornerRadius="0, 10, 0, 0" Background="#FFFFFFFF" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</Grid>
And here's the resulting image:

you should hide your minimize maximize and close buttons and draw your own like described here.
http://winsharp93.wordpress.com/2009/07/21/wpf-hide-the-window-buttons-minimize-restore-and-close-and-the-icon-of-a-window/

Advanced Effects in WPF?

I've been trying to recreate this GUI purely in WPF, and I'm having problems:
The shadow. The shadow on the main element doesn't show inside the fill - when using DropShadowEffect in WPF, it does. As of yet I've found no solution to this.
Background images - the main element has a slight pattern in it, a diagonal one. But in WPF, I can't use background images like this. Chances are I'm just missing something.
The slight inset, in the main element (at the top) - not easily replicated.
So anyway, I guess my question is, how can I accomplish these kinds of effects in WPF?

Hopefully this snippet will point you in the right direction:
<Grid>
<Border x:Name="Blur"
BorderThickness="5"
CornerRadius="5"
BorderBrush="#7F000000">
<Border.Effect>
<BlurEffect Radius="8" />
</Border.Effect>
</Border>
<Border x:Name="Outter"
BorderBrush="#CCD3D3D3"
BorderThickness="1"
CornerRadius="5"
Margin="2">
<Border.Background>
<ImageBrush Viewbox="0,0,45,38"
ViewboxUnits="Absolute"
Viewport="0,0,45,38"
ViewportUnits="Absolute"
TileMode="Tile"
ImageSource="<SomeImageThatIsATileOfThePattern>"
Opacity="0.3"
Stretch="Fill" />
</Border.Background>
</Border>
<Border x:Name="Inner"
BorderThickness="0,1,0,0"
CornerRadius="5"
Margin="2,4,2,2"
BorderBrush="#7FD3D3D3" />
<ItemsControl Background="HotPink"
Margin="11"
Height="21" />
</Grid>
The result is:
[I used a generic image, just to show the repetition. The original image is W50xH38 in size - hope the repetition is noticeable]
Play with the values for Viewbox and Viewport to adjust to your image.
Of course, the ItemsControl should not have the pink background and its height should not be a constant, it was done for demo purposes.

GestureListener in ScrollViewer on Windows phone 7 does not work

I have a prblem: If I enter this kind of xaml:
<Grid Grid.Row="1">
<ScrollViewer Name="scrolViewer" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" BorderBrush="AliceBlue"
BorderThickness="5" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Image Name="mapImage" CacheMode="BitmapCache" RenderTransformOrigin="0.5 0.5">
<Image.RenderTransform>
<CompositeTransform x:Name="transform" />
</Image.RenderTransform >
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener PinchStarted="OnPinchStarted" PinchDelta="OnPinchDelta" />
</toolkit:GestureService.GestureListener>
Gestures does not work, but image slides as it is expected to.
If I remove tag - gestures begin to work.
How do I enable guestures to zoom and rotate image inside scrollviewer or how do I create my own scrollviewer based on gestures.
Thanx in advance!

I'm not sure putting your image in a ScrollViewer is a great idea as it's possible the gesture handling between ScrollViewer and GestureListener will compete.
See Jeff Prosise's blog for an example of how to zoom/rotate using GestureListener. The whole blog post series is very useful if you want to learn more about WP7 touch.
(Thanks to Derek's answer to a previous SO question.)