Download Silverlight Beta 4 Documentation

Silverlight Beta 4 Documentation on MSDN

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 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.

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.

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

• 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.

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>

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>

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 UIElement.  Children 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>

In Next we will discuss about Silverlight  Dock Panel Container

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.