We Keep Coding

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!

Implement Flick Gesture via GestureService from Windows Phone 8

I'm working on a Windows Phone 8 app. This app will allow a user to flick a panel up. I want this to work very similarly to the way the lock screen works. When the user 'flicks' the panel up, I want it to automatically, move up accordingly. Does anyone know how to do this? Currently, I have the following:
<Grid x:Name="myGrid" Background="Peru" VerticalAlignment="Stretch">
<toolkit:GestureService.GestureListener>
<toolkit:GestureListener x:Name="myGridGestureListener" DragStarted="myGridGestureListener_DragStarted" DragDelta="myGridGestureListener_DragDelta" DragCompleted="myGridGestureListener_DragCompleted" Flick="myGridGestureListener_Flick" />
</toolkit:GestureService.GestureListener>
<Grid.RenderTransform>
<TranslateTransform x:Name="bannerGridTransform" Y="5000" />
</Grid.RenderTransform>
</Grid>
private void myGridGestureListener_Flick(object sender, FlickGestureEventArgs e)
{
if (e.Direction == System.Windows.Controls.Orientation.Vertical)
{
}
}
For the life of me, I can't figure out how to get myGrid to smoothly react to the flick gesture accordingly. I figured someone would have already implemented this, however, apparently, I'm wrong.
Thank you!

Gesture Listener is deprecated in Windows Phone 8. When you download the latest toolkit source. It contains a sample toolkit app for window phone 8. When you click the gestures, it throws a dialog which says
The GestureListener is now obsolete in windows phone 8, as the built
in manipulation and gesture events now have functional parity with it.
This sample and the sample code demonstrated how to use the
manipulation and gesture events for purposes for which one previously
would have used the GestureListener

If someone need to implement gestures in Windows Phone 8 - look at this https://github.com/PedroLamas/WPtoolkit/blob/master/PhoneToolkitSample8/Samples/GestureSample.xaml.cs

Unfortunately this isn't as trivial as a couple of lines of code on SO since you have to account for the pan while you are holding down the screen and the flick which needs to seamlessly continue on from the pan when the user lifts their finger. A great example of this is actually a darts game since you want the dart to move while you are dragging and then fly off when you release (the flick).
You can find a great example with source code at http://windowsphone7developerguide.blograby.com/darts-gesture-listener-flick-gesture/

You dont need to use toolkit gesture listener anymore. You can use in built manipulation events. Here is the sample:-
http://phone.codeplex.com/SourceControl/latest#PhoneToolkitSample8/Samples/GestureSample.xaml.cs

Redraw unchanging background on every Draw?

This might be a very simple question, but I searched and found no other way to do it. It doesn't make sense to redraw the background on every Draw. Is there a way to draw some things and leave them on the screen?
I've tried to comment-out the
GraphicsDevice.Clear(Color.CornflowerBlue);
But that doesn't help. (What is its purpose?)

The dark purple colour you are seeing is used by XNA and DirectX to indicate an uninitialised buffer. XNA will also clear buffers to this colour to emulate the behaviour of the Xbox 360 or Windows Phone, so that if you build a game on Windows, it "just works" on those other platforms (or, rather, so it fails in the same way, so you can debug it).
XNA is double-buffered. You don't draw directly to the screen, but to a "backbuffer". The screen only displays the "front buffer". Every time GraphicsDevice.Present gets called (Game calls it for you in EndDraw), those two buffers get swapped, and what you were drawing gets displayed (and you get a fresh buffer to draw on).
I'm not sure why XNA marks the buffer as uninitialised when it gets swapped. I haven't come across this behaviour before - mostly because it's very unusual to want to swap buffers and preserve their contents.
Usually what you want to do is call Game.SupressDraw, when you know you're not going to modify the contents of the screen (saving both a call to Draw and a swap). See also answers here and here.
Keep in mind that clearing the screen with GraphicsDevice.Clear is extremely fast. And that XNA has no concept of "background" or "foreground" (you're always drawing on top of whatever is already in the buffer).
If you do have some expensive-to-render content that you want to re-use between frames, generally you would draw it into to a render target once, and then draw that to the screen each frame. But, as always, avoid premature optimisation! Graphics cards are designed specifically to redraw scenes every frame - they're pretty damn fast!

See this, if you want to just prevent it clearing the image you can do:
GraphicsDevice.GetType().GetField("lazyClearFlags", BindingFlags.NonPublic | BindingFlags.Instance).SetValue(GraphicsDevice, ClearOptions.DepthBuffer);

C# WPF How to handle animation reaching a certain point?

I'm kinda new to WPF and just started looking into animations, and just for fun i started creating the old-school game Frogger (the one with a frog that has to cross a river/road while not getting hit by cars etc).
I made the animation for the log of wood moving across the screen in the river:
<Canvas>
<Rectangle Name="shape_WaterBackground" Fill="#1E90FF" Height="20" Width="260" Canvas.Top="240"/>
<Rectangle Name="shape_Lumber" Width="40" Canvas.Top="240" Fill="Brown" Height="16" Margin="0,2,0,0" />
<Image Name="Froggy" Height="20" Width="20" Canvas.Top="300" Canvas.Left="120" Source="Froggy.jpg" />
</Canvas>
And the code-behind for this particular animation:
DoubleAnimation Animate_Lumber_Movement = new DoubleAnimation(-40, 280, TimeSpan.Parse("0:0:7"));
Animate_Lumber_Movement.RepeatBehavior = RepeatBehavior.Forever;
shape_Lumber.BeginAnimation(Canvas.LeftProperty, Animate_Lumber_Movement);
Now my question is, how do I handle when the log reaches a certain point. The reason is (like you've probably already guessed) that I would like to know how to execute an action mid-way through the animation (a different point or time in the animation, and not a static) ofc without stopping the animation.
Its somewhat the same problem I have as described in here:How to determine when an animated sprite reaches a point?, but for C# WPF.
As an example in the code above, i want the frog to survive if it jumps towards the river and its Canvas.Leftproperty matches the animated logs, or otherwise drown.
Any suggestion is greatly appreciated (but bear in mind that I'm a newbie)
Sorry for the not-so-well-explained question :)
Thank you and best regards
Lodal

Since you're just animating the Canvas.Left property, you could always just set up a DispatcherTimer and read it (Canvas.GetLeft or Canvas.GetTop).
Although, maybe this is just me, but conceptually, WPF animations are more for short spurts, sort of like screen transitions and the like - not really for handling entire game animations. If that's your aim, you're probably just better off handling the animation yourself (set up a DispatcherTimer, and then on each tick you would update your game state).

Alpha channel not working

So I am writing a basic app for the windows phone but the alpha channel doesn't seem to be showing up in any of the images I use. In Fireworks I can see the alpha channel in there.
<Image Source="Assets/Images/OnBar.png" Width="100" Height="60" Margin="280, -560, 0, 0" />
That is the xaml code used to display the image in the first place. Currently I don't have any C# code behind it so if I need to implement something on that side a point to the right direction would be appreciated. I looked around but couldn't find anything that worked or was useful. The Image itself is also white so if the alpha channel doesn't work then nothing will display. Any help is appreciated.

Just tested it, it works fine with an arbitrary transparent Image. Maybe your png export format isn't compatible with xaml. Or your Imageis inside a container which isn't transparent.
But you don't forget to declare anything in Image's parameters, alpha channel is built-in and no tweakable, as far as I know.
Please provide more details and I'll edit my post.