14.8. Adding Silverlight to Your Application

So back to the Hi yo Silver application. How did this end up being rendered in the browser? In Silverlight 3.0, applications are displayed using the <object> tag. Previous versions of Silverlight utilized an ASP.NET Silverlight tag that has since been deprecated (although still available on CodePlex).

14.8.1. Object Tag

Select the Chapter14.HelloSilverlight.Web project, and open the file ~/Chapter14.HelloSilverlightTestPage.html. The page will contain an <object> tag similar to the following:

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
          width="100%" height="100%">
    <param name="source" value="ClientBin/Chapter14.HelloSilverlight.xap"/>
    <param name="onError" value="onSilverlightError" />
    <param name="background" value="white" />
    <param name="minRuntimeVersion" value="3.0.40818.0" />
    <param name="autoUpgrade" value="true" />

<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0"
         style="text-decoration:none">
        <img src="http://go.microsoft.com/fwlink/?LinkId=161376"
             alt="Get Microsoft Silverlight" style="border-style:none"/>
    </a>
</object>

Note the following from the preceding code:

  • An <object> tag is used to embed the Silverlight plug-in in the web page.

  • The <object> tag has a param value that references the JavaScript function onSilverlightError() to return any errors from Silverlight to the user via JavaScript.

When you compile your Silverlight application, all the XAML, resources, references, and so forth get compressed into an XAML application package (XAP) file. The <object> tag has a property called Source that contains the location of the XAP file.

Also note that the test page contains the following line:

<script type="text/javascript" src="Silverlight.js"></script>

Silverlight.js contains lots of functionality such as error handling, loading, and displaying the plug-in; routing messages to JavaScript; and upgrading the plug-in. If you want to customize how the Silverlight application is displayed, you can modify the parameters passed into Silverlight.js (or even Silverlight.js).

14.8.2. Pages in Silverlight

Silverlight allows you to divide your application into a number of XAML pages. However, you cannot just move between pages as you do in ASP.NET with functions such as Response.Redirect or Server.Transfer.

A popular way of implementing navigation between pages is to create one page with a container control that you then load other XAML files into.

Silverlight 3.0 introduced an easier way (NavigationApplication) that you will examine in Chapter 15.


You will create this paging functionality now because it will make it easy to navigate through the examples:

  1. Right-click the Chapter14.HelloSilverlight solution.

  2. Select Add Class.

  3. Call the class PageNavigator.

  4. Enter the following code:

    using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;

    using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace Chapter14.HelloSilverlight
{
    public class PageNavigator
    {
        private static Grid RootLayoutElement;

        static PageNavigator()
        {
            RootLayoutElement = Application.Current.RootVisual as Grid;
        }

        public static void LoadPage(UserControl NewControl)
        {

            //Get reference to old control
            var OldUserControl = RootLayoutElement.Children[0] as UserControl;

            //Add new control
            RootLayoutElement.Children.Add(NewControl);

            //Remove old control
            RootLayoutElement.Children.Remove(OldUserControl);
        }
    }
}

14.8.3. Creating a Silverlight User Control

You will now create a menu page with a number of buttons to take you to the examples you will create:

  1. Right-click the Chapter14.HelloSilverlight solution, and select Add New Item.

  2. Select Silverlight User Control.

  3. Enter the name MainMenu.

  4. Note that at the top of the XAML code is a control declaration:

    <UserControl x:Class="Chapter14.HelloSilverlight.MainMenu"
    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">

    You want the menu control to span the whole page, so remove this code:

    d:DesignHeight="300" d:DesignWidth="400

  5. Enter the following XAML inside the LayoutRoot Grid to create buttons to navigate to the test pages:

    <TextBlock  FontSize="40" Canvas.Left="200" Canvas.Top="25" >Silverlight Demo</TextBlock>

<StackPanel Canvas.Left="300" Canvas.Top="150"  Orientation="Vertical"
            VerticalAlignment="Top">
  <Button x:Name="cmdStackPanel" Content="Stack Panel"></Button>
  <Button x:Name="cmdGrid" Content="Grid"></Button>
  <Button x:Name="cmdAnimation" Content="Animation"></Button>
  <Button x:Name="cmdCallJS" Content="Call JS"></Button>
  <Button x:Name="cmdMediaTest" Content="Media"></Button>
  <Button x:Name="cmdDataBind" Content="Data Binding"></Button>
</StackPanel>

OK, nearly done. But when the Silverlight application is first loaded, you want to load MainMenu.xaml rather than MainPage.xaml. You can do this by editing a file called App.xaml.

14.8.4. App.xaml

App.xaml handles global events in a manner similar to Global.asax.

Open ~/App.xaml.cs. By default, App.xaml.cs has code such as the following:

private void Application_Startup(object sender, StartupEventArgs e)
{
    this.RootVisual = new MainPage();
}

This loads the MainPage.xaml file when the application starts. You want to alter this to load the MainMenu.xaml file instead. Change the Application_Startup() method to the following:

private void Application_Startup(object sender, StartupEventArgs e)
{
    Grid root = new Grid();
    root.Children.Add(new MainMenu());
    this.RootVisual = root;
}

14.8.5. Styles

Silverlight allows you to define set styles for objects in a manner that is a cross between CSS and ASP.NET themes. You will create a simple style that will format the page title on the menu page.

  1. Open ~/App.xaml.

  2. Inside the <Application.Resources> block, enter the following:

    <Style x:Key="MyStyle" TargetType="TextBlock">
  <Setter Property="FontFamily" Value="Comic Sans MS"/>
  <Setter Property="FontSize" Value="54"/>
  <Setter Property="Foreground" Value="#FF0000FF"/>
</Style>

  3. Now go back to MainMenu.xaml, and find the line where it says the following:

    <TextBlock FontSize="40" Canvas.Left="200" Canvas.Top="25">Silverlight Demo</TextBlock>

  4. Add the following attribute to this tag to reference the style you created in App.xaml:

    Style="{StaticResource MyStyle}"

Your tag should now look like this:

<TextBlock  FontSize="40" Canvas.Left="200" Canvas.Top="25"
Style="{StaticResource MyStyle}">Silverlight Demo</TextBlock>

APPLICATION.RESOURCES

The Application.Resources section allows you to hold much more complex styles than you have just created. It can be used to hold pretty much any set of properties you might want to reuse. For example, you could include colors, gradients, or even control templates.


..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.220.53.93