Silverlight 4: How to Customize OOB Window?


In this post, I will guide you to create a customize OOB Window in SIlverlight.

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:



Customized OOB window in Silverlight 4




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:


OOB application window earlier to Silverlight 4 RC


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


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




Attachments

  • Silverlight 4 Chromeless Window Demo Project (37301-27955-SL4-Chromeless-OOB-Demo.zip)
  • Comments

    No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: