We Keep Coding

Uwp advanced animations

I want to create advanced animation with C# UWP.
Animation that would look like this:
Any idea how to achieve this?

I'm not so sure what is under your blur effect. Looks like it is a wave related animation. So let's make your animation to two parts:
See Justin's answer on the following thread, the answer will tell you how you can create a wave animation.
As mentioned above by Jet Chopper, we can add blur brush(CompositionBackdropBrush) based on sample code from this MS doc
So to understand this in a simple way, you can:
Download Justin's sample from here
Add BackdropBlurBrush to his project
Write the following code in MainPage XAML:
<local:WaveProgressControl x:Name="WaveProgressControl" />
<Rectangle Width="200" Height="200" Stroke="Red" StrokeThickness="3" >
<Rectangle.Fill>
<blureffect:BackdropBlurBrush BlurAmount="10"/>
</Rectangle.Fill>
</Rectangle>
The blureffect above refer to the namespace which include your BackdropBlurBrush. In this way you have a basic sample that looks like what you want. You can modify your project based on this.

How does this DrawingBrush Geometry graph grid work?

I just started using Geomectry Drawing in xaml and I came across this interesting article https://msdn.microsoft.com/en-us/library/aa480159.aspx. Here, I find out that the following drawingbrush gives a graph diagram as an output.
<DrawingBrush x:Name="gridBackgroundBrush"
Viewport="0,0,10,10"
ViewportUnits="Absolute"
TileMode="Tile">
<DrawingBrush.Drawing>
<DrawingGroup>
<DrawingGroup.Children>
<GeometryDrawing Geometry="M0,0 L1,0 1,0.1, 0,0.1Z" Brush="Green" />
<GeometryDrawing Geometry="M0,0 L0,1 0.1,1, 0.1,0Z" Brush="Green" />
</DrawingGroup.Children>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
From further reading, I figure out that M means starting point or move to, L means line and Z means close but could not figure out how this will give me two lines - one horizontal and one vertical? Any help understanding this will be highly appreciated. Thanks.

So here's a quick break down for you.
Your example is a DrawingBrush which is explicitly set to TileMode="Tile" which is the equivalent of repeat-x/repeat-y if you're more familiar with CSS as example. So it's instructed to repeat itself up-down/left-right repeating.
Your two bits of your Geometry Drawing if translated individually are two squares with one stretching vertical, one stretching horizontal. While your explicitly set ViewportUnits is dictating the size and position effectively making repeated columns and rows.
Your Path Geometry uses Path Markup Syntax to draw these lines as you pointed out. For a more visual explanation replace your Brush on each.
<GeometryDrawing Geometry="M0,0 L1,0 1,0.1, 0,0.1Z" Brush="Red" />
<GeometryDrawing Geometry="M0,0 L0,1 0.1,1, 0.1,0Z" Brush="Blue" />
...and voila! You have yourself a repeated line background with effective vertical/horizontal columns creating your grid. See links for more detail and hope this helps. Cheers!
Oh, and the question you got that from also had a link that would have shed a little light on it but not as much as you'd like so I didn't mark this duplicate.
ADDENDUM:
A little more clarification. Though if you want to learn more I'd follow the documentation link someone spent a lot of time writing to answer this already. Think if you have an x,y grid you're drawing points on.
Say you're using the pen tool in something like Adobe Illustrator, or Blend. Your first click is setting your M as your start point based on the relative size of the container. Then you click in another spot...well now you effectively have a L line.
So when we see: M0,0 L1,0 that's our first starting Line. In this case it's the top corner stretching to the right corner since there's not another anchor in the line between the two points. The next set acts as the anchor to tell that line to change it's direction to make the side, and so on, and so fourth until you hit the end at Z. Hope this helps but I would encourage the documentation first.
Here they are individually if you feel like tinkering with numbers and learning:
<Path Data="M0,0 L1,0 1,0.1, 0,0.1Z"
Height="150" Width="150" Stroke="Red" />
<Path Data="M0,0 L0,1 0.1,1, 0.1,0Z"
Height="150" Width="150" Stroke="Blue" />

I came cross the same thing when I used GMaps V3. It is an SVG path notation path that allows you to draw on WPF and on browsers too. You can find the complete documentation in the link.

Grid tilt effect like Windows 8 Start Screen

