Often overlooked or even completely ignored, window management presents the basic of any window based desktop application. Though this recipe will be focused on WPF and desktop applications, today, window management plays an important role in web environments as well where different types of modal, dialog, and message box windows are appearing. As a consequence, most ideas and general guidelines presented here might be quite useful for web solutions as well.
This recipe will cover several basic ideas and approaches regarding window placement, their positions, and size.
As there are several concepts being described here, I have, when it seemed appropriate to do so, created smaller sub-recipes that are building on previous ones.
WPF provides a fairly rich window management model but it is upon developers and designers to come up with the right usage and interactions involving windows. This recipe aims to help you with that challenge.
Before we proceed any further, it is a good idea to define several concepts that we will be using and relying on during this recipe. You can think of this as a small dictionary and it is compatible with Microsoft UX guidelines for Windows Vista and Windows 7 operating systems.
Top-level or Primary window: It has no owner window, meaning that this is the one that is displayed on the taskbar and in most cases, can be considered to be the main application window.
Owned or Secondary window: It has an owner window and as a general rule, it is not displayed on the taskbar.
User initiated window: It is always being displayed as a direct result of a user's actions. Action can be clicking on some buttons, commands, menu items, and so on. Also, there are program-initiated windows ones that are initiated by an application itself without user's action and system-initiated windows ones that are initiated by the underlying operating system itself.
Contextual window: It is type of a user-initiated window but with a very strong relationship to the UI object, from which it was invoked and launched. Context is extremely important here and positioning often plays a very important role (it will be covered in this recipe).
So, let's start. We are going to explore window management and that's why I will be using WPF. Start your Expression Blend 4 and then select New project... From the dialog that appears selectWPF and then WPF Application, make sure that Language is set to C# and Version is 4.0. At the end hit OK.
After your new WPF project has been created, you should notice under the Objects and Timeline pane that the Window and LayoutRoot grid controls are visible.
You will see the icon, title, minimize, maximize, and close buttons. If you click on the icon, the system menu will appear. Positioning the mouse cursor on the window borders will allow you to resize the window.
2. Click on Window | Properties and locate the Common Properties section.
Changing the icon: By changing the Icon property, you can change the look of the window icon. You can use a number of picture formats ICO, PNG, BMP, JPG, TIFF, and GIF. Feel free to choose any picture that is available to you for testing purposes. The selected picture will be automatically added to your project.
Setting the ResizeMode: WPF supports several resize modes and you can select them from the ResizeMode drop-down list. You can pick anything between NoResize, CanMinimize, CanResize (which is the default choice), and CanResizeWithGrip. Select CanMinimize.
3. The ShowInTaskbar property enables you to choose whether your window will appear on the Windows taskbar. As in this case our window is the primary window, we will want it to appear on the taskbar so leave the ShowInTaskbar property checked.
4. By setting the Title property, you can set your window title. Set the Title property to Our Main Window.
5. Now locate the Appearance section and WindowStyle property. From the drop-down list, you can select one of the following options: None, SingleBorderWindow, ThreeDBorderWindow, and ToolWindow. Select SingleBorderWindow, which is the default choice.
6. Hit F5 now and your window will appear. It should resemble the following screenshot:
 |
You can see that the icon, title, and control buttons have been affected. We decided to set the ResizeMode property to CanMinimize and users now can minimize the window, but there is no ability to change its size (positioning the mouse cursor over the borders does not enable us to resize it) or maximize it (the Maximize button is disabled). And as you have enabled the ability to display window in the taskbar, you can easily locate it there (like it is the case with most other Windows applications).
In this recipe we will deal with window sizes and different states.
1. With your window selected (under Objects and Timeline pane), go to Properties and locate the Layout section and Height and Width properties.
2. Set the Width to 250 and Height to 480. Values are in pixels and they will define the size of your window during the runtime.
3. Now, click on the little arrow pointing downwards (Show advanced properties) and some more properties under the Layout section will be exposed. Locate MinWidth, MinHeight, MaxWidth, and MaxHeight. You can enter your values here and limit the window's maximum and minimum values for both height and width. By default, all minimum values are set to 0, and all maximum values are set to infinity. For the test, set MinWidth and MinHeight both to 200.
4. Now go to the Common Properties section and set the ResizeMode to CanResizeWithGrip. We want to test the MinWidth and MinHeight effects but in order to do that we have to set ResizeMode to either CanResize or CanResizeWithGrip.
5. Hit F5 now to test your application. You will notice the resize grip in the lower-right corner. Try sizing your window; you will notice that you cannot resize it to be smaller than 200 by 200 pixels.
 |
