ASP.NET Silverlight Server Control in VB.NET

Posted in VB.NET | SILVERLIGHT USING VB.NET November 06, 2019
Tags: ASP.NET Silverlight Server, Control in VB.NET, Silverlight
The ASP.NET Silverlight server control lets you provide a Rich Internet Application (RIA) experience with your Web application, beyond what can be done with AJAX and DHTML alone.
  • 2074

The ASP.NET Silverlight server control lets you provide a Rich Internet Application (RIA) experience with your Web application, beyond what can be done with AJAX and DHTML alone. By using this control, you can integrate XAML and any supporting code (a managed-code assembly, a managed dynamic-language script module, or client JavaScript libraries) into your Web site.


 The Silverlight server control uses XAML in combination with the Silverlight plug-in and the JavaScript Sys.UI.Silverlight.Control class. Unlike the MediaPlayer server control, the Silverlightserver control is generic and is designed to manage more than media files. 
 You can use managed code to handle interaction with the Silverlight server control (a Silverlight 2 scenario). Alternatively, you can use JavaScript to create a JavaScript type to handle the interaction (supported in Silverlight 1.0 and Silverlight 2). To use the JavaScript type, you reference the type by using the ScriptType property of the server control. Then in the Scripts collection of theScriptManager control, you add a reference to the script library that contains the type definition. 
 
Note: Web pages that use the Silverlight server control must include a ScriptManager control.

Using the Silverlight Server Control

The Silverlight control enables you to render a .xap application package which is created by using XAML and managed code. 
 The following example shows the declarative markup for a Silverlight server control that is configured to reference the .xap application packaged named myExample.xap. 

   <asp:Silverlight 
    ID="Xaml1" 
    runat="server" 
    Source="~/ClientBin/myExample.xap" 
    MinimumVersion="2.0.30523" 
    Width="100%" 
    Height="100%">
   </asp:Silverlight> 
 The Silverlight control creates the Sys.UI.Silverlight.Control client script class (based on the model used in the ASP.NET AJAX Extensions) that provides a JavaScript programming model to control the client player.

Creating a Managed-Code Assembly to Use with the Silverlight Server Control

A XAML file can reference code written in a managed assembly by using the x:Class attribute. Event handlers can be attached by using attributes in XAML. You can create a Silverlight project in development environments such as Visual Studio 2008, in which you can create XAML and a managed-code assembly. These outputs can be referenced in the Silverlight server control.

Note: To run .xap files from IIS, you must have the .xap file name extension associated with a MIME type of " application/x-silverlight-app". 
 The following example shows the contents of a XAML element that references a managed-code assembly.

<Canvas x:Name="parentCanvas"
   xmlns="http://schemas.microsoft.com/client/2007" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  Loaded="OnPageLoaded" 
  x:Class="CustomClass;assembly=CustomAssembly.dll"
   Width="640" 
  Height="480" 
   Background="White" >


 You can reference this XAML file through the Source property of the Silverlight server control. You must also make sure that the MinimumVersion property is set appropriately. The following example shows how to do this. Although the XAML that is downloaded references the managed code, the framework generates a client base Sys.UI.Silverlight.Control instance. This lets you provide additional JavaScript interaction in a manner consistent with the Microsoft ASP.NET AJAX Extensions model. 
 The following example shows how to use the Silverlight control with a managed-code assembly. TheSilverlight control enables you to render a .xap application package which is created by using XAML and managed code. This example includes a Web page (.aspx), a XAML page (.xaml) and the code-behind for the XAML page. 
 The following code shows how to include the Silverlight server control in a Web page. The Sourceattribute of the Silverlight server control references the .xap application package.

<%@ Page Language="VB" AutoEventWireup="true" %>

<%@ Register Assembly="System.Web.Silverlight"Namespace="System.Web.UI.SilverlightControls"
     TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;">
 <head id="Head1" runat="server">
     <title>Test Page For myExample</title>
 </head>
<body style="height:100%;margin:0;">
     <form id="form1" runat="server" style="height:100%;">
         <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
         <div  style="height:100%;">
             <asp:Silverlight ID="Xaml1" runat="server" Source="../ClientBin/myExample.xap"MinimumVersion="2.0" Width="100%" Height="100%" />
         </div>
     </form>
 </body>
 </html>

