iOS 7's blurred overlay effect using WPF?

Question

0.00/5 (No votes)

See more:

It seems Apple's overlay is more than just a transparency. Any ideas on how to achieve this effect with WPF?
Image: http://i.stack.imgur.com/RKsfv.jpg[^]

Posted 21-Nov-14 8:48am

Arlert

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Afzaal Ahmad Zeeshan · Answer 1 · 2014-11-21T10:07:00

Solution 1

It is a new window coming up, and half the window (the top of it) is given a small amount of transparency to.

You can try to add a new StackPanel with Black background whose Alpha value is set to .4 to your current window, and fill the bottom 80% with a child that would have a Solid background with the content on it, the remaining top content would have a Transparent theme because the StackPanel would have the transparency.

The content can be aligned at the bottom using

HTML

<stackpanel name="newWindow">
   <!-- Following is the child panel with the Content; Background is White -->
   <stackpanel verticalalignment="Bottom" background="White">
      <!-- Add the content here -->
   </stackpanel>
</stackpanel>

You would be showing or hiding the newWindow in your application.

Posted 21-Nov-14 10:07am

Afzaal Ahmad Zeeshan

Comments

Sergey Alexandrovich Kryukov 21-Nov-14 17:20pm

This is not transparency. It's something like the combination of transparency and blur. Yes, it's quite possible to do with WPF, but your answer is nearly irrelevant to that.

This is going to be quite a tricky thing, it looks like. It would not be a problem to blur some separate UI element and make it see-through; this is done using the Effect classes (formerly BitmapEffect). But the problem is different: the panel is partially covered by the overlay, so only the covered part should be affected, and some UI Elements should be partially covered by the effect. So, it looks like a bitmap copy should be made and blurred. Then, when a top overlay is activated and changes size, a part of the blurred bitmap should be shown, and the top overlay made semi-transparent...

—SA

Afzaal Ahmad Zeeshan 22-Nov-14 2:22am

Well, no offense Sergey. :-)

But what I think is, there can be a StackPanel that can be given a negative margin to slide upside, which would have the same height as the entire screen (or the application window) has. Set its Background to transparent color, Brush.Opacity allows us to make it a little bit transparent (or as a whole too) brush for setting the Backgrounds. Now, once that is done, we can add another Child (no matter a StackPanel), to it, which would have a default White color.

I agree to your second paragraph, there is another way of doing things and iOS is a whole lot different architecture, but there is always a second option. :-)

Sergey Alexandrovich Kryukov 22-Nov-14 20:27pm

Afzaal,

No, the problem is not "another way" or some other way. Could you please look at the picture reference by OP more thoroughly. I can see the blur on the picture. If you don't perform the blur, it won't appear. And the real problem is that there is a rectangle, part of the container control, with the blur, and part is clear. I explain why simple application of a bitmap effect won't work this way. Probably, you can create an approach different from mine (that was just the idea, that's why I did not want to post a formal answer), but what you proposed certainly could not work out.
—SA