WPF Window tutorial Part II: power to the people

Alright, in previous part we've created lovely shaped window, remember?

But our lovely shaped window doesn't do much. In fact it does less that we expected it to do! W cannot resize it(!), we cannot move it(!!) and what's worse we cannot close it (!!!). I do hope you managed to close down Visual Studio after previous tutorial...


I'll show you how to add this functionality to our window in this short and sweet tutorial right now.

1. Resizing.
Ok Resizing can be done in two ways, simple, and hard. For now I'll cover simple way, and explain why we'll need hard way. I'll cover the hard way in separate tutorial.

Simple way uses build in WPF Window attribute ResizeMode. ResizeMode can be set to four different modes:

• NoResize - yep you've guessed it - nothing can be done with the window, even when it's not our lovely shaped window. Minimizing, Maximizing and restoring options are off.
• CanMinimize - user is able to minimize and restore window. And only that, size of the window cannot be changes neither by dragging its border nor by using "Maximize" button. Obviously without standard Windows border you cannot see "Minimize" button, but if the window will be displayed in taskbar you'll be able to minimize and restore it by clicking on it in taskbar.
• CanResize - default setting, allows user to resize, minimize and maximize the window as much as he wants (not shaped window, mind you).
• CanResizeWithGrip - the most interesting for shaped windows creators option - a small sizing grid shows up on right bottom corner of window that allows user to resize window by dragging it around.

So how do you use this option? Simply add the attribute to your Window tag:

<br /><Window class="Presentation.Window1" <br />xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x="http://schemas.microsoft.com/winfx/2006/xaml" <br />title="Window1" height="300" width="300" <br />windowstyle="None" <br />allowstransparency="True" <br />background="Transparent" <br />resizemode="CanResizeWithGrip"><br /> <border background="{StaticResource bgBgush}" cornerradius="5"><br /> </border><br /></Window><br />
And you get something like this:



You can use the triangle in the corner to resize your window! That's great, isn't it?.
Well, the obvious problem with that solution is that it works best when you use window shaped more or less like triangle, and may not work at all when you use something else - the sizing grid will be displayed outside the window, and user may not find it, or find it when he doesn't expect (or want) it. The hard solution for this problem is to design your custom UserControl that will act as window's sizing grid, but you'll be able to place it or shape it however you need to. I'll cover this problem in separate post as it's more advanced than material of this tutorial.

2.Moving your window around.
Once you've created your window and allowd user to resize it you might want to allow users to drag it around screen (you know, for fun). Window class has a method DragMove() that allowes window to be dragged around. It requires that the mouse left (primary) button is pressed while dragging. It's not a problem though, as we can define the method that will be called when a MouseLeftButtonDown event happens:
<br />MouseLeftButtonDown="Window_MouseLeftButtonDown"<br />
and after that we can place the call to DragMouse method inside our event handling method:
<br /> private void Window_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)<br /> {<br /> this.DragMove();<br /> }<br />
Thanks to that our window is movable. The important thing is, that many elements except of Window can catch and handle MouseLeftButtonDown event. We could define a shape that's drawn in the middle of window, and use DragMove() method (call it on shape's parent - main window) in shape's method. That way user will be allowed to drag window only by dragging this particular element.

3. Closing your window down.
Closing window down is very simple and uses techniques I've already described. First you define an element that will act as your close down button (again, could be any shape, button, text, whatever). That you define MouseLeftButtonDown handling method for that element, and in the method call you sipmly say this.Close(). And that's all.