Silverlight Navigation : Browser Navigation Overview

Silverlight does not provide built in direct navigation system not it provides integration with browser navigation system but Silverlight provide some other features that can be used for navigation while developing Silverlight applications. There is two type of navigation is possible in Silverlight application

Browser Navigation

Browser navigation means Silverlight application can directly point to pages that are outside of your application domain or applications. Like you can use browser navigation for redirecting user to some other web page. To enable user navigation to other web pages Silverlight provides a user control called HyperLinkButton and by setting it’s Navigateuri. There is one more important property HyperLinkButton has called TargetName means whether url will be opened in a new windows or in same window. It’s Content property is display the text of HyperLinkButton Control.

<HyperlinkButton x:Name="hpb" Content=" All About ASP.Net" NavigateUri="http://allaboutasp.net" TargetName="_blank"></HyperlinkButton>

The above example is simple static browser navigation example but browser navigation can also be done programmatically by manipulating HTML DOM objects through the HtmlPage class.

<HyperlinkButton Content="Go to Silverlight Website" Click="GoToSilverlight" />
Imports System.Windows.Browser

Partial Public Class HomePage
    Inherits Page

    Public Sub New()
        InitializeComponent()
    End Sub

    'Executes when the user navigates to this page.
    Protected Overrides Sub OnNavigatedTo(ByVal e As System.Windows.Navigation.NavigationEventArgs)

    End Sub
    Protected Sub GoToSilverlight(ByVal sendar As Object, ByVal e As System.Windows.RoutedEventArgs)
        If (HtmlPage.IsPopupWindowAllowed) Then
            HtmlPage.PopupWindow( _
                New Uri("http://www.silverlight.net"), Nothing, Nothing)
        Else
            HtmlPage.Window.Navigate(New Uri("http://www.silverlight.net"))
        End If


    End Sub
End Class

Silverlight Plug-in Lifecycle

Silverlight Application class provides several services that commonly required by Silverlight application, so when you create a Silverlight you must create a class that is being derived from Silverlight Application class. Application class represents Entry point for your Silverlight application.

Silverlight Plug-in Lifecycle

Silverlight plug-in lifecycle starts with opening a web page that host a Silverlight plug-in. If Silverlight plug-in is not present then web page ask you to install Silverlight browser plug-in. Then web browser activates the Silverlight plug-in and start downloading application package. Silverlight plug-in load Silverlight core services, followed by Silverlight CLR (Common Language Runtime) which creates application domain for your application. After downloading application package CLR creates object of Application class and raise Application Startup event. Application constructor can also be used to initialize application task but generally its a good practice to use Application Startup event handler for most application initialization task.

Silverlight Plug-in Lifecycle

There can be only one Application instance in a Silverlight-based application. After startup, the Application instance provides several services that applications commonly require. You can access these services from any code in your application by retrieving the Application instance from the static Application.Current property.

Silverlight Application Lifetime Management

Silverlight Application class provides a number of features to developers and Application Lifetime management is one feature that is being offered by Silverlight Application class. You can add code to your application class that runs at the following points in the application lifetime:

The application class constructor

Application class constructor can be used for basic initialization of variables and attaching event handlers. Application class constructor typically includes a call to InitializeComponent method which is responsible for merging of XAML and code behind file. Generally your application classes are defined using XAML markup and a code-behind file.

public Sub New()
    InitializeComponent()
End Sub

The application Startup event

Silverlight plug-in raises Application Startup event after loading application package. At this point of time all application package assemblies are loaded and available for use. Application Startup event can be used for

  • Process data that you retrieve at startup, such as initialization and URL parameters, or data stored in a previous application session.
  • Display the application user interface (UI).
  • Begin asynchronous downloads of additional resource files or assemblies.
Private Sub Application_Startup(ByVal o As Object, ByVal e As StartupEventArgs) Handles Me.Startup
    Me.RootVisual = New MainPage()
End Sub

Application Exit

