Silverlight 5 Multiple Window Support

Multiple Window support is one of the important feature in Silverlight 5. Using this you can have additional top level Window 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 it you will be able to know about it more.

In Silverlight 5 Beta, Microsoft introduced the Window class to open additional window content from trusted OOB application. 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):

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

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 binded a property called "WindowNumber" to the TextBlock control, which will return the no. 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

    {

        /// <summary>

        /// Gets or sets the window number.

        /// </summary>

        /// <value>

        /// The window number.

        /// </value>

        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. There are no Open() method btw. 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:

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.