The following code shows a XAML example (page.xaml) that is included in the .xap application package referenced in the earlier code example. 

XAML

<UserControl x:Class="myExample.Page"
     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="White">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="Auto"/>
         </Grid.RowDefinitions>
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="Auto"/>
             <ColumnDefinition Width="Auto"/>
         </Grid.ColumnDefinitions>
         <TextBlock Text="Button Demonstration" Margin="0,20,10,15"
             FontFamily="Verdana" FontSize="18" FontWeight="Bold"
             Foreground="#FF5C9AC9" Grid.Row="0" Grid.ColumnSpan="2"/>
         <Button x:Name="btn1" Grid.Row="1" Margin ="0,5,5,5" 
            HorizontalAlignment="Left"
             Foreground="Green" Width="120" Click="OnClick1" 
            Content="Hover to Click" ClickMode="Hover" />
         <TextBlock x:Name="text1" Grid.Row="1" Grid.Column="1" 
            Margin ="0,8,0,0" />
         <Button x:Name="btn2" Grid.Row="2" Margin ="0,5,5,5" 
            HorizontalAlignment="Left" 
            Foreground="Blue" Width="120" Click="OnClick2" 
            Content="Press to Click" ClickMode="Press" />
         <TextBlock x:Name="text2" Grid.Row="2" Grid.Column="1" 
            Margin="0,8,0,0" />
         <Button x:Name="btn3" Grid.Row="3" Margin ="0,5,5,5" 
            HorizontalAlignment="Left"
             Click="OnClick3" Width="120" Content="Reset" 
            ClickMode="Release"/>
         <TextBlock x:Name="text3" Grid.Row="3" Grid.Column="1" 
            Margin ="0,8,0,0" />
     </Grid>
 </UserControl>
 

The following code shows the supporting code-behind (page.xaml.cs or page.xaml.vb) for the previous XAML example (page.xaml).

Partial Public Class Page
    Inherits UserControl
    Public Sub New()
        InitializeComponent()
    End Sub
     Private Sub OnClick1(ByVal sender As Object, ByVal e As RoutedEventArgs)
        btn1.Foreground = New SolidColorBrush(Colors.Blue)
        text1.Text = "Click event handled on Hover."
         text3.Text = ""
     End Sub

    Private Sub OnClick2(ByVal sender As Object, ByVal e As RoutedEventArgs)
        btn2.Foreground = New SolidColorBrush(Colors.Green)
        text2.Text = "Click event handled on Press."
         text3.Text = ""
     End Sub

    Private Sub OnClick3(ByVal sender As Object, ByVal e As RoutedEventArgs)
        btn1.Foreground = New SolidColorBrush(Colors.Green)
        btn2.Foreground = New SolidColorBrush(Colors.Blue)
        text1.Text = ""
         text2.Text = ""
         text3.Text = "Click event handled on Release."
     End Sub
 End Class

Using JavaScript and XAML with the Silverlight Server Control

The following example shows the markup for a Silverlight server control that defines a simple calculator in XAML. The logic for interacting with the XAML is defined in a separate JavaScript class. The Silverlight server control references the file that contains the XAML markup (Calculator.xaml). You can also see how to reference the client-script library (Calculator.js) for the calculator code, and how to reference the JavaScript class (Custom.Calculator).

        <asp:ScriptManager ID="ScriptManager1" runat="server">
             <Scripts>
                 <asp:ScriptReference Name="SilverlightControl.js"
          Assembly="System.Web.Silverlight"/>
                 <asp:ScriptReference Path="calculator.js" />
             </Scripts>
         </asp:ScriptManager>

        <asp:Silverlight runat="server" ID="Silverlight1" 
    Height="340" 
    Width="320" 
    Source="../calculator.xaml" 
    ScriptType="Custom.Calculator" 
     OnPluginError="onXamlError">


 In its basic form, the Silverlight server control provides a JavaScript type that includes members such as the onPluginLoaded method and the onPluginError method. The Silverlight server control references a XAML file through the Source property. The code for interacting with the XAML can be in a managed-code assembly or in a client JavaScript library (.js file).

Categories

More Articles

    © 2020 DotNetHeaven. All rights reserved.