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 applications 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 about 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 cannot use it directly from XAML. The class is sealed, hence you cannot 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 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
{
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 its 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 it's 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.