I'm trying to create a tile in WPF that looks like the tiles of the Windows 8 Start screen.
Actually, the problem is that I don't know how to make the tilt effect of the Windows 8 tiles ( the click effect ).
I tried different transformations such as matrix transofmration, but this is not what I want.
Explanation in image :
Default style:
Here is my code
<Grid >
<Grid.LayoutTransform>
<MatrixTransform>
<MatrixTransform.Matrix >
<Matrix OffsetX="5" OffsetY="5" M11="1" M12="0.1"></Matrix></MatrixTransform.Matrix>
</MatrixTransform>
</Grid.LayoutTransform>
<Grid.Background>
<ImageBrush ImageSource="/MaCollectivitéWPF;component/src/Img/Home/Porte Document-petite.jpg" Stretch="UniformToFill" >
</ImageBrush>
</Grid.Background>
It's almost what I want but I only want the bottom to be tilted.
I've take a look at the 3D controls but I think it's to complicated for what I'm looking for.
Is there a solution with Layout Transformation I would not have seen yet ?

I think you want to pinch Greg Schechter's Planerator for tilting.
Your use case is exactly the one in the article, so I doubt you'd need to change anything. I've not tried it myself, but it seems to reduce tilting the plane to fairly easy xaml. Worth a look at least.
<pl:Planerator RotationY="35">
<StackPanel Orientation="Horizontal" ... >
<StackPanel>
<Label FontSize="24" Content=" " Foreground="#FF000000"/>
<Border ... >
<MediaElement x:Name="myMediaElement" />
</Border>
</StackPanel>
<ListBox ... />
</StackPanel>
</pl:Planerator>

Tint a partially transparent image in WPF

How can I tint/colorize an image in WPF (using MVVM) without sacrificing performance? A purely XAML solution would be ideal, as modifying bitmaps in the code will cause performance loss with lots of changing images. The image is made up of more than simple shapes, so it is not possible using a path.

Unlike WinForms/GDI+, WPF does not seem to contain any easy ways to colorize/tint an image as it is being rendered. Two ideas for accomplishing this are, using a shader, or overlaying a colored rectangle over the image.
I decided to try the rectangle route and found that it works. Basically, all you need to do is overlay a colored rectangle over your image, and use an OpacityMask to restrict the color fill to a certain area. OpacityMask is primarily used with paths, but it can take any kind of brush, including an ImageBrush. This means you can use your image as a "stencil" for the colored fill.
Example: (Taken from my application where a user can "highlight" a section of a map, the actual image looks like this)
Before Overlay & Mask
After Overlay & Mask
Here is all of the required XAML for this:
<Image
Source="{Binding MyImage}"
Width="150"
Height="150" />
<Rectangle Width="150" Height="150">
<Rectangle.Fill>
<SolidColorBrush Color="{Binding Color}"/>
</Rectangle.Fill>
<Rectangle.OpacityMask>
<ImageBrush ImageSource="{Binding MyImage}"/>
</Rectangle.OpacityMask>
</Rectangle>
To bind the color to a brush as I did, use a ColorToBrushConverter.

SnapsToDevicePixels doesn't work with images?

I've encountered a problem with bitmap images in WPF. When the image container starts on a position which is not a whole number, the image seems to not respect the value of SnapsToDevicePixels.
Example code:
<Window x:Class="BlurryImage.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="110" Width="200">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<Button SnapsToDevicePixels="True">
<Image SnapsToDevicePixels="True" Source="i16.png" Stretch="None"/>
</Button>
<Button SnapsToDevicePixels="True" Margin="10.333333,0,0,0">
<Image SnapsToDevicePixels="True" Source="i16.png" Stretch="None"/>
</Button>
</StackPanel>
</Window>
(Note the value of the left margin: 10.333333.)
Here the image i16.png is a simple 16x16 bitmap in 96 DPI resolution with thin vertical lines: . (My system resolution is 96 DPI, Windows XP, .NET 4)
When I run the program, the first image is sharp, whereas the second one is blurry:
Different sources, including some here on stackoverflow, suggest different workarounds. (For example, these posts: [1], [2] and [3].) I tried the workarounds, and them seem to work. Using UseLayoutRounding="true" on the main window makes both images sharp. Using RenderOptions.BitmapScalingMode="NearestNeighbor" on the image makes it sharp, too.
The question is, why doesn't SnapsToDevicePixels="True" work without workarounds? Is it a bug in WPF or I am using it in a wrong way?

From this blog entry:
SnapsToDevicePixels
WPF anticipated that there would be cases where people wanted to align
with the pixel grid instead of using sub-pixel precision. You can set
the SnapsToDevicePixels property on any UIElement. This will cause us
to try and render to the pixel grid, but there are quite a few cases
that don't work - including images. We will be looking to improve
this in the future.
So it's just a known limitation of what SnapsToDevicePixels can do.