6. Close the window and return to Blend.
7. Under Common Properties, locate the WindowState property. Click on the drop-down list and you will see following choices: Normal, Minimized, and Maximized. Select Maximized and hit F5 to start your application.
8. Your application will now start Maximized. If you click on Restore Down, it will be restored to the dimensions you have previously set for its Height and Width properties.
 |
Let's investigate the window positioning options now. As I am going to continue this recipe from the previous one, I will just go to the WindowState property and set it back to Normal before I do anything else.
1. Okay, now we are ready to continue. With your window selected, go to the Layout section and locate the Left and Top properties. Set Left to 100 and Top to 150. Now when you press F5, your application will start and your window will be positioned 100 pixels from the left and 150 pixels from the top.
 |
2. Close your application and return to Blend. Now under Common Properties, locate WindowStartupLocation. The drop-down list offers you several choices Manual, CenterScreen, and CenterOwner. Select CenterScreen and hit F5.
3. In this case, your application will be automatically centered on your screen and the Left and Top properties that you have set before will be just ignored giving an advantage to the CenterScreen choice set for the WindowStartupLocation property.
Typical title bar controls are icon, title, and minimize, maximize, and close buttons. Expression Blend allows you to set and manipulate all of them by changing the number of properties described in this recipe.
While Icon and Title and really simple and understandable, let me invest some time and explain the different ResizeMode and WindowStyle properties.
ResizeMode is a property that is used to describe window behaviors and abilities when resizing is in question. You can control how and if, at all, a user can resize your window. Your choice is reflected in different combinations of Minimize, Maximize, and Close buttons as well as on the ability to resize window by clicking and dragging its borders.
ResizeMode can be set to one of the following values: NoResize, CanMinimize, CanResize, and CanResizeWithGrip.
Let me describe them briefly.
NoResize will render your window as non-resizable and only a Close button will be presented in the title bar, allowing users to only close the current window. Positioning the mouse cursor over borders will not allow for any resizing.
CanMinimize is the choice that we have taken in our recipe. With this choice, a window can be closed, minimized, and then restored after previous operations. Though both the Minimize and Maximize buttons are shown, the Maximize button is disabled so the user can click only on the Minimize or Close buttons to terminate the window. There is no option to resize the window.
CanResize is the default choice. All buttons (Minimize, Maximize, and Close) are present and enabled. Users are able to resize a window by positioning the mouse cursor over its borders it is the most flexible option available.
CanResizeWithGrip allows for the same interaction as CanResize with the addition of the resize grip that appears in the bottom-right corner of the window.
WindowStyle is a property in charge of the window's border appearance. There are four different possible styles at your disposal: None, SingleBorderWindow, ThreeDBorderWindow, and ToolWindow.
Let's describe them in more detail:
 |
 |
ThreeDBorderWindow is same as SingleBorderWindow but with a pseudo 3D border and it is much heavier in its appearance, as you can see.
 |
ToolWindow is a specific window type a thinner border and a title bar with only a Close button available. However, it is resizable. It is often used as a secondary window for applications with a number of tools and options exposed in them (such as palettes and tools in Paint.NET).
 |
