Click here to Skip to main content
15,793,452 members
Please Sign up or sign in to vote.
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?

1 solution

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

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

You would be showing or hiding the newWindow in your application.
Share this answer
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...

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    

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.

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

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900