«
»

WPF: draggable windowless windows


I’m currently trying out the Microsoft Expression Blend designer (formerly known as Microsoft Expression Interactive Designer). I must say it’s already very nice, the only I still can’t seem to get working is the integration with visual studio .net 2005 to edit the code behind files… Anyway that’s not what I wanted to talk about.

We probably know that you can do marvelous things with WPF it’s like a Flash designer but for .Net developers : Not sure Adobe is going to like that. So why should you constrain yourself to the old looking windows? Why not try something more different.

The image below shows you the kind of application I mean.

As you can see the image has something extra stick out in the left upper corner. To achieve this you just set the WindowStyle to None, Background to “transparent” and AllowTransparancy to “True”.

This will give you a borderless and transparent window. In this example I’ve set the background of the grid using an ImageBrush that will allow me to use a customized background image



….

Next is the actual image that represents the out-of-border network drive. This is nothing more than an image placed in that particular position. Okay the application is ready to run.When you run the application you’ll see that you can’t drag the application to another location on the screen…

To solve this problem you need to add a Thumb. A Thumb is a WPF Control that can be dragged around. You can declare a thumb that has the same size as your window. When you do this the application will kind of funny because all you see is a light gray area. To prevent this overlay set the Opacity property of the Thumb to 0.

Next thing to do is to implement the DragDelta event of the thumb. It’s this code that will actually move the entire window. The code for this is pretty simple:

Public Sub onDragDelta(ByVal sender As Object, ByVal e As Primitives.DragDeltaEventArgs)
Canvas.SetLeft(Me, Canvas.GetLeft(Me) + e.HorizontalChange)
Canvas.SetTop(Me, Canvas.GetTop(Me) + e.VerticalChange)
End Sub

That’s it… you can now drag the window around.

This entry was posted on 19/01/2007, 15:07 and is filed under WPF. You can follow any responses to this entry through RSS 2.0. You can leave a response, or trackback from your own site.

  • Tikira

    perfect! thanks!

  • martin

    this is the dumbest idea ever.

    set the MouseDown atrribute of the window and in the eventhandler type

    this.DragMove();

    —-> example

    private void Window_MouseDown(object sender, MouseButtonEventArgs e)
    {
    this.DragMove();

    }

  • Ed

    Yes, unless of course your window has, you know, controls in it, in which case none of them will receive mouse messages, and Thumbs cannot contain content, so… yeah, pretty useless.

  • http://www.suddenelfilio.net Suddenelfilio

    Thank you very much for your useless comment. At least try to give constructive comments instead in bashing other peoples mistakes. Also note that this is a very old post anno 2007 are you sure it didn’t work back then? Anyhow I welcome all comments as long as they contribute even when the article that is being commented is wrong. Maybe a solution or link to a possible solution could help others as well.

  • Erik ‘SiLo’ Rogers

     I for one think this is amazing. Thanks for this invaluable tip.

    Another nice part is that if you define this as part of the Window template, you can include this snippet in App.cs and not have it lingering in your main window’s code.