The Application.Exit event occurs when one of the following actions takes place:

  • The user closes the Web page hosting the Silverlight plug-in.
  • The user refreshes the host Web page.
  • The user navigates the browser away from the host Web page.
  • The host Web page uses JavaScript and the HTML DOM to remove the plug-in from the page.
  • The user logs off or shuts down the operating system.

One common use for the Application.Exit event is to save application settings by using the IsolatedStorageSettings class. For more information, see How to: Store and Retrieve Application Settings Using Isolated Storage.

Private Sub Application_Exit(ByVal o As Object, ByVal e As EventArgs) Handles Me.Exit

End Sub

Silverlight Application and Programming Model

Application that are written for targeting Silverlight 2.0 platform using managed code uses Silverlight Application model. Application model refers to application packaging and the common functionality encapsulated by the Application class. The application model helps you to develop both simple applications and complex, extensible applications that can share resources across a network. Silverlight offers two different programming model for developing Silverlight applications.

  • The managed API for Silverlight
  • The JavaScript API for Silverlight

You can not use both these programming models at same time with in the single application. Managed API model provides more functionality as compare to JavaScript model because application using managed API model can also access lightweight .Net framework classes.

Silverlight Layout Container Panel: Grid

Grid is one of the Silverlight container layout panel that enable complex layout. By default grid contains one row and one column. RowDefinations and ColumDefinations collections also be used to define more rows and columns in Grid. RowDefination and ColumnDefination objects are used to define the size of each row and column inside Grid. In Silverlight Grid is designed to use for your application it is not design for displaying the data, it’s not like GridView in Visual Studio.

Grid.Column and Grid.Row properties are used to position objects in specific cells.

For scenarios that require application layout that is not possible using any of the predefined Panel elements, custom layout behaviors can be achieved by inheriting from Panel and overriding the default measure and arrange behavior by using the MeasureOverride and ArrangeOverride methods. For more information

Example

<UserControl x:Class="SilverlightApplication3.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="#DCDCDC" Width="400" Height="300" ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="250" />
            <ColumnDefinition Width="150" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="2*" />
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="1" Margin="10" FontWeight="Bold"  Foreground="Blue"  Text="Silverlight Grid Demo" HorizontalAlignment="Center" VerticalAlignment="Center" />
        <Grid x:Name="FormLayoutGrid" Grid.Row="1" Grid.Column="0" ShowGridLines="True">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" Grid.Column="0" Text="First Name" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" />
            <TextBox Grid.Row="0" Grid.Column="1" Margin="10" />
            <TextBlock Grid.Row="1" Grid.Column="0" Text="Last Name" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" />
            <TextBox Grid.Row="1" Grid.Column="1" Margin="10" />
            <TextBlock Grid.Row="2" Grid.Column="0" Text="Address" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" />
            <TextBox Grid.Row="2" Grid.Column="1" Margin="10" />
            <TextBlock Grid.Row="3" Grid.Column="0" Text="Email Address" Margin="10" HorizontalAlignment="Left" VerticalAlignment="Center" />
            <TextBox Grid.Row="3" Grid.Column="1" Margin="10" />
        </Grid>
    </Grid>


</UserControl>

Silverlight Grid Demo

Silverlight Layout Container Panels : Stack Panel

Stack Panel is one of the Silverlight panel elements enable layout. Stack panel arranges objects in a list, list can be vertical or horizontal depending upon the direction. Orientation property determined the direction of list, default value of orientation property is vertical.

Example

<StackPanel Margin="20">
    <Rectangle Fill="Brown"  Width="50" Height="50" Margin="5" />
    <Rectangle Fill="Blue" Width="50" Height="50" Margin="5" />
    <Rectangle Fill="Green" Width="50" Height="50" Margin="5" />
    <Rectangle Fill="Yellow"  Width="50" Height="50" Margin="5" />
</StackPanel>

Silverlight Layout Container Panels – Dock Panel

