"Shaped Form" with soft drop shadow, translucent colours -- using WPF

Update 25 July 2013: Please see post #5 below.


Attachment 89166

If you use VB2008+ it's not all that hard to conjure up a free-floating image with luscious drop shadows like my pet ghost above. In fact it's not really a Form but a WPF window. Even if you have never learned any WPF you should be able do it with any image with a transparent background or with semi-transparent colours. For the moment you'll have to find your own image to use (I'll see if I can post some example images later but I'm not giving my ghost away:p). Here's how to do it in 10 easy steps.

Edit: see Post #5 for an improved and slightly shorter procedure. It also has an image with partial transparency which you can download to use for testing purposes.


BB

This thread would be awesome if an example project was attached to it.

+1 rep (sorry, couldn't rep you by clicking on the star)

Thanks for this! I had no idea how much more control you had with the GUI in WPF.

The point of this "tutorial" is to show that it's not particularly hard to take advantage of WPF in what is basically a Windows Forms application. I have made it a bit shorter than in Post #1. Now most of the Window properties are set in the VB.Net code so there is less for me to explain (and great news for copy-paste coders;)). Of course, to do anything more complicated in a WPF GUI, it would be normal to delve into the WPF controls and XAML coding. You can download an image to use in this tutorial from the attachments below.

1. Start with a new Forms project (or an existing one). Add a button to show/hide the WPF shaped form. I'll provide other details shortly.

2. Right-click on the solution name, if there is one, and select Add. Or select Add from the File menu. Add a WPF project to the solution. Name it WPFShapedForm or whatever you like. Apart from the size, some useful Window properties will be set in the code below.

3. Drag an Image control from the Toolbox onto the Window. Select its Source property and click the button with 3 dots on the right. You get a window where you can browse for whatever image you want to use (see screenshot below). Size/position the image to leave room on the MainWindow for the drop shadow.

4. Drag a button onto the window. Set its Content property to Exit or whatever text you like. Double click the button to go to the code page.

5. Here is the VB.Net code:

vb.net Code:

Private Sub MainWindow_Initialized(sender As Object, e As System.EventArgs) Handles Me.Initialized
        Me.WindowStyle = Windows.WindowStyle.None
        Me.Topmost = True
        Me.AllowsTransparency = True
        Me.Background = Brushes.Transparent
        Me.Effect = New Effects.DropShadowEffect With {.BlurRadius = 15, .ShadowDepth = 20, .Opacity = 0.6}
    End Sub
 
    Private Sub MainWindow_MouseMove(sender As Object, e As System.Windows.Input.MouseEventArgs) Handles Me.MouseMove
        If e.LeftButton = MouseButtonState.Pressed Then Me.DragMove()
    End Sub
 
    Private Sub Button1_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles Button1.Click
        Me.Hide()
    End Sub

Play around with the BlurRadius, ShadowDepth and Opacity values to get the effect you like best for your image.

Now for the Forms/WPF interop part:

6. In Solution Designer, right click on the WinForms project name and select Add Reference ... Add the following 3 references:
- PresentationCore (under .Net tab)
- PresentationFramework (under .Net tab)
- WPFShapedForm (under Projects tab).

7. In the form's code, declare an instance of the WPF window and code the Button Click to show it:

vb.net Code:

Private shapedform As New WpfShapedForm1.MainWindow
 
Private Sub Button1_Click(sender As System.Object, e As System.EventArgs) Handles Button1.Click
    shapedform.Show()
End Sub

8. Set the Form project as the Startup project. Run it. Now you can click on the Form's button to show the WPF window with drop shadow, and click the WPF exit button to hide it again.

BB


EDIT: If you need a semi-transparent image to experiment with for this tutorial you can download the "Baby George" image below. On my computer I can right click the image in FireFox, select Copy Image, paste it into PaintDotNet and save it as a PNG file. You can do it however you do it with your own favourite software. But make sure you save it in a format that supports transparency such as PNG.

A couple of questions for the original author or to anyone who has successfully used the techniques described here:

Regarding item no. 3 above. When I drop down the Source combobox, I don't "get a window where you can browse for whatever image you want to use". I'm attempting this in VS2012 Professional. I only see an empty dropdown list with what looks like room for 8 rows or so. But as I say, it is empty.

Assuming I get past that hurdle, how then would I assign this form as my main UI project's splash screen? I have referenced the WPF forms project in my main UI project, but the objects within it are not visible in the main UI project's Splash Screen combobox.

Thanks for any help.

A couple of questions for the original author or to anyone who has successfully used the techniques described here:

Regarding item no. 3 above. When I drop down the Source combobox, I don't "get a window where you can browse for whatever image you want to use". I'm attempting this in VS2012 Professional. I only see an empty dropdown list with what looks like room for 8 rows or so. But as I say, it is empty.

Assuming I get past that hurdle, how then would I assign this form as my main UI project's splash screen? I have referenced the WPF forms project in my main UI project, but the objects within it are not visible in the main UI project's Splash Screen combobox.

Thanks for any help.

In step 3, select the Source property of the image and click the button with 3 dots on the right (I've edited post 5 above to mention this). I assume that's the same in VS2012P as in VS2010.

WPF provides its own very easy way to use an image as a Splash Screen. Once you have resolved the above problem, you could follow steps 1 to 3 from post #5 (except there's no need to add a button in step 1). Then, in the Solution Designer:

4a. Right-click on the WPF project name and set it as the Startup Project.

5a. Right-click again, and select Add Reference. Add a reference to the Forms project.

6a. Expand the Images folder of the WPF project and right-click on the Image name. Select Properties, and set its Build Action to Splash Screen.

7a. Right-click on the WPF window and select View Code. Add the following code:

vb.net Code:

Private myForm1 As New WindowsApplication1.Form1 'substitute your Forms project name and startup form.
 
    Private Sub MainWindow_Initialized(sender As Object, e As System.EventArgs) Handles Me.Initialized
        Me.Visibility = Windows.Visibility.Hidden
        myForm1.Show()
End Sub

If necessary, you could put a delay in your Form1 Load event sub, e.g. Threading.Thread.Sleep(2500), to give the Splash Screen time to show.
That's all you need to try it out.

I don't know if it's possible to rescale the image or to add a drop shadow to a Splash Screen displayed this way. But I should think it's possible to use the WPF Window+Image itself as a Splash Screen instead.

BB

Is there any other way except using WPF to do so ?

You can help me here

You could convert a Form into a Layered Window by setting the WS_EX_TRANSPARENT bit. The results are identical to those for a WPF window as far as per-pixel alpha blending is concerned.That's not surprising, because WPF uses layered windows under the surface.

BB

Let me preface this a bit so it makes sense... BB, I like this idea, so I'm trying to do it. I was having a hard time at first because I couldn't get it to add a new project. I was trying to do it by right clicking on my program name in the Solution Explorer, but it didn't work. But I tried the "File" menu and it had an "add" item where I can add a project. So now it's cool. Will let you know when I get stumped.

Just learned my first thing about WPF. The keyword "Visible" is not part of the language anymore so I had to use me.hide. My project is a tray/notification one and doesn't show a window when it comes up, so that's why.

First roadblock: I've never used multiple projects together so I need a little help. The WPF project is not visible to the main project. So I can't tell it to "hide" or whatever from the main code. What's the trick?

Quote:

---

Originally Posted by jumper77

Just learned my first thing about WPF. The keyword "Visible" is not part of the language anymore so I had to use me.hide. My project is a tray/notification one and doesn't show a window when it comes up, so that's why.

---

It's a bit more complicated in WPF. The Window, like other controls, has a Visibility property which can have 3 different values (Visible, Hidden, Collapsed). There's also a read-only IsVisible property, which I think allows for controls being hidden by other windows etc. But Hide and Show aren't changed.

Quote:

---

Originally Posted by jumper77

First roadblock: I've never used multiple projects together so I need a little help. The WPF project is not visible to the main project. So I can't tell it to "hide" or whatever from the main code. What's the trick?

---

Did you set all the References as in Step 6 of post #5? In particular your "main" project needs a reference to your own WPF project (WPFShapedForm or whatever you choose to call it).

BB

found my problem, had to add a reference to the WPF solution.

edit: oops, didn't realized that you had just said that :)

BB, there is some strange stuff going on. I know you must to have seen it before. On the WPF window there are 4 small boxes in the center of the window when it comes up and when you click on them, they will open certain parts of VS. I'm clueless, would you please explain what that's about.

thanks

Before I forget, I wanted to tell you something... I've been messing around trying to get the image to show up and for various reasons I put a button on the form. I still don't have the image working yet, but I have a button that has the best drop shadow I've ever seen :D

It's awesome!

Quote:

---

Originally Posted by jumper77

BB, there is some strange stuff going on. I know you must to have seen it before. On the WPF window there are 4 small boxes in the center of the window when it comes up and when you click on them, they will open certain parts of VS. I'm clueless, would you please explain what that's about.

thanks

---

Just a guess: it's some or other control you dragged onto the window and given such a small width and height that all you see is the resizing handles. If you click it once, you should be able to see details of it in the XAML window. And you can delete it with the Del key. A double-click should take you to the default event handler on the code page.

Or maybe it's something else:confused:. BB