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

[boops boops]

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:

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:

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.