Silverlight 4: How can I create customized OOB Window?

Kunal2383
Posted by in Silverlight category on for Beginner level | Views : 25338 red flag
Rating: 4.93 out of 5  
 15 vote(s)

As you all know that, 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.


 Download source code for Silverlight 4: How can I create customized OOB Window?

Introduction

As you all know that, 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:

image

 


Background

Earlier to Silverlight 4 RC you were able to install the Silverlight application outside the browser Window and can 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:

image



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” & a “App.xaml” file which 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 an 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 following:

image



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 write 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.

image


Ok, then can we go further to install it outside the browser? Yes, but for this we have to do a little 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.

image


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 a “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 done with this settings, click ok to save the configurations. You can also change the “Window Title”, “Size” and other options available there.


image



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.

image




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.

Download the Sample Project: Customized Silverlight 4 OOB Window

Page copy protected against web site content infringement by Copyscape

About the Author

Kunal2383
Full Name: Kunal Chowdhury
Member Level:
Member Status: Member
Member Since: 3/1/2010 12:38:55 PM
Country: India
Thanks & Regards, Kunal Chowdhury | http://www.kunal-chowdhury.com | http://twitter.com/kunal2383
http://www.kunal-chowdhury.com
He is currently working as a Silverlight application developer. Has a very good skill over C#, XAML, Silverlight & WPF. He has a good working experience in Windows 7 application (including Multitouch) development. During his professional career he worked in various technologies & delivered quality output. He never hesitates to take up challenges & work on the latest technologies in Microsoft platform. He attended various software development competition & achieved different awards. He is presently focusing on the RIA (Silverlight & WPF) & willing to become a Technology Specialist in Microsoft platform. Learning newer things, Blog posting & helping others in forums is one of his regular activity. Specialties: Silverlight Application Development, WPF Application Development, Windows 7 Application Development

Login to vote for this post.

Comments or Responses

Posted by: Nishithraj on: 4/7/2010
Excellent article. Keep the good work...
Posted by: Kunal2383 on: 4/7/2010
Thanks Nishithraj for the feedback.

Login to post response

Comment using Facebook(Author doesn't get notification)