Results 1 to 17 of 17

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

  1. #1

    Thread Starter
    PowerPoster boops boops's Avatar
    Join Date
    Nov 2008
    Location
    Holland/France
    Posts
    3,201

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

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


    Name:  WPF_dropShadow.jpg
Views: 10156
Size:  34.3 KB

    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

  2. #2
    PowerPoster JuggaloBrotha's Avatar
    Join Date
    Sep 2005
    Location
    Lansing, MI; USA
    Posts
    4,286

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

    This thread would be awesome if an example project was attached to it.
    Currently using VS 2015 Enterprise on Win10 Enterprise x64.

    CodeBank: All ThreadsColors ComboBoxFading & Gradient FormMoveItemListBox/MoveItemListViewMultilineListBoxMenuButtonToolStripCheckBoxStart with Windows

  3. #3
    Fanatic Member Arve K.'s Avatar
    Join Date
    Sep 2008
    Location
    Kyrksæterøra, Norway
    Posts
    518

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

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

    Please mark your thread as resolved and add reputation to those who helped you solve your problem
    Disclaimer: I am not a professional programmer

  4. #4
    Member
    Join Date
    May 2011
    Posts
    52

    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.

  5. #5

    Thread Starter
    PowerPoster boops boops's Avatar
    Join Date
    Nov 2008
    Location
    Holland/France
    Posts
    3,201

    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:
    1. Private Sub MainWindow_Initialized(sender As Object, e As System.EventArgs) Handles Me.Initialized
    2.         Me.WindowStyle = Windows.WindowStyle.None
    3.         Me.Topmost = True
    4.         Me.AllowsTransparency = True
    5.         Me.Background = Brushes.Transparent
    6.         Me.Effect = New Effects.DropShadowEffect With {.BlurRadius = 15, .ShadowDepth = 20, .Opacity = 0.6}
    7.     End Sub
    8.  
    9.     Private Sub MainWindow_MouseMove(sender As Object, e As System.Windows.Input.MouseEventArgs) Handles Me.MouseMove
    10.         If e.LeftButton = MouseButtonState.Pressed Then Me.DragMove()
    11.     End Sub
    12.  
    13.     Private Sub Button1_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles Button1.Click
    14.         Me.Hide()
    15.     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:
    1. Private shapedform As New WpfShapedForm1.MainWindow
    2.  
    3. Private Sub Button1_Click(sender As System.Object, e As System.EventArgs) Handles Button1.Click
    4.     shapedform.Show()
    5. 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.
    Attached Images Attached Images   

  6. #6
    New Member
    Join Date
    Sep 2011
    Posts
    3

    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.

  7. #7
    New Member
    Join Date
    Sep 2011
    Posts
    3

    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.

  8. #8

    Thread Starter
    PowerPoster boops boops's Avatar
    Join Date
    Nov 2008
    Location
    Holland/France
    Posts
    3,201

    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:
    1. Private myForm1 As New WindowsApplication1.Form1 'substitute your Forms project name and startup form.
    2.  
    3.     Private Sub MainWindow_Initialized(sender As Object, e As System.EventArgs) Handles Me.Initialized
    4.         Me.Visibility = Windows.Visibility.Hidden
    5.         myForm1.Show()
    6. 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

  9. #9
    Junior Member MRGREY's Avatar
    Join Date
    Dec 2015
    Posts
    31

    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

  10. #10

    Thread Starter
    PowerPoster boops boops's Avatar
    Join Date
    Nov 2008
    Location
    Holland/France
    Posts
    3,201

    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

  11. #11
    PowerPoster
    Join Date
    Feb 2016
    Location
    Tennessee
    Posts
    2,437

    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.

  12. #12
    PowerPoster
    Join Date
    Feb 2016
    Location
    Tennessee
    Posts
    2,437

    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?

  13. #13

    Thread Starter
    PowerPoster boops boops's Avatar
    Join Date
    Nov 2008
    Location
    Holland/France
    Posts
    3,201

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

    Quote Originally Posted by jumper77 View Post
    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 View Post
    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

  14. #14
    PowerPoster
    Join Date
    Feb 2016
    Location
    Tennessee
    Posts
    2,437

    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.

  15. #15
    PowerPoster
    Join Date
    Feb 2016
    Location
    Tennessee
    Posts
    2,437

    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

  16. #16
    PowerPoster
    Join Date
    Feb 2016
    Location
    Tennessee
    Posts
    2,437

    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!

  17. #17

    Thread Starter
    PowerPoster boops boops's Avatar
    Join Date
    Nov 2008
    Location
    Holland/France
    Posts
    3,201

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

    Quote Originally Posted by jumper77 View Post
    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
  •  



Click Here to Expand Forum to Full Width