Open Silverlight Child Window in New Tab or New Window

While working with Silverlight applications, we often come across the requirement where we need to show another XAML page either in a new Tab in the same browser or pop up a new browser window. This is a generic requirement and various solutions can be found while you try to Google out the requirement. This blog simply summarizes the quick solutions for our ComponentOne Siverlight users so that they can immediately apply the code and move on with their other tasks. In this blog you can find the solutions to open a ChildWindow in the given two modes.

• Inside a new Tab of the Same Browser
• Pop up a new Browser Window

Lets have a quick look at the image on what we are going to achieve.

Design MainPage and ChildWindow Page

To begin with we will design sample pages with MainPage containing two buttons and Child Window with simple TextBlock message for a ChildWindow. MainPage.xaml

<Grid x:Name="LayoutRoot" Background="White">  
  <Button Name="chButton" Width="200" Height="35" VerticalAlignment="Top" Margin="89,60,111,0" >  
    <HyperlinkButton Content="Open Child Window in New Tab" Name="btn" IsTabStop="False"  
          Click="btn_Click" Foreground="Black" BorderThickness="0"/>  
    </Button>  
  <Button Content="Open Child Window in New Window" Height="35" Width="250" Click="chButton_Click"/>  
</Grid>  

ChildPage.xaml

<Grid x:Name="LayoutRoot">          
  <TextBlock Text="This is Child Window" VerticalAlignment="Center" HorizontalAlignment="Center"   
             FontFamily="Lucida Sans Unicode" FontSize="20" FontWeight="ExtraBold"/>  
</Grid>  

Create URI for Startup ASPX Page

While we open Child Wwindow in new tab or window, the startup aspx page for the silverlight application remains the same. So we need to define the startup page URI and the name of the ChildWindow will appended to the URI string on the button click operation.

string startupPath = string.Empty;  
public MainPage()  
{  
   InitializeComponent();  
   startupPath = App.Current.Host.Source.Scheme + @"://" +  
                 App.Current.Host.Source.Host + ":" +  
                 App.Current.Host.Source.Port.ToString() + @"/SL\_Window\_MultiBrowserSupportTestPage.aspx";  
}  

Define Navigation URI for the Child Window

In the code snippet for MainPage.xaml, you may observe that two buttons are defined. However, the first button defines a HyperlinkButton as its Content. I have used this HyperlinkButton for the requirement when the ChildWindow needs to be opened inside a new tab in the same browser. Following code defines the click operation for this HyperlinkButton.

private void tabBTn_Click(object sender, RoutedEventArgs e)  
{  
  tabBTn.TargetName = "_blank";  
  string url = startupPath + "#ChildPage.xaml";  
  tabBTn.NavigateUri = new Uri(url, UriKind.RelativeOrAbsolute);  
}  

Following code snippet shows the implementation to open the ChildWindow in a new browser Window.

private void browserBtn_Click(object sender, RoutedEventArgs e)  
{  
  HtmlPopupWindowOptions options = new HtmlPopupWindowOptions();  
  options.Left = 300;  
  options.Top = 150;  
  options.Width = 1024;  
  options.Height = 768;  
  options.Directories = false;  
  options.Location = false;  
  options.Menubar = false;  
  options.Status = false;  
  options.Toolbar = false;  

  Uri myUri = new Uri(startupPath + "#ChildPage.xaml");  
  HtmlPage.PopupWindow(myUri, "self", options);  
}  

Set the StartUp Page

Once you apply the above code and test the functionality of the buttons, you would be surprised to see that even after defining the ChildWindow uri, MainPage opens up each time on button click. This is due to the fact that every time, the current page is redirected, it points to the RootVisual which is set to MainPage in the application Startup event. We need to parse the navigation uri to point to the correct startup Page. Modify the Application_Startup event in App.xaml file with the given code snippet.

private void Application_Startup(object sender, StartupEventArgs e)  
{  
   string url = App.Current.Host.NavigationState.ToString();  

   if (url == "")  
     this.RootVisual = new MainPage();  
   else  
     this.RootVisual = new ChildPage();  
}  

This is it !!! Refer to the attached sample for complete implementation. Download Sample