Click here to Skip to main content
Click here to Skip to main content
Go to top

Silverlight 5 Multiple Window Support

, 24 May 2011
Rate this:
Please Sign up or sign in to vote.
Multiple Window support is one of the important features in Silverlight 5. Using this you can have additional top level Windows on top of your trusted Silverlight Out-of-Browser application.

Multiple Window support is one of the important features in Silverlight 5. Using this you can have additional top level Windows on top of your trusted Silverlight Out-of-Browser application. Yes, you read correct. It only works in Out-of-Browser Silverlight application and hence you cannot open it inside a browser.

So, what is this new Window and how to use it in our application? Let's have some discussion on it. After that you will be able to know more about it.

In Silverlight 5 Beta, Microsoft introduced the Window class to open additional window content from trusted OOB applications. When in your application you have to show additional view, you can use this class to create a separate Window. You need to create the instance of the Window from code behind. You can not use it directly from XAML. The class is sealed, hence you can not inherit from it.

Let's start doing some hands-on with the Window. We will go step-by-step to create a Window with some content inside it.

Preparing the Project

The Window class only works in trusted Out-of-Browser application. You can't use it from browser based apps. To make your project a trusted OOB application, go to project properties. As shown below, check the "Enable running application out of the browser" option and click the button "Out-of-Browser Settings ..." just below it to open up the additional properties dialog. In the additional dialog, check the option which says "Require elevated trust when running outside the browser" (as shown below):

image

Remember that your application must be a trusted OOB application, else you will get "UnauthorizedAccessException" as shown below.

image

So if you ever get the above exception, you will know that it is due to the settings that you have to configure.

Playing with the Code

It's time to play with the code now. Let's create a UserControl with some text inside it. We will use this control as the content of our new Window. Here is the XAML code that we are going to use:

<UserControl x:Class="MultiWindowDemo.WindowControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" x:Name="userControl">
    
    <Grid x:Name="LayoutRoot" Background="White">
        <TextBlock Text="{Binding WindowNumber, ElementName=userControl, StringFormat='Window #{0}'}"
                   FontSize="20" FontWeight="Bold" Foreground="Red"/>
    </Grid>
</UserControl>

Here we bound a property called "WindowNumber" to the TextBlock control, which will return the number of the Window that we will populate from code. So in the code behind file of the UserControl, we will create a DependencyProperty to expose the same. Here is our code for your reference:

using System.Windows;
using System.Windows.Controls;
 
namespace MultiWindowDemo
{
    public partial class WindowControl : UserControl
    {
        /// <span class="code-SummaryComment"><summary>
</span>        /// Gets or sets the window number.
        /// <span class="code-SummaryComment"></summary>
</span>        /// <span class="code-SummaryComment"><value>
</span>        /// The window number.
        /// <span class="code-SummaryComment"></value>
</span>        public int WindowNumber
        {
            get { return (int)GetValue(WindowNumberProperty); }
            set { SetValue(WindowNumberProperty, value); }
        }
 
        public static readonly DependencyProperty WindowNumberProperty =
            DependencyProperty.Register("WindowNumber", typeof(int), typeof(WindowControl), new PropertyMetadata(0));
        
        public WindowControl()
        {
            InitializeComponent();
        }
    }
}

It's time to create a button in the MainPage to call the Window to show the UserControl as content. We will create a button and register a click event to it. Here is the code:

<UserControl x:Class="MultiWindowDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">
 
    <Grid x:Name="LayoutRoot" Background="White">
        <Button Width="200" Height="26" Content="Open Window" Click="Button_Click"/>
    </Grid>
</UserControl>

In code behind, we have to implement the click event now. Inside that, we will create a new Window instance and set it's content as the UserControl that we created above. There are various properties that you can set for the Window. Check the API reference for more details.

Now set the Visibility property of the Window class to open the Window. By the way, there is no Open() method. Find the full source code of the above implementation here:

using System.Windows;
using System.Windows.Controls;
 
namespace MultiWindowDemo
{
    public partial class MainPage : UserControl
    {
        private int windowCount;
 
        public MainPage()
        {
            InitializeComponent();
        }
 
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            new Window
            {
                Content = new WindowControl { WindowNumber = ++windowCount },
                Visibility = Visibility.Visible,
                Width = 300,
                Height = 200
            };
        }
    }
}

Demo

Our implementation ends there. Now time to see a quick demo to understand it properly. Build your project and run it. You will see the main window with a button inside it. Click the button to open up the new Window in the screen. Pressing it multiple times will open a new instance of the Window with proper window no. inside it.

Let's have a screenshot of our demo application:

image

What Next?

Hope you liked the content and the representation and also were able to understand it properly. So, question comes: What Next? This is no doubt a great feature, but wait, I didn't like something about this Window. Let me take out my points and document them here in my blog. You will be able to read them in my next post. Hope the Silverlight team will take those points and implement them in their next release.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

_ Kunal Chowdhury _
Technical Lead
India India
Kunal Chowdhury is a Microsoft "Client Development" MVP (Most Valuable Professional), a Codeproject Mentor, Telerik MVP, Nokia Developer Champion, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession.
 
He is currently working in an MNC located in India. He has a very good skill over XAML, C#, Silverlight, Windows Phone, WPF and Windows 8 (WinRT). He posts his findings, articles in his technical blog and CodeProject.
 
Technical Blog: http://www.kunal-chowdhury.com
Facebook: http://facebook.com/blog.kunal
Twitter : http://twitter.com/kunal2383
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
GeneralMy vote of 5 PinmvpBrij28-May-11 21:29 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140926.1 | Last Updated 24 May 2011
Article Copyright 2011 by _ Kunal Chowdhury _
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid