I think all of you are aware of the new useful features of Silverlight 4.0 beta released last November. I'm referring
to a bunch of new improvements, affecting the out of browser applications, starting from the full-trust capabilities to the new Notification Window, and some little changes to the configuration of the window. The new release candidate of Silverlight 4.0 bring some news to the out of browser applications.
Until now we have a very little control over the window containing the application; we can configure the size and the positon on the screen and it is not possible to change them at runtime. With Silverlight 4.0 the Application class gain a new MainWindow proprty that expose a full set of tools to operate with the window. But this is not all the story. Using the project property we can also configure the window to be borderless and this let us draw our own chrome and manage window moving and resizing at runtime.
The figure on the left show the configuration of the Window Style. It is available into the Out of browser settings window. Using NoBorder we can completely remove the default chrome of the window. Optionally we can also specify to have Round corners but there is not any configuration about the corner radius.
In the example attached to the end of this article I've created a simple control we can use to give a custom chrome to the window. The control has a template to customize the look and feel of the chromw and a buch of properties to define colors, and other aspects of the chrome. In the next paragraphs of this article I will show you how the control is built and how Silverlight let use easily customize the chrome in the release candidate bits.
The ApplicationWindow control
When we create a Silverlight application we usually define the MainPage.xaml as a UserControl, and this let us specify the markup of the page easily. Creating the ApplicationWindow control I decided to sobstitute it to the common UserControl so the control is defined as a ContentControl and we can change the markup like the code in this snippet:
1: <controls:ApplicationWindow x:Class="SilverlightPlayground.GenericWindow.MainPage"
2: xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3: xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4: xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5: xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6: xmlns:controls="clr-namespace:SilverlightPlayground.Controls;assembly=SilverlightPlayground.Controls"
7: Title="Tiny Browser"
8: mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400">
9: <Grid x:Name="LayoutRoot" Background="WhiteSmoke">
10:
11: </Grid>
12: </controls:ApplicationWindow>
The control is a normal Templated Control and in the generic.xaml I've specified the default aspect of the window chrome. Some of the properties of the elements inside the template have been binded to the properties of the ApplicationWindow control so it is simple to change the Border color, the background, the font etc. Some elements has been defined as parts so I can attach some events and add the expected behavior to the window. When the user drag the chrome the window has to move on the screen and when the user drags the corner the window has to be resized.
The release candidate of Silverlight give us two methods doing the great part of the work. They ad DragResize and DragMove. In the control I attach the MouseLeftButtonDown event and in the handler I call one of these method to start the corresponding action. Here is the code:
1: void Chrome_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
2: {
3: if (Application.Current.IsRunningOutOfBrowser && Application.Current.HasElevatedPermissions)
4: Application.Current.MainWindow.DragMove();
5: }
6:
7: void ResizeHandle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
8: {
9: if (Application.Current.IsRunningOutOfBrowser && Application.Current.HasElevatedPermissions)
10: Application.Current.MainWindow.DragResize(WindowResizeEdge.BottomRight);
11: }
The methods are so simple we really do not need to make any other action. After starting the action it detect the mouse and terminate the drag when the user release the button.
There is some other behaviors to implement. In the top right corner some buttons let the user close the window and operate like common windows minimizing and maximizing it. The MainWindow property has all the mehods and properties we need to make these buttons working. Here is some other code:
1: void CloseButton_Click(object sender, RoutedEventArgs e)
2: {
3: if (Application.Current.IsRunningOutOfBrowser && Application.Current.HasElevatedPermissions && !args.Cancel)
4: Application.Current.MainWindow.Close();
5: }
6:
7: void MaximizeButton_Click(object sender, RoutedEventArgs e)
8: {
9: if (Application.Current.IsRunningOutOfBrowser && Application.Current.HasElevatedPermissions)
10: {
11: if (Application.Current.MainWindow.WindowState == WindowState.Normal)
12: Application.Current.MainWindow.WindowState = WindowState.Maximized;
13: else
14: Application.Current.MainWindow.WindowState = WindowState.Normal;
15: }
16: }
17:
18: void MinimizeButton_Click(object sender, RoutedEventArgs e)
19: {
20: if (Application.Current.IsRunningOutOfBrowser && Application.Current.HasElevatedPermissions)
21: Application.Current.MainWindow.WindowState = WindowState.Minimized;
22: }
The video at the end of the article show how the window appear. The control is almost complete to emulate the common windows but there is some other features we can use to manage the window:
Top, Left, Width & Height can be user programmatically to change the size of the window at runtime, Activate bring the window in front of the other window and finally the TopMost property can make it standing on top of other windows.
Source: SilverlightPlayground.GenericWindow.zip
Video: ChromelessWindow.wmv