Silverlight 4: How Can I Create a Customized OOB Window?

• Download demo - 55.13 KB

Introduction

As you all know, Out-Of-Browser functionality in Silverlight is not a new feature. It is available since Silverlight 3. Microsoft added the trusted application behaviour in Silverlight 4 Beta. In addition to this, they introduced one more additional functionality called “Chromeless OOB WIndow” i.e. “Customized OOB Window” in Silverlight 4 RC (Release Candidate). In this post, I will guide you to create a simple customized OOB Window Application in Silverlight 4 RC. After the end of this tutorial, you will be able to create a Customized OOB Window in Silverlight 4 which will look similar to this:

Background

Earlier to Silverlight 4 RC, you were able to install the Silverlight application outside the browser Window and could run it from your desktop but there was no choice to customize the look & feel of the Window. From now, it has the feature to create your own Chrome Window to match your application UI. Earlier to Silverlight 4 RC, your OOB application should look like this:

Prerequisite

To develop this simple application, you need the following tools installed in your development environment:

• Visual Studio 2010 Release Candidate
• Silverlight 4 Release Candidate Tools for Visual Studio 2010 Release Candidate

Remember that, Silverlight 4 applications can be developed only in Visual Studio 2010. Hence, if you have Visual Studio 2008 installed in your PC, you can install Visual Studio 2010 side-by-side for exploring Silverlight 4.

Getting Started

If your development environment is ready, then we can proceed towards creating a new Silverlight Application project. At the end of this part, we will be able to run our first Silverlight application inside the browser.

