I don’t know if it is a case of my actually knowing more or the fact that doing stuff with Windows Presentation Foundation (WPF) is easier. To me it seems doing what I want is getting quicker these days.
The ability to create and use semi-transparent forms has been around for a while now, but the process to creating these types of forms has not been the easiest.
Visual Basic.NET 2005 gave us access to the opacity property of a Windows form. The down side of this was that it made the whole form, including any controls on the form, opaque thus still showing some of the form itself.
With very little code, creating a gadget type window with WPF is relatively easy. In fact look of the Window can be created with as few as 5 lines of code. How and what your gadget window does is entirely up to you. (I will apologize at this point in time for how bad my gadget will look. I am not a graphical person at all and my colour coordination is really, really bad.)
What I decided to do was I wanted something that would play some music as I worked on my computer. VbCity Leader and Microsoft MVP Ged Mead showed us how to add sound to a WPF app, so I decided to incorporate that idea to my project.
Now admittedly what we will end up at the end of this post is not very exciting or versatile, but it is a start and can be expanded on to suit your wishes. I just want to show the basics on how to create the gadget window.
The first thing we need to do is create a new WPF Application and the XAML for it is pretty basic.
Before you can start adding code to the code behind page there is one thing that you must do and that is you must add a Name property to the XAML of the Window. Until you do that you don’t have, on the code behind page, access to the Events of the window.
I know that it looks like can get to the Window1 Events, but if you tried to set or change any settings for Window1 you would get errors.
So in the XAML of your page you just need to add a Name property.
I also changed the Title of the page as you can see the title in the Taskbar of your computer.
Now that we have a name for the form we can tap into the events of the page itself and start adding code to the code behind. This was when I ran into the first gotcha.
The first gotcha I ran across was in the placement of the code I was using. The first time I tried to add the code I used the Form_Loaded event, an event that I have used for setting properties of the form in the past, which has always worked like a charm. The code I used was:
What happened, however, when I tried to run my project to see what happened was I got an InvalidOperationException . The reason this exception was thrown is because you can not set the AllowsTransparency property of a form once the window has been shown.
To get around this problem I put the code in the Initialize event of the form which let me set all the properties of the form that I wanted.
As you can see by the code above, I have set the height and width of the form to 200, then I made changes to the three properties that really make this a gadget type window.
The first property I set was to set the AllowsTransparency to True. What this property does is indicates whether the client area of the window supports transparency.
The second property set was the Background of the form. This is set to the color Transparent.
The third property set was the WindowStyle. What the WindowsStyle property does is tell the application what sort of border to put on the window. By setting the style to None, the ControlBox which you would normally see at the top right of a window are not show effectively removing the border of the form.
If you were to run the project now you would not actually see anything because your form is transparent and there are no other controls on it just yet. You could verify that it is running by taking a look at the Taskbar on your computer.
(You certainly don't need to set the properties of the form, then add controls like I am doing, you could set up your form like you want it then make whatever changes you want to make.)
On my form I decided that I am going to have an Ellipse and two Buttons. One button is to start the music and one to exit the Application.
Let's start with the Ellipse since this will be what our "form" will end up looking like.
First off I added the Ellipse to the XAML of my form making sure that I gave it a name so that we could set its properties on the code behind page.
Next I made the changes to the properties of the Ellipse on the code behind page. I set the Fill property (again I apologize for any lack of graphic artistry), the Opacity, Width, Height and because I didn't want to just have a flat Ellipse showing I added a BitmapEffect.
The Opacity and BitmapEffect properties are the interesting ones here. By setting the Opacity I can regulate how see through my ellipse is and the BitmapEffect has added a beveled edge around the ellipse, just to add a little bit of depth to the graphic.
Now when the project is run you can see the ellipse on the form.
Next buttons are added to the XAML of thewindow again making sure that Names are given to each one.
Then set the properties of the buttons on the code behind page.
The Height, Width and Content are set for both buttons as well as the VerticalAlignment property. For the button that will exit the application the Forground property is set to Red to have it stand out.
The last property that is assigned for the buttons is the Margin property which is used to position the buttons where I wanted them on the form over the ellipse. Setting this property was a little hit and miss as I was setting it via code so I could not see on the form where the buttons were actually going to end up.
Now that I had the form looking like I wanted, all that was left was to be able to move and position the window anywhere I wanted to put it, have music play when I clicked the > button and to be able to quit the application.
To make the window move to a different position on the screen all that is required is one small line of code in the MouseLeftButtonDown event of the window.
Now if the application is run and the left mouse button is held down you can move the ellipse anywhere on your screen.
To close the application, just put the following code in the Click event of the close button.
The last thing to be done is to make music. (Thanks once again to Ged for pointing out the pitfalls of playing music.)
(Admittedly there could be a whole lot more functionality to the application here to let, for example, the user either enter or select a path and have the application play each audio file in the directory one after the other, but that is more than I wanted to show here. Maybe I will get to that in a future post.)
We start with adding the Imports Statement
Imports System.Media
Add a Variable to hold our instance of a media player
Dim MyPlayer As MediaPlayer
Lastly the code to play the music
So the complete XAML for the gadget is:
<Window Name="Win1" x:Class="Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Neil's Gadget">
<
Grid>
<Ellipse Name="Ellipse1" />
<Button Name="Button1">Button</Button>
<Button Name="Button2">Button</Button>
</Grid>
and the complete code:
Imports System.Media
Class Window1
Dim MyPlayer
As MediaPlayer
Private Sub Win1_Initialized(
ByVal sender
As Object,
ByVal e
As System.EventArgs)
Handles Win1.Initialized
With Win1
.Height = 200
.Width = 200
.Background = Brushes.Transparent
.AllowsTransparency = True
.WindowStyle = Windows.WindowStyle.None
End
With
With Ellipse1
.Fill = Brushes.Tomato
.Opacity = 0.5
.Width = 150
.Height = 110
.BitmapEffect = New System.Windows.Media.Effects.BevelBitmapEffect
End
With
With Button1
.Height = 20
.Width = 20
.Content = "X"
.Foreground = Brushes.Red
.VerticalAlignment = Windows.VerticalAlignment.Center
.Margin = New Thickness(40, 70, 20, 20)
End
With
With Button2
.Height = 20
.Width = 20
.Content = ">"
.VerticalContentAlignment = Windows.VerticalAlignment.Center
.Margin = New Thickness(0, 70, 20, 20)
End
With
Private Sub Win1_MouseLeftButtonDown(
ByVal sender
As Object,
ByVal e
As System.Windows.Input.MouseButtonEventArgs)
Handles Win1.MouseLeftButtonDown
Me.DragMove()
End Sub
Private Sub Button1_Click(
ByVal sender
As Object,
ByVal e
As System.Windows.RoutedEventArgs)
Handles Button1.Click
Me.Close()
End Sub
Private Sub Button2_Click(
ByVal sender
As Object,
ByVal e
As System.Windows.RoutedEventArgs)
Handles Button2.Click
MyPlayer = New MediaPlayer
MyPlayer.Open(New Uri("symphony5_beethoven_radio3.mp3", UriKind.Relative))
MyPlayer.Play()
End
Sub
How simple can it get?