Silverlight Dock Panel is one of the Silverlight Panel that enables layout. DockPanel is used to arrange a set of objects around the edges of panel. Dock Panel’s Dock property enables you to specify the location of objects inside Dock Panel. If you set the LastChildFill property to true (the default value) and the last element is allowed to resize, the last element added to the panel will resize to fill the remaining space. If the last element is set to a specific size, the last element will be set to the specified size and positioned in the middle of the remaining space. The order in which elements are added to the DockPanel is important.

DockPanel

DockPanel Example

<Border BorderBrush="Black" BorderThickness="3" >
            <StackPanel x:Name="LayoutRoot" Background="White">
                <TextBlock Margin="5" Text="Dock Panel" />
                <Border BorderBrush="Black" BorderThickness="3" >
                    <controls:DockPanel LastChildFill="true" Height="265">
                        <Button  Content="Dock: Left" controls:DockPanel.Dock ="Left" />
                        <Button Content="Dock: Right" controls:DockPanel.Dock ="Right" />
                        <Button  Content="Dock: Top" controls:DockPanel.Dock ="Top" />
                        <Button  Content="Dock: Bottom" controls:DockPanel.Dock ="Bottom" />
                        <Button Content="Last Child" />
                    </controls:DockPanel>
                </Border>
            </StackPanel>
        </Border>

In Next we will discuss about Dock Panel Grid

Silverlight Layout Container Panels – Canvas Panel

When you start creating Silverlight based applications, one of first things you will need to choose how your Silverlight application layout. Silverlight provides five layout panels. The default panel is Grid panel.

Canvas Panel

Canvas is one of the Silverlight panel, that enables layout of your Silverlight applications. Control positing inside Canvas in controlled by specifying the X and Y coordinates of  controls. These coordinates are in pixel. Canvas.Left and Canvas.Top properties can also be use for specifying X and Y coordinates. Canvas objects can also be nested. Each child element must be UIElementChildren property is used for accessing Canvas child elements in code. Sometimes Canvas is used as a container for other objects in that Canvas does not have any visible property. A Canvas is not visible if any of the following conditions are true:

  • The Height property is equal to 0.
  • The Width property is equal to 0.
  • The Background property is equal to nullNothingnullptrunita null reference (Nothing in Visual Basic).
  • The Opacity property is equal to 0.
  • The Visibility property is equal to Visibility..::..Collapsed.
  • One of the ancestor objects of the Canvas is not visible.

Canvas Example

<Canvas Width="640" Height="480" Background="White">
    <Rectangle Canvas.Left="30" Canvas.Top="30" 
           Fill="blue" Width="250" Height="150" />
    <Rectangle x:Name ="CanvasRect" Canvas.Left="60" Canvas.Top="60"  Height="50" Width="100" Fill="Red" ></Rectangle>
</Canvas>

Canvas Example

In Next we will discuss about Silverlight  Dock Panel Container

 

How to Test XAML

XAML is acronym for eXtensible Application Markup Language (and pronounced “Zammel”) and it is used for developing Silverlight Application. XAML can be written using any text editor like Notepad++, EditPlus or Simply Notepad, but after writing XAML there is a need to check whether XAML is working properly or not. There are tools available for running XAML application including Visual Studio or Microsoft Expression Blend. But there are some other ways also that can be used to run and test you XAML Application

SilverlightPad

SilverlightPad is a community application available at Silverlight community website. SilverlightPad can be used online as well as offline. If you are running SilverlightPad online then you can see XAML files on the left hand side. JavaScript tab is also there for attaching JavaScript with XAML. The XAML markup you type is parsed when you click on the Parse button on the bottom right, and the corresponding UI is rendered in the Scene pane.

SilverlightPad can only be used for testing Silverlight 1.0 applications.

Visit SilverlightPad Website

KaXAML

KaXAML is a windows application and it can be used to test Silverlight 2.0 applications also. On the right hand side KaXAML has a XAML pane where you can put or type XAML code. LaXAML also has a small toolbar comes very handy for taking snapshots, filling colors and performing some basic tasks.

KaXAML