1. Open your Visual Studio 2010 IDE
2. Select File > New Project or just press CTRL + SHIFT + N to open up the New Project dialog
3. Expand the “Visual C#” node and then go to sub node “Silverlight”
4. Select “Silverlight Application” in the right pane
5. Select proper location to store your application (let’s say, “D:\Sample Apps\”
6. Now enter a proper name for your project (call it as: “Silverlight4.OOB.ChromelessWindow.Demo”)
7. Select the .NET Framework version from the combo box at the top (I am using .NET Framework 4.0)
8. Click OK to continue
9. In the next dialog, make sure that “Host the Silverlight application in a new Web site” option is selected
10. Choose “Silverlight 4” as the Silverlight Version and hit OK

Wait for a while, Visual Studio will now create the Silverlight solution for you to use which will contain a Silverlight Project and one Web Application Project to host your Silverlight application. In your Silverlight project, you will find a “MainPage.xaml” & an “App.xaml” file which are already created for you by the IDE Template.

Design Custom Chrome Window XAML

For our first step, to give a look & feel of a customized window we have to create a “ControlBar” containing the Window Title, Maximize, Minimize & Close button. To do this, let us create a UserControl (for doing this, CustomControl is best rather than UserControl. But I am here using UserControl to give a simple approach for you to understand the main principle) inside the Silverlight project and name it as “ControlBar”.

Here is a simple design of the ControlBar which has a Title as TextBlock, Minimize, Maximize & Close buttons as Border wrapped with Canvas:

<Grid x:Name="grdControlBarRoot" Margin="0,0,0,0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="15"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="100"/>
    </Grid.ColumnDefinitions>
    <Border Margin="0,0,0,0" Grid.ColumnSpan="3" Background="Black" Height="25"/>
    <TextBlock HorizontalAlignment="Left" Margin="0,0,5,0" VerticalAlignment="Center" 
               Grid.Column="1" Text="{Binding Title, ElementName=userControl}" 
               TextWrapping="Wrap" FontWeight="Normal" 
	      Foreground="White" x:Name="txbTitle" 
               FontSize="12"/>
    <StackPanel x:Name="stpControlBarRoot" Grid.Column="2" Orientation="Horizontal" 
                Margin="0,0,0,0" HorizontalAlignment="Right">
        <Canvas Width="30" x:Name="cnvMinimizeButton" 
		Cursor="Hand" Background="#00000000" 
                	Visibility="Visible" Height="20" ToolTipService.ToolTip="Minimize">
            <Border Width="30" Height="20" Background="#FF939393" 
		BorderBrush="#FF000000" 
                    BorderThickness="1,1,0,1" CornerRadius="0,0,0,5">
                <Border BorderThickness="1.5,1.5,1.5,1.5" CornerRadius="0,0,0,5">
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0.514,0.623" 
                                             StartPoint="0.514,0.191">
                            <GradientStop Color="#FF828282" Offset="0"/>
                            <GradientStop Color="#FF262626" Offset="1"/>
                        </LinearGradientBrush>
                    </Border.Background>
                    <Rectangle Margin="6,9,6,3" Fill="#FFD6D5D5" Stroke="#FF000000" 
                               StrokeThickness="0.5"/>
                </Border>
            </Border>
        </Canvas>
        <Canvas Width="30" x:Name="cnvMaximizeButton" 
		Cursor="Hand" Background="#00000000" 
                	Visibility="Visible" Height="20" ToolTipService.ToolTip="Maximize">
            <Border Width="30" Height="20" Background="#FF939393" 
		BorderBrush="#FF000000" 
                    BorderThickness="1,1,0,1">
                <Border BorderThickness="1.5,1.5,1.5,1.5" 
		      CornerRadius="0,0,0,0" Width="29" 
                        Height="18">
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0.514,0.623" 
                                             StartPoint="0.514,0.191">
                            <GradientStop Color="#FF828282" Offset="0"/>
                            <GradientStop Color="#FF262626" Offset="1"/>
                        </LinearGradientBrush>
                    </Border.Background>
                    <Border Background="#FFD6D5D5" Margin="6,2,6,2" 
			BorderBrush="#FF000000" 
                           	BorderThickness="0.5,0.5,0.5,0.5">
                        <Rectangle Stroke="#FF000000" Margin="2,2,2,2" 
                                   StrokeThickness="0.5">
                            <Rectangle.Fill>
                                <LinearGradientBrush EndPoint="0.5,1" 
				StartPoint="0.5,0">
                                    <GradientStop Color="#FF828282" Offset="0"/>
                                    <GradientStop Color="#FF262626" Offset="1"/>
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                    </Border>
                </Border>
            </Border>
        </Canvas>
        <Canvas Width="40" x:Name="cnvCloseButton" Cursor="Hand" Background="#00000000" 
                Opacity="1" Height="20" ToolTipService.ToolTip="Close">
            <Border Width="40" Height="20" 
		Background="#FF939393" BorderBrush="#FF000000" 
                    BorderThickness="1,1,1,1" CornerRadius="0,0,5,0">
                <Border BorderThickness="1,1,1,1" CornerRadius="0,0,5,0" Width="37" 
                        Height="16" x:Name="border">
                    <Border.Background>
                        <LinearGradientBrush EndPoint="0.514,0.623" 
                                             StartPoint="0.514,0.191">
                            <GradientStop Color="#FF956161" Offset="0"/>
                            <GradientStop Color="#FF490E0E" Offset="1"/>
                        </LinearGradientBrush>
                    </Border.Background>
                    <TextBlock Text="X" TextWrapping="Wrap" Foreground="#FFECECEC" 
                               HorizontalAlignment="Center" VerticalAlignment="Center" 
                               x:Name="textBlock"/>
                </Border>
            </Border>
        </Canvas>
    </StackPanel>
    <Rectangle Fill="#00FFFFFF" Margin="0,0,0,0" x:Name="rectTitleMask" 
               Grid.ColumnSpan="2"/>
</Grid>

As it is inside a Grid, it can be sized according to the view. The buttons panel has a fixed view & the title section has flexible size. If you watch the above XAML in design view, it will look like the following:

Implementing Custom Chrome Window Behavior

Now open the code behind file of the ControlBar.xaml and add a DependencyProperty named “Title” to it, which will be responsible to change the title of the Custom Window.

public string Title
{
    get { return (string)GetValue(TitleProperty); }
    set { SetValue(TitleProperty, value); }
}

public static readonly DependencyProperty TitleProperty =
    DependencyProperty.Register("Title", typeof(string), 
	typeof(ControlBar), new PropertyMetadata(string.Empty));

Now, inside the constructor of the ControlBar class, check whether the application is running Out-of-Browser & has sufficient privileges to run. If so, then set the control visibility to visible and register the button events to fire the minimize, maximize & close events respectively. If the application is running inside the browser, just set the control’s visibility to collapsed and hence no need to register the events.

Here is the code snippet for you:

if (App.IsRunningOOBWithPermission)
{
    this.Visibility = Visibility.Visible;
    this.cnvMaximizeButton.MouseLeftButtonDown += cnvMaximizeButton_MouseLeftButtonDown;
    this.cnvMinimizeButton.MouseLeftButtonDown += cnvMinimizeButton_MouseLeftButtonDown;
    this.cnvCloseButton.MouseLeftButtonDown += cnvCloseButton_MouseLeftButtonDown;
    this.MouseLeftButtonDown += ControlBar_MouseLeftButtonDown;
}
else
{
    this.Visibility = Visibility.Collapsed;
}

Remember that “App.IsRunningOOBWithPermission” is a static property implemented inside the App class and it represents the boolean output of:

((App.Current.IsRunningOutOfBrowser) && (App.Current.HasElevatedPermissions))

There might be a question, what code to be written inside the event blocks? Don't worry, you just have to do the operations as simplest as you can:

void ControlBar_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    App.Current.MainWindow.DragMove();
}

