-
Jun 16th, 2012, 04:50 PM
#1
"Shaped Form" with soft drop shadow, translucent colours -- using WPF
Update 25 July 2013: Please see post #5 below.
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.
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
Last edited by boops boops; Apr 2nd, 2014 at 07:40 AM.
Reason: procedure improved in post #5
-
Jun 17th, 2012, 07:22 AM
#2
Re: "Shaped Form" with soft drop shadow, translucent colours -- using WPF
This thread would be awesome if an example project was attached to it.
-
Aug 29th, 2012, 12:46 PM
#3
Re: "Shaped Form" with soft drop shadow, translucent colours -- using WPF
+1 rep (sorry, couldn't rep you by clicking on the star)
-
Aug 30th, 2012, 08:27 AM
#4
Member
Re: "Shaped Form" with soft drop shadow, translucent colours -- using WPF
Thanks for this! I had no idea how much more control you had with the GUI in WPF.
-
Jul 25th, 2013, 12:00 PM
#5
Re: "Shaped Form" with soft drop shadow, translucent colours -- using 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.
Last edited by boops boops; Oct 26th, 2014 at 07:13 AM.
-
Oct 24th, 2014, 12:20 PM
#6
New Member
Re: "Shaped Form" with soft drop shadow, translucent colours -- using WPF
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.
-
Oct 24th, 2014, 12:21 PM
#7
New Member
Re: "Shaped Form" with soft drop shadow, translucent colours -- using WPF
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.
-
Oct 26th, 2014, 08:11 AM
#8
Re: "Shaped Form" with soft drop shadow, translucent colours -- using WPF
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
-
Apr 8th, 2016, 04:27 AM
#9
Junior Member
Re: "Shaped Form" with soft drop shadow, translucent colours -- using WPF
Is there any other way except using WPF to do so ?
You can help me here
-
Apr 8th, 2016, 06:42 AM
#10
Re: "Shaped Form" with soft drop shadow, translucent colours -- using WPF
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
-
Sep 30th, 2016, 08:34 AM
#11
PowerPoster
Re: "Shaped Form" with soft drop shadow, translucent colours -- using WPF
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.
-
Sep 30th, 2016, 09:06 AM
#12
PowerPoster
Re: "Shaped Form" with soft drop shadow, translucent colours -- using WPF
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?
-
Sep 30th, 2016, 09:45 AM
#13
Re: "Shaped Form" with soft drop shadow, translucent colours -- using WPF
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.
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
-
Sep 30th, 2016, 10:05 AM
#14
PowerPoster
Re: "Shaped Form" with soft drop shadow, translucent colours -- using WPF
found my problem, had to add a reference to the WPF solution.
edit: oops, didn't realized that you had just said that
Last edited by jumper77; Sep 30th, 2016 at 11:45 AM.
-
Sep 30th, 2016, 07:12 PM
#15
PowerPoster
Re: "Shaped Form" with soft drop shadow, translucent colours -- using WPF
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
-
Sep 30th, 2016, 08:57 PM
#16
PowerPoster
Re: "Shaped Form" with soft drop shadow, translucent colours -- using WPF
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
It's awesome!
-
Oct 1st, 2016, 07:28 AM
#17
Re: "Shaped Form" with soft drop shadow, translucent colours -- using WPF
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. BB
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|