We Keep Coding

unexplained behavior for a VisualBrush

I have a VisualBrush that contains a MediaElement. Here is the xaml:
<Rectangle Name="myRectangle" Grid.Row="1">
<Rectangle.Fill>
<VisualBrush x:Name="myVisuaBrush" Stretch="Uniform">
<VisualBrush.Visual>
<MediaElement Name="me_zoneOneAdvertisement" />
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.Fill>
</Rectangle>
The video plays just fine with the c# code below:
this.me_zoneOneAdvertisement.Source = new Uri("C:\\a.mp4");
this.me_zoneOneAdvertisement.LoadedBehavior = MediaState.Manual;
this.me_zoneOneAdvertisement.Play();
ContentWindow contentWindow = new ContentWindow();
However, the whole point of using a MediaBrush is to extend the capability of the MediaPlayer without wasting resources. When I try to open up a new Window and then fill an element in that window, I can see nothing in the current window where it used to work, and the new window that opens up has no content either. Here is the code that breaks everything. dislay1 is a rectangle, and I am trying to fill it with the visual brush. Why would this prevent the video from playing in the original window, and why doesn't it work in the new window I just created?
contentWindow.display1.Fill = this.myVisuaBrush;
P.S. - I can get this to work if I declare the media brush as a page level resource. Still though, I don't understand why I can't use media brush from the body of the xaml to fill an element in another Window.

The MSDN documentation of VisualBrush says the following:
However, the root UIElement is essentially isolated from the rest of the system; styles, storyboards, and external layout can't permeate this boundary. Therefore, you should explicitly specify the size of the root UIElement, because its only parent is the VisualBrush and therefore it cannot automatically size itself to the area being painted. For more information about layout in Windows Presentation Foundation (WPF), see the Layout.
That means that the Visual inside the brush is isolated from the layout process. I think this causes your problems if you specify the visual inline.
I hope this helps a little.

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 are the semi-transparent blur windows in OSX and W10 Start Menu created?

I'm currently working on a window that focuses on some elements on screen while blurring the rest of the area.
Using common methods like the WindowCompositionAttribute and the others are not suitable for this situation as there are limitations to it and it doesn't meet the standards regarding the intensity of the blur, contrast and colors which should be strict.
What i have managed to solve my problem was building an image stream with a light image encoder to enhance performance but then that wasn't enough. So, i thought of writing a motion detection algorithm to only steam when there's motion, but it still didn't change the performance drops.
What i need is something like those of the native OSX windows and Windows 10 Start Menu, so how are they created and run efficiently without any heavy load on the performance?

To create a new Window from scratch you have to set WindowsStyle to none (AllowTransparency="True" can be set only along with WindowsStyle="None") and from there build the style of the window.
However, you will face several issues if you follow this approach:
-no buttons (minimize, close)
-no support for fullscreen (taskbar issues)
I would suggest you to have a base view and include the other views inside the main view(which has the blur effect).
The blur effect could be obtained easily by doing something like below:
<Grid>
<Grid Margin="5" Background="#FF3782DC">
<!--<Grid.Background>
<Image Source="test.png"></Image>
</Grid.Background>-->
<Grid.Effect>
<BlurEffect Radius="100" />
</Grid.Effect>
</Grid>
<TextBlock
x:Name="textBlock"
Height="61"
Margin="136,82,211,0"
VerticalAlignment="Top"
Text="test"
TextWrapping="Wrap" />
</Grid>
I've set a color for the background, but you could set an image as background and by default it would be blurred (here you should set a binding and every time the view changes, you have to take a snapshot of the screen and set the source of the Image). However you will probably have some performance issues, but with a good encoder (JPEGencoder) it will be fast enough.
Hope that helps you!

how to stretch/resize svgs in uwp's xaml?

Since the creators update came out, uwp can use svg images as briefly explained here (minute 3).
I have this svg (48x48) and i can use it fine, if (and only if) i set the image's width&height to 48 and the strech to none:
<Image Source="ms-appx:///Assets//check.svg" Height="48" Width="48" Stretch="None"/>
If i set the stretch to fill, the image disappears. If i increase the width and height i can see that the icon is pinned to the upper left corner of the image (screenshot with a different svg but same size). Isn't Stretch=Fill and a fixed height/width the intended way to scale an image?
It looks to my as if the stretching algorithm does not grasp that my svg is supposed to be 48x48. Am i doing it wrong, or are there workarounds?

Okay, so here is how I solved this!
YouTube Video for this!
Open the SVG file
The SVG file Width and Height - set these to auto!

I've been having the same issue all morning and was about to completely give up on Svg support, seems mad that you can't get a scalable format to scale properly...
But, I had one more go and I think I've worked this out.
It seems that you need to tell the SvgImageSource to rasterize at the SVG's original design size and then get the Image to scale it. Not sure it's a particularly helpful approach, but certainly solves it as of build 15063.
<Image Width="24" Stretch="Uniform" VerticalAlignment="Center">
<Image.Source>
<SvgImageSource UriSource="ms-appx:///Assets/salesorder.folder.plain.svg"
RasterizePixelHeight="48"
RasterizePixelWidth="48" />
</Image.Source>
</Image>
So if the SVG was 48x48 we turn it into a bitmap at 48x48 using the RasterizePixelHeight and RasterizePixelWidth values and then the image scales that to 24x24.
Hope that helps.
Update
I just re-read your question and realised that you were looking to increase the scale whereas I've been working to decrease it. Looks as though the technique still works, but as you scale up you're going to lose any sharpness of image due to the bitmap scale process. I think this points to a fundamental flaw in the current implementation. They seem to be rendering the svg as a bitmap, and we have to tell it the original size to get it to render properly, and then they allow the bitmap code to do the rest of the work.
I think it's somewhat debateable whether this is true support or an odd half way house. Somewhere someone suggested that Adobe Illustrator can generate XAML paths, I think I'm going to look at that to see whether I can get a better quality output, shame though because I really like Inkscape :-(

For me, it worked with modifying SVG file like this:
Add appropriate preserveAspectRatio property to svg tag. For me it was "xMinYMin meet".
Set viewbox property of svg tag to this template "0 0 ActualHeight ActualWidth", in my case it was "0 0 1050 805".
Set height and width of svg tag to "auto".
Now svg element is relative to Height, Width and Stretch properties you provide in your XAML page or view.
It might be needed to rebuild the project for XAML Designer to take effect.
SVG File:
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 1050 805" width="auto" height="auto" ... > ... </svg>
XAML File:
<Image
Width="200"
Source="ms-appx:///Assets/Photos/Illustrations/sample.svg"
Stretch="UniformToFill" />

For me it works only if you set RasterizePixelHeight and RasterizePixelWidth to the svg original resolution (e.g. document properties in Inkscape).

For me it worked without setting those Properties, but adding preserveAspectRatio="xMinYMin" to the <svg ...> tag and deleting width and height from the <svg ...> tag.

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.