void cnvCloseButton_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    App.Current.MainWindow.Close();
}

void cnvMinimizeButton_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    App.Current.MainWindow.WindowState = WindowState.Minimized;
}

void cnvMaximizeButton_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    if (App.Current.MainWindow.WindowState == WindowState.Normal)
    {
        App.Current.MainWindow.WindowState = WindowState.Maximized;
    }
    else
    {
        App.Current.MainWindow.WindowState = WindowState.Normal;
    }
}

Configuring Out-of-Browser Settings

Now add the “ControlBar” usercontrol inside your page and run your Silverlight application. You will find that the ControlBar is not present inside your browser window. This is because it will only be available if we are running the application outside the browser window.

Ok, then can we go further to install it outside the browser? Yes, but for this we have to do a few tricks. Go to the properties of the Silverlight project. From the Silverlight pane, select the “Enable running application out of browser” which will make the “Out-of-Browser Settings…” button enabled. Click on it for more settings.

From the Settings dialog window, select “Show install menu” which will create a Menu Item inside the Silverlight context menu. Once you run your application and right click on the application, you will see an “Install” menu item on it. I will come to this section later.

Now, check the “Require elevated trust when running outside the browser” as mentioned below and choose “Window Style” as “No Border”. This will make the default Chrome Window visibility to collapsed & if you run OOB, you will not see any Window border by default. Once you are done with this settings, click ok to save the configurations. You can also change the “Window Title”, “Size” and other options available there.

Running OOB Application

Now build and run your application which will load inside the browser Window and you will not see any Control bar there as we wrote a code for collapsing the same if running inside the browser. Right click on the Silverlight application. This will show the Silverlight context menu having two menu items “Silverlight” & “Install” inside it. Click the second one to install the application to your local drive as OOB. Once installed, it will automatically run the application out-of-browser window. Now you will see that it has our customized window rather than the default Window border. As we implemented, you can drag the Window from the Title Bar, minimize, maximize & even close the Window using our controls.

End Note

As I mentioned earlier, it is a simple approach to customize the OOB Window in Silverlight 4. Now you can implement more functionalities like resize, border thickness, animations & styles, etc. to solve your business needs. Again, it is better to implement it as a Custom Control instead of User Control and that will give you more power on each section. Go ahead and enjoy this new feature.

You can download the Sample Project: Customized Silverlight 4 OOB Window

History

• 27^th March, 2010: Initial post