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

[boops boops]

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). Here's how to do it in 10 easy steps.

1. Start with a new Forms project or an existing one. Add a button if necessary 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.

3. Set these properties for the WPF window:
- AllowsTransparency=True (check the box).
- Background = Transparent (just type Transparent instead of the existing colour).
- WindowStyle = None

4. Add the three lines of code shown in black to the XAML window just after the window declaration (generated by the Designer, shown in grey). Like a lot of the XAML code you could do the same thing in VB.Net instead - but I'm not sure of the syntax yet.

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="389" Width="525" AllowsTransparency="True" WindowStyle="None">
	<Window.Effect>
		<DropShadowEffect Opacity="60" BlurRadius="15" ShadowDepth="20"/>
	</Window.Effect>

Play around with the values to change the style of the drop shadow.

5. Drag an Image control from the toolbox onto the window. Select its Source property. You get a window where you can browse for your round shape or whatever image you want to use. Size/position the image to leave room on the MainWindow for the drop shadow.

6. Drag a button onto the window. Set its Content property to Exit or whatever text you like.

7. Double click the button to go to the code page. This is all the VB.Net code you need:

Private Sub MainWindow_Initialized(sender As Object, e As System.EventArgs) Handles Me.Initialized
        Me.Topmost = True
    End Sub
 
    Private Sub MainWindow_MouseLeftButtonDown(sender As Object, e As System.Windows.Input.MouseButtonEventArgs) Handles Me.MouseLeftButtonDown
        e.Handled = True
        Me.DragMove()
    End Sub
 
    Private Sub Button1_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles Button1.Click
        Me.Hide()
    End Sub

Now for the Forms/WPF interop part:

8. 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).

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

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

10. 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

[JuggaloBrotha]

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

[_powerade_]

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

[code]

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