Blend allows for a really great number of options related to window sizes and their management.
The easiest and simplest way to set up your window's size is to set its Height and Width properties. However, you can use even more advanced properties such as MinWidth, MinHeight, MaxWidth, and MaxHeight. You can change those properties and limit the window's maximum and minimum values for both height and width. By default, all minimum values are set to 0, and all max values are set to infinity.
By setting the WindowState property, you can control the appearance of the window in one of the three possible states: normal, minimized, and maximized.
Normal state is the default state. In this state a window can be moved and resized, if it is resizable.
Minimized state means that the window is collapsed to its taskbar button (in the default case, when ShowInTaskbar is set to True). If it is set to False, the window will collapse to its minimum possible size and place itself in the bottom-left corner of the desktop. It cannot be resized by using a resize grip or by dragging the border although it can be dragged around your desktop.
Maximized state means that the window will be expanded to the maximum size it can take. It cannot be resized by using a resize grip or by dragging the border.
There are two main ways to go about window positioning. The first one includes setting the Left and Top property, which enables you to precisely position your window on the screen, while the other approach requires setting the WindowStartupLocation property.
The WindowStartupLocation property handles the initial location of your window. Every window's position can be described with the Left and Top property relative to desktop. You can also use one of the available options for this property: Manual (default), CenterScreen, and CenterOwner.
Manual startup location means that the window will be displayed based on Left and Top property values. In case they have been omitted, the underlying operating system will position the window on a specific location.
CenterScreen will position the window exactly at the center of the screen on which it was opened. It will ignore Left and Top properties in case they have been set previously.
CenterOwner works in a manner similar to CenterScreen but instead of positioning the window on the center of the screen, it will consider the center of the window that opened it as its startup location.
This section will show you some more ideas and approaches that you should consider and take into account while designing and using windows as objects in your solutions.
This is one of the most challenging questions presented in this book, though it seems to be very simple. Today, on the market, you can find a huge variety of different monitors and supported resolutions from small netbooks to huge, widescreen monitors. Obviously, there is not a single "works for all" resolution. However, when you are designing your application, you must answer this question.
At the time of writing, the minimum supported resolution for Windows OS is 800×600 pixels, though I can't really remember when was the last time I saw some desktop or notebook computer running on this resolution (netbooks might be an exception, for sure).
Taking all this into account, I would strongly suggest that all your fixed size windows do not exceed the 800×600 dimension and the rest of the windows, ones that can be resized, should be optimized for 1024×768 resolution. It is your responsibility to invest time and explore how resizable windows and their content (UI controls) will behave in 800×600 resolution.
Good designers will try to accommodate their application's design and layout for different resolutions so that in case of a higher resolution, your users can benefit from a bigger workspace. As always, it is a question of the right balance and compromise between possibilities, wishes, and limitations.
If you are one of the rare guys around who knows that your application will be used on exclusively higher resolutions, then you have a nice challenge of creating an application that can take the full advantage of additional screen space.
As I've mentioned in previous paragraphs, all your fixed size windows should not exceed the 800×600 dimension and the rest of the windows, ones than can be resized, should be optimized for 1024×768 resolution. If your application has some critical parts and it is supposed to be used in a safe mode environment, you might need to lower the bar and design for 640×480 resolution, but honestly, such cases are really rare, and practically non-existent in typical consumer applications.
When you are testing your windows, use the following table:
|
DPI / Percentage |
Resolution |
Performs well? |
|---|---|---|
|
96dpi 100% |
800 × 600 | |
|
120dpi 125% |
1024 × 768 | |
|
144dpi 150% |
1200 × 900 |
Under the Performs well? column, insert Yes or No based on the following criteria:
Are there any layout problems?
Do you notice control clipping, text readability problems, or anything related?
How do icons and bitmaps perform? Are they stretched? What about alignments?
Can users access each and every command in all tested cases?
It is better to use larger initial window sizes and use the space effectively (your users will appreciate that). It's a much better solution than trying to fit everything into a small space.
Don't go over 66 characters for text elements. (I've talked about that under Fixed versus Liquid layouts recipe of this chapter.)
Windows User Experience Interaction Guidelines suggest that "centering" the window means biasing vertical placement slightly towards the top of the monitor, and not placing the window exactly in the middle of the screen. The reason for this is that our eyes are naturally more biased towards the top of the screen. However, that difference is quite small you can go for 45% from the top of the monitor or owner window and 55% from the bottom.
If the window that you are launching is contextual (remember, I've explained this term at the very beginning of this recipe), then you can go and display it near the object (button, let's say) that it was launched from. Take into account that you should place it out of the way so that the source object is not obscured; if possible, position it offset down and to the right.
If your window is being launched from the notification area or system tray, you should display it close to that area too.
If your window can be described as a process dialog (one that contains a progress bar for example, file copy dialog), then you should place it in the lower-right corner of the active monitor, but not as close to the notification area as was the case with the windows launched from that area.
If your window is an owned (secondary) window, then you should initially display it centered on the top of the owner window (you can use the WindowStartupLocation property and set it to CenterOwner, or you can use the 55% : 45% rule for centering the window (as described in an earlier guideline).