AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Silverlight入门教程(基于Asp.net运行环境示例)[示例代码下载]

分类：Silverlight作者：编程之家
 
 
Silverlight 入门教程
-- 基于 Asp.net 运行环境示例 
 
 
 

 
(一).概述 
(二). 代码示例 
 1).基础知识示例 
  1. 对象的定位 
  2. 使用SilverLight插件 
  3. SilverLight元素的鼠标事件 
  4. SilverLight元素的键盘事件 
  5. 方法createFromXaml使用示例 
  6. 访问和修改Silverlight元素以及属性 
  7. Silverlight中的字体使用 
  8. 全屏支持功能 
  9. Silverlight Downloader 对象使用 
  10.定时器功能 
  11.错误处理支持 
  12.把xaml段内置在aspx或html页面中 
 2).制作图形示例 
  13.基本图形形状示例 
  14.画刷对象的使用 
  15.视频刷对象的使用 
  16.Path元素使用 
  17.变换效果(Transform) 
 3).多媒体功能 
  18.在线电影播放 
 4).制作动画效果示例 
  19.一个动画示例 
  20.动画的交互控制
  21.动画关键帧示例 

@L_404_2@
Silverlight是一个跨浏览器的、跨操作系统平台的插件，为Web带来下一代媒体体验和丰富的交互式应用程序体验. 使用JS实现Ajax技术可以使网站具有很好的用户体验,但它也会使网站过于庞大和臃肿. 业余时间学习了一下微软的 Silverlight官方教程,在学习时顺便根据学习示例整理了一个教程. 此教程包括一些精简的小例子,主要针对开发使用场景展开示例,在实际开发中也可以作为查找手册使用. 运行环境为VS 2005,这些示例比较简单很容易看懂,因此示例没有太多注释.
                                                   Author:【夜战鹰】【ChengKing(ZhengJian)】
( 二). 代码示例
1). 基础知识示例
1. 对象的定位
    通过呈现几个 Silverlight元素来示例对象之间的定位,以及在一个页面中创建装载多个Silverlight对象.
I. 页面代码 (Default.aspx)
< html xmlns="http://www.w3.org/1999/xhtml" >
< head runat="server">
    <title>Silverlight 对象的定位</title>   
    <script type="text/javascript" src="../Silverlight.js"></script>
    <script type="text/javascript" src="Default.aspx.js"></script>
</ head >
< body >
    <form id="form1" runat="server">       
        <div id="SilverlightControlHost1" >
            <script type="text/javascript">
                createSilverlight1();
            </script>
        </div>
        <hr>
         <div id="SilverlightControlHost2" >
            <script type="text/javascript">
                createSilverlight2();
            </script>
        </div>
        <hr>
        <div id="SilverlightControlHost3" >
            <script type="text/javascript">
                createSilverlight3();
            </script>
        </div>
        <hr>
        <div id="SilverlightControlHost4" >
            <script type="text/javascript">
                createSilverlight4();
            </script>
        </div>
        <hr>
        <div id="SilverlightControlHost5" >
            <script type="text/javascript">
                createSilverlight5();
            </script>
        </div>
    </form>
</ body >
</ html >
II. 页面对应的 JS文件代码(Default.aspx.js)
// 创建对象
function createSilverlight1()
{
     Silverlight.createObjectEx({
         source: "Page1.xaml",
         parentElement: document.getElementById("SilverlightControlHost1"),
         id: "SilverlightControl1",
         properties: {
              width: "350",
              height: "350",
              version: "1.0", 
              background: "white",
              iswindowless: "true",
              enableHtmlAccess: "true"            
         },
         events: {}
     });
}
 
function createSilverlight2()
{
     Silverlight.createObjectEx({
         source: "Page2.xaml",
         parentElement: document.getElementById("SilverlightControlHost2"),
         id: "SilverlightControl2",
         events: {}
     });
}
 
function createSilverlight3()
{
     Silverlight.createObjectEx({
         source: "Page3.xaml",
         parentElement: document.getElementById("SilverlightControlHost3"),
         id: "SilverlightControl3",
         events: {}
     });
}
 
function createSilverlight4()
{
     Silverlight.createObjectEx({
         source: "Page4.xaml",
         parentElement: document.getElementById("SilverlightControlHost4"),
         id: "SilverlightControl4",
         events: {}
     });
}
 
function createSilverlight5()
{
     Silverlight.createObjectEx({
         source: "Page5.xaml",
         parentElement: document.getElementById("SilverlightControlHost5"),
         id: "SilverlightControl5",
         events: {}
     });
}
III.Xaml文件代码
1. Page1.xaml代码
< Canvas
     xmlns = "http://schemas.microsoft.com/client/2007"
     xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
     Width = "640"Height="480"
     Background = "LightGreen"  
  Canvas.Left = "10"
  Canvas.Top = "10"
     >
 < Rectangle Canvas.Left = "30"Canvas.Top="30"Fill="LightBlue"  
     Width = "200"Height="200" />
</ Canvas >
2. Page2.xaml代码
< Canvas
     xmlns = "http://schemas.microsoft.com/client/2007"
     xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
     Width = "300"Height="300"
     Background = "White">
 
 < Canvas Width = "250"Height="250"Canvas.Left="30"Canvas.Top="30"Background="LightBlue">
 
    < Rectangle Canvas.Left = "30"Canvas.Top="30"Fill="LightGreen"
       Width = "200"Height="200" />
 </ Canvas >
</ Canvas >
3. Page3.xaml代码
< Canvas
     xmlns = "http://schemas.microsoft.com/client/2007"
     xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
     Width = "300"Height="300"
     Background = "White">
 
 < Line X1 = "280"Y1="10"X2="10"Y2="280"
      stroke = "Blue"strokeThickness="5"/>
 
  < polyline Points = "150,150 150,250 250,150"
      stroke = "Yellow"strokeThickness="10"/>
 
 
 < Path Data = "M 10,100 C 10,300 300,-200 250,100z"
      stroke = "Red"Fill="Orange"
      Canvas.Left = "10"Canvas.Top="10" />
 
</ Canvas >
4. Page4.xaml代码
< Canvas
  xmlns = "http://schemas.microsoft.com/client/2007"
  xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
  Width = "200"Height="200">
 < Rectangle
    Canvas.Left = "100"Canvas.Top="100"
    Width = "50"Height="50"
    Fill = "RoyalBlue">
    < Rectangle.RenderTransform >
      < RotateTransform Angle = "45" />
    </ Rectangle.RenderTransform >
 </ Rectangle >
</ Canvas >
5. Page5.xaml代码
< Canvas
    xmlns = "http://schemas.microsoft.com/client/2007"
    xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml">
 
 < Ellipse
      Canvas.ZIndex = "3"
      Canvas.Left = "5"Canvas.Top="5"
      Height = "200"Width="200"
      stroke = "Black"strokeThickness="10"Fill="Silver" />
 
 < Ellipse
      Canvas.ZIndex = "2"
      Canvas.Left = "50"Canvas.Top="50"
      Height = "200"Width="200"
      stroke = "Black"strokeThickness="10"Fill="DeepSkyBlue" />
 
 < Ellipse
      Canvas.ZIndex = "1"
      Canvas.Left = "95"Canvas.Top="95"
      Height = "200"Width="200"
      stroke = "Black"strokeThickness="10"Fill="Lime" />
 
</ Canvas >
 
2. 使用SilverLight插件
I. 页面代码 (Default.aspx)
< html xmlns="http://www.w3.org/1999/xhtml" >
< head runat="server">
    <title> 访问Silverlight插件</title>   
    <script type="text/javascript" src="../Silverlight.js"></script>
    <script type="text/javascript" src="Default.aspx.js"></script>
</ head >
< body onload="document.getElementById('SilverlightControlHost').focus()">
    <form id="form1" runat="server">
        <div id="SilverlightControlHost" >
            <script type="text/javascript">
                createSilverlight();
            </script>
        </div>
    </form>
</ body >
</ html >
II.Xaml文件代码
< Canvas Name = "parentCanvas"
         Opacity = "0"
        xmlns = "http://schemas.microsoft.com/client/2007"
        xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
         Loaded = "onLoaded"MouseLeftButtonDown="MouseLeftButtonDown"
        >
 
 < Canvas.Triggers >
         < EventTrigger RoutedEvent = "Canvas.Loaded">
              < EventTrigger.Actions >
                   < BeginStoryboard >
                       < Storyboard >
                            < DoubleAnimation Storyboard.TargetName = "parentCanvas"Storyboard.TargetProperty="Opacity"From="0"To="1"Duration="0:0:5"/>
                       </ Storyboard >
                   </ BeginStoryboard >
              </ EventTrigger.Actions >
         </ EventTrigger >
     </ Canvas.Triggers >
 
     < TextBlock Name = "helloBlock"Foreground="Black"Cursor="Hand"Text="King" />
</ Canvas >
III.页面对应的 JS文件代码(Default.aspx.js)
function createSilverlight()
{   
     Silverlight.createObjectEx({
         source: "Page.xaml",
         parentElement: document.getElementById("SilverlightControlHost"),
         id: "SilverlightControl",
         events: {onLoad:onLoad}
     });
}
 
// 判断当前安装插件的版本
function onLoaded(sender,eventArgs)
{
    var version = "1.1";
    var isInstalled = Silverlight.isInstalled(version);
    alert(isInstalled);      
}
 
// 访问运行中插件
function MouseLeftButtonDown(sender,mouseEventArgs)
{
    var plugin = sender.getHost();   
   
    alert("Silverlight V1.1 supported: " + plugin.isversionSupported("1.1"));//plugin
    alert("IsLoaded: " + plugin.IsLoaded);//plugin
   
    alert("Background: " + plugin.Settings.Background); //plugin.Settings
   
    alert("ActualHeight: " + plugin.Content.ActualHeight );//plugin.Content      
}
 
function onLoad(plugin,userContext,sender)
{
    alert(plugin.id + " : " + userContext + " : " + sender.toString());
}
 
 
3. SilverLight 元素的鼠标事件
I.鼠标滑入和滑出事件
I. 页面代码 (Default.aspx)
< html xmlns="http://www.w3.org/1999/xhtml" >
< head runat="server">
    <title>Silverlight 元素的鼠标进入/离开事件</title>   
    <script type="text/javascript" src="../../Silverlight.js"></script>
    <script type="text/javascript" src="Default.aspx.js"></script>
</ head >
< body onload="document.getElementById('SilverlightControlHost').focus()">
    <form id="form1" runat="server">
        <div id="SilverlightControlHost" >
            <script type="text/javascript">
                createSilverlight();
            </script>
        </div>
    </form>
</ body >
</ html >
II.Xaml文件代码
< Canvas
  xmlns = "http://schemas.microsoft.com/client/2007"
  xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
  Loaded = "onLoaded">
 
 < Ellipse
    MouseEnter = "onMouseEnter"
    MouseLeave = "onMouseLeave"
    Height = "100"Width="100"
    Fill = "teal"Name="Ellispse1" />
 
 < Ellipse
    MouseEnter = "onMouseEnter"
    MouseLeave = "onMouseLeave"
    Canvas.Left = "120"
    Height = "100"Width="100"
    Fill = "teal"Name="Ellispse2" />
 
 < TextBlock Name = "Status"Canvas.Top="120" />
 
 < TextBlock Name = "RemoveClickEvent"Canvas.Top="250"Text="Click Me Remove Mouse Click Event"MouseLeftButtonDown="onMouseDownRemoveEvent" /> 
</ Canvas >
 
III.页面对应的 JS文件代码(Default.aspx.js)
function createSilverlight()
{  
     Silverlight.createObjectEx({
         source: "Page.xaml",
         events: {}
     });
}
 
function onMouseEnter(sender,mouseEventArgs)
{
    sender.fill = "Coral";
}
function onMouseLeave(sender,eventArgs)
{
    sender.fill = "teal";
}
 
var entertoken1,entertoken2,entertoken1,entertoken2;
function onLoaded(sender,eventArgs)
{
    Ellispse1 = sender.findName("Ellispse1");
    Ellispse2 = sender.findName("Ellispse2");
    entertoken1 = Ellispse1.addEventListener("MouseLeftButtonUp",onMouseLeftButtonUp);   
    entertoken2 = Ellispse2.addEventListener("MouseLeftButtonUp",onMouseLeftButtonUp);   
}
function onMouseLeftButtonUp(sender,mouseEventArgs)
{   
    var pt = mouseEventArgs.getPosition(null);   
    sender.findName("Status").text = "(" + pt.x + "," + pt.y + ")";
}
 
function onMouseDownRemoveEvent(sender,mouseEventArgs)
{
    Ellispse1.removeEventListener("MouseLeftButtonUp",entertoken1);
    Ellispse2.removeEventListener("MouseLeftButtonUp",entertoken2);
}
 
 
II.鼠标点击 (按下/弹起)和移动事件
I. 页面代码 (Default.aspx)
< html xmlns="http://www.w3.org/1999/xhtml" >
< head runat="server">
    <title>Silverlight 元素的鼠标点击/移动事件</title>   
    <script type="text/javascript" src="../../Silverlight.js"></script>
    <script type="text/javascript" src="Default.aspx.js"></script>
</ head >
< body onload="document.getElementById('SilverlightControlHost').focus()">
    <form id="form1" runat="server">
        <div id="SilverlightControlHost" >
            <script type="text/javascript">
                createSilverlight();
            </script>
        </div>
    </form>
</ body >
</ html >
II.Xaml文件代码
< Canvas xmlns = "http://schemas.microsoft.com/client/2007"
  xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
  MouseLeftButtonDown = "onMouseDown"
  MouseLeftButtonUp = "onmouseup"
  MouseMove = "onMouseMove"
  Canvas.Top = "20"Canvas.Left="50">
    < Ellipse
      Height = "100"Width="100"
      Fill = "Gold"
      stroke = "Black"strokeThickness="4" />
    < Ellipse
      Height = "50"Width="50"
      Canvas.Top = "25"Canvas.Left="25"
      Fill = "Black" /> 
    < Canvas
      MouseLeftButtonDown = "onMouseDown"
      MouseLeftButtonUp = "onmouseup"
      MouseMove = "onMouseMove"
      Canvas.Top = "140"Canvas.Left="100">
      < Canvas.RenderTransform >
        < RotateTransform Angle = "45" />
      </ Canvas.RenderTransform >
      < Rectangle
        Height = "100"Width="100"
        Fill = "Coral"
        stroke = "Black"strokeThickness="4" />
    </ Canvas >
</ Canvas >
 
III.页面对应的 JS文件代码(Default.aspx.js)
function createSilverlight()
{   
     Silverlight.createObjectEx({
         source: "Page.xaml",
         events: {}
     });
}
 
var beginX;
var beginY;
var isMouseDown = false;
 
function onMouseDown(sender,mouseEventArgs)
{
    beginX = mouseEventArgs.getPosition(null).x;
    beginY = mouseEventArgs.getPosition(null).y;
 
    isMouseDown = true;
   
    // 使当前控件获取鼠标焦点,即使光标不在该元素上
    sender.captureMouse();
}
function onMouseMove(sender,mouseEventArgs)
{   
    if (isMouseDown == true)
    {       
        var currX = mouseEventArgs.getPosition(null).x;
        var currY = mouseEventArgs.getPosition(null).y;
      
        sender["Canvas.Left"] += currX - beginX;
        sender["Canvas.Top"] += currY - beginY;
      
        beginX = currX;
        beginY = currY;
    }
}
function onMouseMove(sender,mouseEventArgs)
{   
    if (isMouseDown == true)
    {       
        var currX = mouseEventArgs.getPosition(null).x;
        var currY = mouseEventArgs.getPosition(null).y;
      
        sender["Canvas.Left"] += currX - beginX;
        sender["Canvas.Top"] += currY - beginY;
    
        beginX = currX;
        beginY = currY;
    }
}
function onmouseup(sender,mouseEventArgs)
{
    isMouseDown = false;
    sender.releaseMouseCapture();
}
 
 
4. SilverLight 元素的键盘事件
I. 页面代码 (Default.aspx)
< html xmlns="http://www.w3.org/1999/xhtml" >
< head runat="server">
    <title>Canvas 键盘按键事件</title>   
    <script type="text/javascript" src="../Silverlight.js"></script>
    <script type="text/javascript" src="Default.aspx.js"></script>
</ head >
< body onload="document.getElementById('SilverlightControlHost').focus()">
    <form id="form1" runat="server">
        <div id="SilverlightControlHost" >
            <script type="text/javascript">
                createSilverlight();
            </script>
        </div>
    </form>
</ body >
</ html >
II.Xaml文件代码
< Canvas Name = "parentCanvas"
        xmlns = "http://schemas.microsoft.com/client/2007"
        xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
        KeyDown = "onKeyDown"
        > 
 
     < TextBlock Name = "helloBlock"Foreground="Black"Cursor="Hand"Text="King" />
</ Canvas >
III.页面对应的 JS文件代码(Default.aspx.js)
function createSilverlight()
{  
     Silverlight.createObjectEx({
         source: "Page.xaml",
         events: {}
     });
}
 
function onKeyDown(sender,keyEventArgs)
{   
    var msg;   
    msg = " Press Shift = " + keyEventArgs.shift;
    msg += " Press Ctrl = " + keyEventArgs.ctrl;
    msg += " Key = " + keyEventArgs.key;
    msg += " PlatformKeyCode = " + keyEventArgs.PlatformKeyCode;
    msg += " The Platform is windows = " + (navigator.userAgent.indexOf("Windows") != -1);
    alert(msg);
}
 
5. 方法createFromXaml使用示例
I. 页面代码 (Default.aspx)
< html xmlns="http://www.w3.org/1999/xhtml" >
< head runat="server">
    <title>createFromXaml 方法使用示例</title>   
    <script type="text/javascript" src="../Silverlight.js"></script>
    <script type="text/javascript" src="Default.aspx.js"></script>
</ head >
< body onload="document.getElementById('SilverlightControlHost').focus()">
    <form id="form1" runat="server">
        <div id="SilverlightControlHost" >
            <script type="text/javascript">
               createSilverlight();
            </script>
        </div>
    </form>
</ body >
</ html >
II.Xaml文件代码
< Canvas Name = "parentCanvas"     
        xmlns = "http://schemas.microsoft.com/client/2007"
        xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
        MouseLeftButtonDown = "onMouseLeftButtonDown"
        Width = "100"Height="100"Background="LightBlue"
        >
</ Canvas >
III.页面对应的 JS文件代码(Default.aspx.js)
function createSilverlight()
{   
     Silverlight.createObjectEx({
         source: "Page.xaml",
         events: {}
     });
}
 
function onMouseLeftButtonDown(sender,eventArgs)
{   
    var plugin = sender.getHost();
       
    var xamlFragment = '<TextBlock Canvas.Top="0" Text="I was created by createFromXaml method!" />';
    textBlock = plugin.content.createFromXaml(xamlFragment);
   
    var xamlFragment2 = '<Ellipse Canvas.ZIndex="1" Canvas.Left="95" Canvas.Top="95" Height="200" Width="200" stroke="Black" strokeThickness="10" Fill="Lime" />';
    ellipse = plugin.content.createFromXaml(xamlFragment2);
    ellipse.fill = createLinearGradientBrush(plugin);      
   
    sender.children.add(textBlock);
    sender.children.add(ellipse);
}
 
function createLinearGradientBrush(plugin)
{   
    var xamlFragment = '<LinearGradientBrush>';
       xamlFragment +=   '<GradientStop Color="Yellow" Offset="0.0" />';
       xamlFragment +=   '<GradientStop Color="Orange" Offset="0.5" />';
       xamlFragment +=   '<GradientStop Color="Red" Offset="1.0" />';
       xamlFragment += '</LinearGradientBrush>';
    return plugin.content.createFromXaml(xamlFragment);
}
 
6. 访问和修改Silverlight元素以及属性
I. 页面代码 (Default.aspx)
< html xmlns="http://www.w3.org/1999/xhtml" >
< head runat="server">
    <title> 访问和修改Silverlight元素以及属性</title>   
    <script type="text/javascript" src="../Silverlight.js"></script>
    <script type="text/javascript" src="Default.aspx.js"></script>
</ head >
< body onload="document.getElementById('SilverlightControlHost').focus()">
    <form id="form1" runat="server">
        <div id="SilverlightControlHost" >
            <script type="text/javascript">
                createSilverlight();
            </script>
        </div>
    </form>
</ body >
</ html >
II.Xaml文件代码
< Canvas Name = "parentCanvas"
        xmlns = "http://schemas.microsoft.com/client/2007"
        xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
         Loaded = "onLoaded"
        >
     < TextBlock Name = "TextBlock1"Foreground="Black"Cursor="Hand" />
 < TextBlock Name = "TextBlock2"Foreground="Black"Cursor="Hand"Canvas.Top="20" />
 < TextBlock Name = "TextBlock3"Foreground="Black"Cursor="Hand"Canvas.Top="40" />
</ Canvas >
III.页面对应的 JS文件代码(Default.aspx.js)
function createSilverlight()
{   
     Silverlight.createObjectEx({
         source: "Page.xaml",
         events: {}
     });
}
 
function onLoaded(sender,eventArgs)
{   
    //findName Method
    sender.findName("TextBlock1").text = "King1";
   
    //getItem Method
    sender.children.getItem(1).text = "King2";
    
    //getValue 和setValue 方法
    var textBlock3 = sender.findName("TextBlock3");
    textBlock3.text = "King3";
    var text = textBlock3.getValue("text");
    textBlock3.setValue("text",text);
   
    //Extend Property
    textBlock3["Canvas.Top"] = 40; // 自己修改一下该值    
}
 
7. Silverlight 中的字体使用
I. 页面代码 (Default.aspx)
< html xmlns="http://www.w3.org/1999/xhtml" >
< head runat="server">
    <title>Silverlight 中的字体</title>   
    <script type="text/javascript" src="../Silverlight.js"></script>
    <script type="text/javascript" src="Default.aspx.js"></script>
</ head >
< body onload="document.getElementById('SilverlightControlHost').focus()">
    <form id="form1" runat="server">
        <div id="SilverlightControlHost" >
            <script type="text/javascript">
                createSilverlight();
            </script>
        </div>
    </form>
</ body >
</ html >
II.Xaml文件代码
< Canvas Name = "parentCanvas"
        xmlns = "http://schemas.microsoft.com/client/2007"
        xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
         Loaded = "onLoaded"
        > 
 
 < TextBlock
  Text = "Font Attributes"
  FontFamily = "Verdana"
  FontSize = "36"
  FontStretch = "UltraExpanded"
  FontStyle = "Italic"
  FontWeight = "ExtraBlack" />
 
 <!-- Run 对象是一个文字元素 -->
 < TextBlock Canvas.Top = "60"
  FontFamily = "Arial"Width="400"Text="Sample text formatting runs">
    < LineBreak />
    < Run Foreground = "Maroon"FontFamily="Courier New"FontSize="24">Courier New 24</Run>
    < LineBreak />
    < Run Foreground = "teal"FontFamily="Times New Roman"FontSize="18"FontStyle="Italic">Times New Roman Italic 18</Run>
    < LineBreak />
    < Run Foreground = "SteelBlue"FontFamily="Verdana"FontSize="14"FontWeight="Bold">Verdana Bold 14</Run>
 </ TextBlock >
 
 < TextBlock
  Canvas.Top = "150"
  FontFamily = "Arial"
  FontSize = "32"
  FontWeight = "Bold"
  Foreground = "Navy">
    Navy
    < Run Text = "DodgerBlue "Foreground="DodgerBlue"/>
    < Run Text = "LightSteelBlue "Foreground="LightSteelBlue"/>
 </ TextBlock >
 
 
 < TextBlock
    Canvas.Top = "200"
    FontFamily = "Verdana"
    FontSize = "32"
    FontWeight = "Bold">
    LINEAR GRADIENT Brush
    < TextBlock.Foreground >
      < LinearGradientBrush StartPoint = "0,0"EndPoint="1,1">
        < GradientStop Color = "Red"Offset="0.0" />
        < GradientStop Color = "Orange"Offset="0.2" />
        < GradientStop Color = "Yellow"Offset="0.4" />
        < GradientStop Color = "Green"Offset="0.6" />
        < GradientStop Color = "Blue"Offset="0.8" />
        < GradientStop Color = "Violet"Offset="1.0" />
      </ LinearGradientBrush >
    </ TextBlock.Foreground >
    < TextBlock.RenderTransform >
      < ScaleTransform ScaleY = "3.0" />
    </ TextBlock.RenderTransform >
 </ TextBlock >
 
 < TextBlock Text = "Rotated Text"FontSize="32"Foreground="teal"Canvas.Top="300">
    < TextBlock.RenderTransform >
      < RotateTransform Angle = "90" />
    </ TextBlock.RenderTransform >
 </ TextBlock >
 
 
 < TextBlock Canvas.Top = "400"
  FontSize = "32"
  FontWeight = "Bold"
  Foreground = "Maroon"
  Text = "Skewed Text">
    < TextBlock.RenderTransform >
      < SkewTransform AngleX = "-30"AngleY="0" />
    </ TextBlock.RenderTransform >
 </ TextBlock >
 
 < TextBlock   Canvas.Top = "450"
    FontSize = "32"
    FontWeight = "Bold"
    Foreground = "Maroon"
    Text = "Skewed Text">
    < TextBlock.RenderTransform >
      < SkewTransform AngleX = "30"AngleY="0" />
    </ TextBlock.RenderTransform >
 </ TextBlock >
 
 
</ Canvas >
III.页面对应的 JS文件代码(Default.aspx.js)
function createSilverlight()
{  
   
     Silverlight.createObjectEx({
         source: "Page.xaml",
              height: "1000",eventArgs)
{
}
 
I. 页面代码 (Default.aspx)
html xmlns="http://www.w3.org/1999/xhtml" >
< head runat="server">
    <title> 全屏支持功能</title>   
    <script type="text/javascript" src="../Silverlight.js"></script>
    <script type="text/javascript" src="Default.aspx.js"></script>
</ head >
< body onload="document.getElementById('SilverlightControlHost').focus()">
    <form id="form1" runat="server">
        <div id="SilverlightControlHost" >
            <script type="text/javascript">
                createSilverlight();
            </script>
        </div>
    </form>
</ body >
</ html >
II.Xaml文件代码
< Canvas
  xmlns = "http://schemas.microsoft.com/client/2007"
  xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
  Width = "300"Height="300"Loaded="onLoaded">
 
 < MediaElement Name = "media"Source="http://jd.ikmtv.com/mymtv123/ 许志安_光辉岁月.wmv "Width="300"Height="300"MouseLeftButtonUp="onMouseLeftButtonUp"   />
  
</ Canvas >
 
 
III.页面对应的 JS文件代码(Default.aspx.js)
function createSilverlight()
{   
     Silverlight.createObjectEx({
         source: "Page.xaml",
              height: "500",
         events: {}
     });
}
 
// 双击事件
function onMouseLeftButtonUp(sender,mouseEventArgs)
{   
    //plugin.content.fullScreen = !plugin.content.fullScreen;
    var b=(new Date).getTime(),c=this._timeLastLeftButtonUp;
    this._timeLastLeftButtonUp=b;
    var a=c&&b-c<300;
    if(a)
    {
       // 处理双击事件
       this._timeLastLeftButtonUp=0;      
       var plugin=sender.getHost();
       plugin.content.fullScreen = !plugin.content.fullScreen;
    }      
    else
    {
        // 处理单击事件
    }
}
 
var media;
function onLoaded(sender,mouseEventArgs)
{   
    media = sender.findName("media");
    // 处理FullScreenChangeded事件
    plugin = sender.getHost();
    plugin.content.onFullScreenChange = onFullScreenChanged;
    updateLayout(plugin.content.actualWidth,plugin.content.actualHeight);   
}
 
function onFullScreenChanged(sender,eventArgs)
{
    updateLayout(plugin.content.actualWidth,plugin.content.actualHeight);
}
 
function updateLayout(width,height)
{
    media.width=width;
    media.height=height;   
}
 
 
9. Silverlight Downloader 对象使用
I. 页面代码 (Default.aspx)
< html xmlns="http://www.w3.org/1999/xhtml" >
< head runat="server">
    <title>Silverlight Downloader 对象使用</title>   
    <script type="text/javascript" src="../Silverlight.js"></script>
    <script type="text/javascript" src="Default.aspx.js"></script>
</ head >
< body onload="document.getElementById('SilverlightControlHost').focus()">
    <form id="form1" runat="server">
        <div id="SilverlightControlHost" >
            <script type="text/javascript">
                createSilverlight();
            </script>
        </div>
    </form>
</ body >
</ html >
 
II.Xaml文件代码
< Canvas Name = "parentCanvas"     
        xmlns = "http://schemas.microsoft.com/client/2007"
        xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
         Loaded = "onLoaded"
        >
 
 < Canvas MouseLeftButtonDown = "onMouseLeftButtonDown"Canvas.Left="10">
    < Rectangle stroke = "Black"Height="30"Width="250"RadiusX="5"RadiusY="5">
      < Rectangle.Fill >
        < RadialGradientBrush GradientOrigin = "0.75,0.25">
          < GradientStop Color = "Orange"Offset="0.0" />
          < GradientStop Color = "Red"Offset="1.0" />
        </ RadialGradientBrush >
      </ Rectangle.Fill >     
    </ Rectangle >
    < TextBlock Canvas.Left = "10"Canvas.Top="5">Click me to download a picture!</TextBlock>
 </ Canvas >
 
 <!-- 下载进度条 -->
 < Canvas Canvas.Top = "70">
    < Rectangle Name = "progressRectangle"
      Canvas.Left = "20"
      Height = "10"Width="0"
      Fill = "Maroon" />
    < Rectangle
      Canvas.Top = "-1"
      Canvas.Left = "19"Height="12"
      Width = "202"
      strokeThickness = "1"stroke="Black" />
    < TextBlock Name = "progresstext"
      Canvas.Top = "-4"Canvas.Left="230"
      Text = "0%"FontSize="12" />
 </ Canvas >
 
 < TextBlock   Canvas.Top = "100"Width="100"Height="100"FontSize="72"> 
    King,King,King
    < TextBlock.Foreground >
      < ImageBrush Name = "imageBrush" />
    </ TextBlock.Foreground >
 </ TextBlock >
</ Canvas >
III.页面对应的 JS文件代码(Default.aspx.js)
function createSilverlight()
{   
     Silverlight.createObjectEx({
         source: "Page.xaml",eventArgs)
{   
    progresstext = sender.findName("progresstext");
    progressRectangle = sender.findName("progressRectangle");
    imageBrush = sender.findName("imageBrush");
}
 
function onMouseLeftButtonDown(sender,eventArgs)
{   
    var slPlugin = sender.getHost();
    var downloader = slPlugin.createObject("downloader");   
    downloader.addEventListener("downloadProgressChanged",onDownloadProgressChanged);
    downloader.addEventListener("completed",onCompleted);
    downloader.open("GET","Silverlight_Multimedea.JPG");  
    downloader.send();
 
}
 
function onDownloadProgressChanged(sender,eventArgs)
{   
    var percentage = Math.floor(sender.downloadProgress * 100);   
    progresstext.text = percentage + "%";
    progressRectangle.width = percentage * 2;
}
 
function onCompleted(sender,eventArgs)
{   
    //var xamlFragment = sender.ResponseText;   
    //var button = plugin.content.createFromXaml(xamlFragment);   
    var plugin = sender.getHost();       
    var imageBrush = sender.findName("imageBrush");   
    imageBrush.setSource(sender,"");
}
 
 
10. 定时器功能
I. 页面代码 (Default.aspx)
< html xmlns="http://www.w3.org/1999/xhtml" >
< head runat="server">
    <title> 定时器功能</title>   
    <script type="text/javascript" src="../Silverlight.js"></script>
    <script type="text/javascript" src="Default.aspx.js"></script>
</ head >
< body onload="document.getElementById('SilverlightControlHost').focus()">
    <form id="form1" runat="server">
        <div id="SilverlightControlHost" >
            <script type="text/javascript">
                createSilverlight();
            </script>
        </div>
    </form>
</ body >
</ html >
II.Xaml文件代码
< Canvas
  xmlns = "http://schemas.microsoft.com/client/2007"
  xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml">
< Canvas.Resources >
 
 <!-- 时间故事版 -->
 < Storyboard Duration = "0:0:1"Completed="StoryboardFinished"x:Name="timerStoryboard" />
 
</ Canvas.Resources >
< Rectangle
  Name = "MyAnimatedRectangle"
  Width = "100"
  Height = "100"
  Fill = "Blue"
  Loaded = "StartTimer">
 < Rectangle.Triggers >   
    < EventTrigger RoutedEvent = "Rectangle.Loaded">
      < BeginStoryboard >
        < Storyboard >
          < DoubleAnimation
            Storyboard.TargetName = "MyAnimatedRectangle"
            Storyboard.TargetProperty = "Opacity"
            From = "1.0"To="0"Duration="0:0:5"
            AutoReverse = "True"RepeatBehavior="Forever" />
        </ Storyboard >
      </ BeginStoryboard >
    </ EventTrigger >
 </ Rectangle.Triggers >
</ Rectangle >
< TextBlock Canvas.Top = "110"Name="myTextBlock" ></TextBlock>
</ Canvas >
 
III.页面对应的 JS文件代码(Default.aspx.js)
function createSilverlight()
{
     Silverlight.createObjectEx({
         source: "Page.xaml",eventArgs)
{  
}
 
function StartTimer(sender,mouseEventArgs)
{
    var timer = sender.findName("timerStoryboard");
    timer.begin();
 
}
 
function StoryboardFinished(sender,mouseEventArgs)
{
 var rect = sender.findName("MyAnimatedRectangle");
 var txtBlock = sender.findName("myTextBlock");
 txtBlock.text = String(rect.opacity);
 var timer = sender.findName("timerStoryboard");
 timer.begin();
}
 
 
I. 页面代码 (Default.aspx)
< html xmlns="http://www.w3.org/1999/xhtml" >
< head runat="server">
    <title> 错误处理支持</title>   
    <script type="text/javascript" src="../Silverlight.js"></script>
    <script type="text/javascript" src="Default.aspx.js"></script>
</ head >
< body onload="document.getElementById('SilverlightControlHost').focus()">
    <form id="form1" runat="server">
        <div id="SilverlightControlHost" >
            <script type="text/javascript">
                createSilverlight();
            </script>
        </div>
    </form>
</ body >
</ html >
II.Xaml文件代码
< Canvas Name = "parentCanvas"     
        xmlns = "http://schemas.microsoft.com/client/2007"
        xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
        Loaded = "onLoaded">
 < Ellipse
       MouseLeftButtonDown = "onMouseDownEventHandler"      
      Height = "200"Width="200"
      Fill = "teal"Name="Ellispse1" />
 < MediaElement Name = "media"Width="300"Height="300"MediaFailed="MediaFailedHandler" />         
</ Canvas >
III.页面对应的 JS文件代码(Default.aspx.js)
function createSilverlight()
{   
     Silverlight.createObjectEx({
         source: "Page.xaml",
         events:
         {onError:onErrorandler}
     });
}
 
 
function onMouseDownEventHandler(sender,moseEventArgs)
{       
    var player = sender.findName("media");           
 
    // 方式
    //player.play();   
    //return;
   
    // 方式
    try
    {       
        player.play();
    }
    catch(e)
    {       
        alert(e.message);
    }
}
 
// 方式
// 注意: events:{onError:onErrorandler} 中onError:null时将执行此代码
function MediaFailedHandler(sender,args)
{   
    var errorMsg = "/n Media Error Message     /n" ;
    errorMsg += "MediaElement Name: " + sender.Name + "/n";
    errorMsg += "Media File Name: " + sender.source + "/n";
 
    alert(errorMsg); 
}
 
 
//events:{onError:onErrorandler}
function onErrorandler(sender,errorArgs)
{   
    var errorMsg = "Silverlight Error: /n/n";
 
    errorMsg += "Error Type:    " + errorArgs.errorType + "/n";
    errorMsg += "Error Message: " + errorArgs.errorMessage + "/n";
    errorMsg += "Error Code:    " + errorArgs.errorCode + "/n";   
 
    switch(errorArgs.errorType)
    {
        case "RuntimeError":          
            if (errorArgs.lineNumber != 0)
            {
                errorMsg += "Line: " + errorArgs.lineNumber + "/n";
                errorMsg += "Position: " + errorArgs.charPosition + "/n";
            }
            errorMsg += "MethodName: " + errorArgs.methodName + "/n";
            break;
        case "ParserError":           
            errorMsg += "Xaml File:      " + errorArgs.xamlFile      + "/n";
            errorMsg += "Xml Element:    " + errorArgs.xmlElement    + "/n";
            errorMsg += "Xml Attribute: " + errorArgs.xmlAttribute + "/n";
            errorMsg += "Line:           " + errorArgs.lineNumber    + "/n";
            errorMsg += "Position:       " + errorArgs.charPosition + "/n";
            break;
        default:
            break;
    }
    alert(errorMsg);
}
 
 
12. 把xaml段内置在aspx或html页面中
这样的话就不用单独的 *.xaml 文件来承载SilverLight对象控件元素内容.
I. 页面代码 (Default.aspx)
< html xmlns="http://www.w3.org/1999/xhtml" >
< head runat="server">
    <title> 把xaml段内置在aspx或html页面中</title>   
    <script type="text/javascript" src="../Silverlight.js"></script>
    <script type="text/javascript" src="Default.aspx.js"></script>
</ head >
< body onload="document.getElementById('SilverlightControlHost').focus()">
 
    <!-- 保证这段代码在createSilverlight方法上面 -->
    <script type="text/xaml" id="xamlContent">
        <?xml version="1.0"?>
          <Canvas
            xmlns="http://schemas.microsoft.com/client/2007"
            Background="Wheat">
            <TextBlock
              Canvas.Left="20"
              FontSize="24"
              Loaded="setDate" />
          </Canvas>
    </script>
   
    <form id="form1" runat="server">
        <div id="SilverlightControlHost" >
            <script type="text/javascript">
                createSilverlight();
            </script>
        </div>
    </form>   
</ body >
</ html >
II.Xaml文件代码
文件省略 ,其内容集成到 Default.aspx页面中了.
III.页面对应的 JS文件代码(Default.aspx.js)
function createSilverlight()
{  
   
     Silverlight.createObjectEx({
         source: '#xamlContent',
         events: {}
     });
}
 
function setDate(sender,eventArgs)
{
 sender.text = Date();
}
 
 
2). 制作图形示例
13. 基本图形形状示例
I. 页面代码 (Default.aspx)
< html xmlns="http://www.w3.org/1999/xhtml" >
< head runat="server">
    <title> 基本图形形状示例</title>   
    <script type="text/javascript" src="../Silverlight.js"></script>
    <script type="text/javascript" src="Default.aspx.js"></script>
</ head >
< body onload="document.getElementById('SilverlightControlHost').focus()">
    <form id="form1" runat="server">
        <div id="SilverlightControlHost" >
            <script type="text/javascript">
                createSilverlight();
            </script>
        </div>
    </form>
</ body >
</ html >
II.Xaml文件代码
< Canvas Name = "parentCanvas"     
        xmlns = "http://schemas.microsoft.com/client/2007"
        xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
         Loaded = "onLoaded"
        >
 
 <!-- 预览一些图形 -->
 
 
 <!-- 画一条线段,从 (10,10) 到 (50,50). -->
 < Line
    X1 = "10"Y1="10"
    X2 = "50"Y2="50"
    stroke = "Black"
    strokeThickness = "4" />
 
 <!-- 画一条线段,50). 并且横坐标往右移动100个象素 -->
< Line
  X1 = "10"Y1="10"
    X2 = "50"Y2="50"
    strokeThickness = "4"
    Canvas.Left = "100">
    < Line.stroke >
      < RadialGradientBrush GradientOrigin = "0.5,0.5"Center="0.5,0.5"RadiusX="0.5"RadiusY="0.5">
        < RadialGradientBrush.GradientStops >
          < GradientStop Color = "Red"Offset="0" />
          < GradientStop Color = "Blue"Offset="0.25" />
        </ RadialGradientBrush.GradientStops >
      </ RadialGradientBrush >
    </ Line.stroke >
 </ Line >
 
 <!-- 画一条水平线,从坐标 (10,60) 到 (150,60). -->
 < Line
     X1 = "10"Y1="60"
     X2 = "150"Y2="60"
     stroke = "Black"
     strokeThickness = "4"/>
 
 <!-- 画一个椭圆. -->
 < Ellipse
    Fill = "Yellow"
    Height = "100"
    Width = "200"
    strokeThickness = "2"
    stroke = "Black"Canvas.Top="100"/>
 
 <!-- 一条路径 --> 
 < Path stroke = "DarkGoldenRod"strokeThickness="3"
    Data = "M 100,200 C 100,25 400,350 400,175 H 280"Canvas.Top="150" />
 
 <!-- 多边形. -->
 < polyline Points = "25,25 0,50 25,75 50,25 25,0"
      stroke = "Blue"strokeThickness="10"
      Canvas.Left = "75"Canvas.Top="250">
    < polyline.RenderTransform >
      < RotateTransform CenterX = "0"CenterY="0"Angle="45" />
    </ polyline.RenderTransform >
 </ polyline >
</ Canvas >
III.页面对应的 JS文件代码(Default.aspx.js)
function createSilverlight()
{   
 Silverlight.createObjectEx({
       source: "Page.xaml",
       parentElement: document.getElementById("SilverlightControlHost"),
       id: "SilverlightControl",
       properties: {
            width: "350",
            height: "350",
            version: "1.0", 
            background: "white",
            iswindowless: "true",
            enableHtmlAccess: "true"            
       },
       events: {}
 });
}
 
function onLoaded(sender,eventArgs)
{
}
 
 
14. 画刷对象的使用
I. 页面代码 (Default.aspx)
< html xmlns="http://www.w3.org/1999/xhtml" >
< head runat="server">
    <title> 画刷</title>   
    <script type="text/javascript" src="../Silverlight.js"></script>
    <script type="text/javascript" src="Default.aspx.js"></script>
</ head >
< body onload="document.getElementById('SilverlightControlHost').focus()">
    <form id="form1" runat="server">
        <div id="SilverlightControlHost" >
            <script type="text/javascript">
                createSilverlight();
            </script>
        </div>
    </form>
</ body >
</ html >
II.Xaml文件代码
< Canvas Name = "parentCanvas"     
        xmlns = "http://schemas.microsoft.com/client/2007"
        xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
         Loaded = "onLoaded"
        >
 
 < Rectangle Width = "100"Height="100"Fill="Red" />
 < Rectangle Width = "100"Height="100"Fill="#FFFF0000"Canvas.Top="110" />
 
 < Rectangle Width = "100"Height="100"Canvas.Top="220" >
    < Rectangle.Fill >
      < SolidColorBrush Color = "Red" />
    </ Rectangle.Fill >
 </ Rectangle >
 
 < Rectangle Width = "100"Height="100"Canvas.Top="330">
    < Rectangle.Fill >
      < SolidColorBrush Color = "#FFFF0000" />
    </ Rectangle.Fill >
 </ Rectangle >
 
 < Rectangle Width = "200"Height="100"Canvas.Top="440">
    < Rectangle.Fill >
      < LinearGradientBrush StartPoint = "0,1">
        < GradientStop Color = "Yellow"Offset="0.0" />
        < GradientStop Color = "Red"Offset="0.25" />
        < GradientStop Color = "Blue"Offset="0.75" />
        < GradientStop Color = "LimeGreen"Offset="1.0" />
      </ LinearGradientBrush >
    </ Rectangle.Fill >
 </ Rectangle >
 
 < Rectangle Width = "200"Height="100"Canvas.Top="550">
    < Rectangle.Fill >
      < LinearGradientBrush StartPoint = "0,0.5"EndPoint="1,0.5">
        < GradientStop Color = "Yellow"Offset="0.0" />
        < GradientStop Color = "Red"Offset="0.25" />
        < GradientStop Color = "Blue"Offset="0.75" />
        < GradientStop Color = "LimeGreen"Offset="1.0" />
      </ LinearGradientBrush >
    </ Rectangle.Fill >
 </ Rectangle >
 
 < Rectangle Width = "200"Height="100"Canvas.Top="660">
    < Rectangle.Fill >
      < LinearGradientBrush StartPoint = "0.5,0"EndPoint="0.5,1">
        < GradientStop Color = "Yellow"Offset="0.0" />
        < GradientStop Color = "Red"Offset="0.25" />
        < GradientStop Color = "Blue"Offset="0.75" />
        < GradientStop Color = "LimeGreen"Offset="1.0" />
      </ LinearGradientBrush >
    </ Rectangle.Fill >
 </ Rectangle >
 
 < Rectangle Width = "200"Height="100"Canvas.Top="770">
    < Rectangle.Fill >
      < RadialGradientBrush GradientOrigin = "0.5,0.5"
        RadiusX = "0.5"RadiusY="0.5">
        < GradientStop Color = "Yellow"Offset="0" />
        < GradientStop Color = "Red"Offset="0.25" />
        < GradientStop Color = "Blue"Offset="0.75" />
        < GradientStop Color = "LimeGreen"Offset="1" />
      </ RadialGradientBrush >
    </ Rectangle.Fill >
 </ Rectangle >
 
 < Rectangle Width = "100"Height="100"Canvas.Top="880">
    < Rectangle.Fill >
      < LinearGradientBrush StartPoint = "0,0">       
        < GradientStop Color = "#200000FF"Offset="0.0" />       
        < GradientStop Color = "#FF0000FF"Offset="1.0" />
      </ LinearGradientBrush >
    </ Rectangle.Fill >
 </ Rectangle > 
</ Canvas >
III.页面对应的 JS文件代码(Default.aspx.js)
function createSilverlight()
{   
     Silverlight.createObjectEx({
         source: "Page.xaml",
              height: "10000",eventArgs)
{       
}
 
 
15. 视频刷对象的使用
I. 页面代码 (Default.aspx)
< html xmlns="http://www.w3.org/1999/xhtml" >
< head runat="server">
    <title> 视频刷使用</title>   
    <script type="text/javascript" src="../Silverlight.js"></script>
    <script type="text/javascript" src="Default.aspx.js"></script>
</ head >
< body onload="document.getElementById('SilverlightControlHost').focus()">
    <form id="form1" runat="server">
        <div id="SilverlightControlHost" >
            <script type="text/javascript">
                createSilverlight();
            </script>
        </div>
    </form>
</ body >
</ html >
II.Xaml文件代码
< Canvas
  xmlns = "http://schemas.microsoft.com/client/2007"
  xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml">
 
 < MediaElement
    Name = "mediaElement"
    Source = "http://jd.ikmtv.com/beyond_ghsy.wmv"IsMuted="True"
    Opacity = "0.0" />
 
 < TextBlock Canvas.Left = "5"Canvas.Top="30" 
    FontFamily = "Verdana"FontSize="120"
    FontWeight = "Bold"textwrapping="Wrap"
    Text = "Video">
   
    < TextBlock.Foreground >
      < VideoBrush SourceName = "mediaElement"Stretch="UniformToFill" />
    </ TextBlock.Foreground >
 </ TextBlock >
 
</ Canvas >
III.页面对应的 JS文件代码(Default.aspx.js)
 
function createSilverlight()
{
 
   
     Silverlight.createObjectEx({
         source: "Page.xaml",eventArgs)
{      
}
 
16.Path 元素使用
I. 页面代码 (Default.aspx)
< html xmlns="http://www.w3.org/1999/xhtml" >
< head runat="server">
    <title>Path 元素使用</title>   
    <script type="text/javascript" src="../Silverlight.js"></script>
    <script type="text/javascript" src="Default.aspx.js"></script>
</ head >
< body onload="document.getElementById('SilverlightControlHost').focus()">
    <form id="form1" runat="server">
        <div id="SilverlightControlHost" >
            <script type="text/javascript">
                createSilverlight();
            </script>
        </div>
    </form>
</ body >
</ html >
II.Xaml文件代码
< Canvas
  xmlns = "http://schemas.microsoft.com/client/2007"
  xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml">
 < Path stroke = "Black"Fill="Gray"
    Data = "M 10,-200 300,100" />
</ Canvas >
III.页面对应的 JS文件代码(Default.aspx.js)
function createSilverlight()
{   
     Silverlight.createObjectEx({
         source: "Page.xaml",
         events: {}
     });
}
 
 
17. 变换效果(Transform)
I. 页面代码 (Default.aspx)
< html xmlns="http://www.w3.org/1999/xhtml" >
< head runat="server">
    <title> 变换效果</title>   
    <script type="text/javascript" src="../Silverlight.js"></script>
    <script type="text/javascript" src="Default.aspx.js"></script>
</ head >
< body onload="document.getElementById('SilverlightControlHost').focus()">
    <form id="form1" runat="server">
        <div id="SilverlightControlHost" >
            <script type="text/javascript">
                createSilverlight();
            </script>
        </div>
    </form>
</ body >
</ html >
II.Xaml文件代码
< Canvas
  xmlns = "http://schemas.microsoft.com/client/2007"
  xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
  Width = "200"Height="200">
 < Rectangle
    Canvas.Left = "100"Canvas.Top="100"
    Width = "50"Height="50"
    Fill = "RoyalBlue">
    < Rectangle.RenderTransform >
      < RotateTransform Angle = "45" />
    </ Rectangle.RenderTransform >
 </ Rectangle >
 
 < Rectangle
    Canvas.Left = "100"Canvas.Top="200"
    Width = "50"Height="50"
    Fill = "RoyalBlue">
    < Rectangle.RenderTransform >
      < RotateTransform Angle = "45"CenterX="25"CenterY="25" />
    </ Rectangle.RenderTransform >
 </ Rectangle >
 < Rectangle
      Canvas.Left = "100"Canvas.Top="300"
      Width = "50"Height="50"
      Fill = "RoyalBlue">
    < Rectangle.RenderTransform >
      < RotateTransform Name = "myTransform"Angle="45"CenterX="25"CenterY="25" />
    </ Rectangle.RenderTransform >
    < Rectangle.Triggers >     
      < EventTrigger RoutedEvent = "Rectangle.Loaded">       
        < BeginStoryboard >
          < Storyboard >
            < DoubleAnimation
              Storyboard.TargetName = "myTransform"
              Storyboard.TargetProperty = "Angle"
              From = "0"To="360"Duration="0:0:5"RepeatBehavior="Forever" />
          </ Storyboard >
        </ BeginStoryboard >
      </ EventTrigger >
    </ Rectangle.Triggers >
 </ Rectangle > 
</ Canvas >
 
 
 
III.页面对应的 JS文件代码(Default.aspx.js)
function createSilverlight()
{
     Silverlight.createObjectEx({
         source: "Page.xaml",
         events: {}
     });
}
 
3). 多媒体功能
18. 在线电影播放
I. 页面代码 (Default.aspx)
< html xmlns="http://www.w3.org/1999/xhtml" >
< head runat="server">
    <title> 在线影视播放</title>   
    <script type="text/javascript" src="../Silverlight.js"></script>
    <script type="text/javascript" src="Default.aspx.js"></script>
</ head >
< body onload="document.getElementById('SilverlightControlHost').focus()">
    <form id="form1" runat="server">
        <div id="SilverlightControlHost" >
            <script type="text/javascript">
                createSilverlight();
            </script>
        </div>
    </form>
</ body >
</ html >
II.Xaml文件代码
< Canvas
  xmlns = "http://schemas.microsoft.com/client/2007"
  xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
  Width = "300"Name="mainControl"Height="300"Loaded="onLoaded">
 
 < MediaElement Name = "media"Source="http://jd.ikmtv.com/aymtv/beyond_ 喜欢你.wmv "Width="300"Height="300"
    MouseLeftButtonUp = "onMouseLeftButtonUp"Autoplay="True"Visibility="Visible" />
 
 <!-- 停止 -->
 < Canvas MouseLeftButtonDown = "media_stop"
    Canvas.Left = "0"Canvas.Top="310">
    < Rectangle stroke = "Black"
      Height = "30"Width="55"RadiusX="5"RadiusY="5">
      < Rectangle.Fill >
        < RadialGradientBrush GradientOrigin = "0.75,0.25">
          < GradientStop Color = "LimeGreen"Offset="0.0" />
          < GradientStop Color = "Green"Offset="1.0" />
        </ RadialGradientBrush >
      </ Rectangle.Fill >
    </ Rectangle >
    < TextBlock Canvas.Left = "5"Canvas.Top="5">Stop</TextBlock>
 </ Canvas >
 
 <!-- 暂停 -->
 < Canvas MouseLeftButtonDown = "media_pause"
    Canvas.Left = "60"Canvas.Top="310">
    < Rectangle stroke = "Black"
      Height = "30"Width="55"RadiusX="5"RadiusY="5">
      < Rectangle.Fill >
        < RadialGradientBrush GradientOrigin = "0.75,0.25">
          < GradientStop Color = "LimeGreen"Offset="0.0" />
          < GradientStop Color = "Green"Offset="1.0" />
        </ RadialGradientBrush >
      </ Rectangle.Fill >
    </ Rectangle >
    < TextBlock Canvas.Left = "5"Canvas.Top="5">Pause</TextBlock>
 </ Canvas >
 
 <!-- 播放 -->
 < Canvas MouseLeftButtonDown = "media_begin"
    Canvas.Left = "120"Canvas.Top="310">
    < Rectangle stroke = "Black"RadiusX="5"RadiusY="5"
      Height = "30"Width="55">
      < Rectangle.Fill >
        < RadialGradientBrush GradientOrigin = "0.75,0.25">
          < GradientStop Color = "LimeGreen"Offset="0.0" />
          < GradientStop Color = "Green"Offset="1.0" />
        </ RadialGradientBrush >
      </ Rectangle.Fill >
    </ Rectangle >
    < TextBlock Canvas.Left = "5"Canvas.Top="5">Play</TextBlock>
 </ Canvas >
 
    <!-- 加音 -->
    < Canvas MouseLeftButtonDown = "media_addvolumn"
      Canvas.Left = "180"Canvas.Top="310">
      < Rectangle stroke = "Black"RadiusX="5"RadiusY="5"
        Height = "30"Width="55">
        < Rectangle.Fill >
          < RadialGradientBrush GradientOrigin = "0.75,0.25">
            < GradientStop Color = "LimeGreen"Offset="0.0" />
            < GradientStop Color = "Green"Offset="1.0" />
          </ RadialGradientBrush >
        </ Rectangle.Fill >
      </ Rectangle >
      < TextBlock Canvas.Left = "5"Canvas.Top="5">+V</TextBlock>
 </ Canvas >
 
 <!-- 哑音 -->
 < Canvas MouseLeftButtonDown = "media_mutevolumn"
    Canvas.Left = "240"Canvas.Top="310">
    < Rectangle stroke = "Black"RadiusX="5"RadiusY="5"
      Height = "30"Width="55">
      < Rectangle.Fill >
        < RadialGradientBrush GradientOrigin = "0.75,0.25">
          < GradientStop Color = "LimeGreen"Offset="0.0" />
          < GradientStop Color = "Green"Offset="1.0" />
        </ RadialGradientBrush >
      </ Rectangle.Fill >
    </ Rectangle >
    < TextBlock Canvas.Left = "5"Canvas.Top="5"> No V</TextBlock>
 </ Canvas >
 
 <!-- 减音 -->
 < Canvas MouseLeftButtonDown = "media_subvolumn"
    Canvas.Left = "300"Canvas.Top="310">
    < Rectangle stroke = "Black"RadiusX="5"RadiusY="5"
      Height = "30"Width="50">
      < Rectangle.Fill >
        < RadialGradientBrush GradientOrigin = "0.75,0.25">
          < GradientStop Color = "LimeGreen"Offset="0.0" />
          < GradientStop Color = "Green"Offset="1.0" />
        </ RadialGradientBrush >
      </ Rectangle.Fill >
    </ Rectangle >
    < TextBlock Canvas.Left = "5"Canvas.Top="5"> -V</TextBlock>
 </ Canvas > 
</ Canvas >
III.页面对应的 JS文件代码(Default.aspx.js)
function createSilverlight()
{   
     Silverlight.createObjectEx({
         source: "Page.xaml",
         events: {}
     });
}
 
function media_stop(sender,args) {
 
    sender.findName("media").stop();
}
 
function media_pause(sender,args) {
 
    sender.findName("media").pause();
}
 
function media_begin(sender,args) {
 
    sender.findName("media").play();
}
 
function media_addvolumn(sender,args) {
   
    sender.findName("media").Volume += 0.1;
}
 
function media_subvolumn(sender,args) {
 
    sender.findName("media").Volume -= 0.1;   
}
 
function media_mutevolumn(sender,args) {
 
    sender.findName("media").IsMuted = !sender.findName("media").IsMuted;   
}
 
// 双击事件
function onMouseLeftButtonUp(sender,c=this._timeLastLeftButtonUp;
    this._timeLastLeftButtonUp=b;
    var a=c&&b-c<300;
    if(a)
    {
       // 处理双击事件
       this._timeLastLeftButtonUp=0;      
       var plugin=sender.getHost();
       plugin.content.fullScreen = !plugin.content.fullScreen;     
     
    }      
    else
    {
        // 处理单击事件
    }
}
 
var media;
function onLoaded(sender,plugin.content.actualHeight);     
}
 
function onFullScreenChanged(sender,height)
{
    media.width=width;
    media.height=height;   
}
 
 
4). 制作动画效果示例
19. 一个动画示例
随着时间背景产生渐变效果的矩形 .
I.页面代码 (Default.aspx)
< html xmlns="http://www.w3.org/1999/xhtml" >
< head runat="server">
    <title> 随着时间背景产生渐变效果的矩形</title>   
    <script type="text/javascript" src="../Silverlight.js"></script>
    <script type="text/javascript" src="Default.aspx.js"></script>
</ head >
< body onload="document.getElementById('SilverlightControlHost').focus()">
    <form id="form1" runat="server">
        <div id="SilverlightControlHost" >
            <script type="text/javascript">
                createSilverlight();
            </script>
        </div>
    </form>
</ body >
</ html >
II.Xaml文件代码
< Canvas
  xmlns = "http://schemas.microsoft.com/client/2007"
  xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml">
 < Rectangle
    Name = "MyAnimatedRectangle"
    Width = "100"
    Height = "100"
    Fill = "Blue">
    < Rectangle.Triggers >
 
      < EventTrigger RoutedEvent = "Rectangle.Loaded">
        < BeginStoryboard >
          < Storyboard >
            < DoubleAnimation
              Storyboard.TargetName = "MyAnimatedRectangle"
              Storyboard.TargetProperty = "Opacity"
              From = "1.0"To="0.0"Duration="0:0:5"AutoReverse="True"RepeatBehavior="Forever" />
          </ Storyboard >
        </ BeginStoryboard >
      </ EventTrigger >
    </ Rectangle.Triggers >
 </ Rectangle >
</ Canvas >
III.页面对应的 JS文件代码(Default.aspx.js)
function createSilverlight()
{
     Silverlight.createObjectEx({
         source: "Page.xaml",
         events: {}
     });
}
 
 
20. 动画的交互控制
I. 页面代码 (Default.aspx)
< html xmlns="http://www.w3.org/1999/xhtml" >
< head runat="server">
    <title> 动画的交互控制</title>   
    <script type="text/javascript" src="../Silverlight.js"></script>
    <script type="text/javascript" src="Default.aspx.js"></script>
</ head >
< body onload="document.getElementById('SilverlightControlHost').focus()">
    <form id="form1" runat="server">
        <div id="SilverlightControlHost" >
            <script type="text/javascript">
                createSilverlight();
            </script>
        </div>
    </form>
</ body >
</ html >
II.Xaml文件代码
< Canvas
  xmlns = "http://schemas.microsoft.com/client/2007"
  xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml">
 < Canvas.Resources >
    < Storyboard Name = "myStoryboard">
      < DoubleAnimation
        Storyboard.TargetName = "MyAnimatedRectangle"
        Storyboard.TargetProperty = "Opacity"
        From = "1.0"To="0.0"Duration="0:0:5"
        AutoReverse = "True" />
    </ Storyboard >
 </ Canvas.Resources >
 < Rectangle
    Name = "MyAnimatedRectangle"
    Width = "100"
    Height = "100"
    Fill = "Blue"
    MouseLeftButtonDown = "startAnimation">
 </ Rectangle >
</ Canvas >
III.页面对应的 JS文件代码(Default.aspx.js)
function createSilverlight()
{   
     Silverlight.createObjectEx({
         source: "Page.xaml",
         events: {}
     });
}
function startAnimation(sender,mouseEventArgs)
{
    // 开始运行
    sender.findName("myStoryboard").begin();
}
 
 
21. 动画关键帧示例
I. 页面代码 (Default.aspx)
< html xmlns="http://www.w3.org/1999/xhtml" >
< head runat="server">
    <title> 动画的关键帖</title>   
    <script type="text/javascript" src="../Silverlight.js"></script>
    <script type="text/javascript" src="Default.aspx.js"></script>
</ head >
< body onload="document.getElementById('SilverlightControlHost').focus()">
    <form id="form1" runat="server">
        <div id="SilverlightControlHost" >
            <script type="text/javascript">
                createSilverlight();
            </script>
        </div>
    </form>
</ body >
</ html >
II.Xaml文件代码
< Canvas
  xmlns = "http://schemas.microsoft.com/client/2007"
  xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
  Width = "400"Height="300">
 < Rectangle Fill = "Blue"
    Width = "50"Height="50">
    < Rectangle.RenderTransform >
      < TranslateTransform
        Name = "MyAnimatedTranslateTransform1"
        X = "0"Y="0" />
    </ Rectangle.RenderTransform >
    < Rectangle.Triggers >
      < EventTrigger RoutedEvent = "Rectangle.Loaded">
        < BeginStoryboard >
          < Storyboard >       
            < DoubleAnimationUsingKeyFrames
              Storyboard.TargetName = "MyAnimatedTranslateTransform1"
              Storyboard.TargetProperty = "X"
              Duration = "0:0:10">
              < LinearDoubleKeyFrame Value = "0"KeyTime="0:0:0" />
              < LinearDoubleKeyFrame Value = "350"KeyTime="0:0:2" />
              < LinearDoubleKeyFrame Value = "50"KeyTime="0:0:7" />
              < LinearDoubleKeyFrame Value = "200"KeyTime="0:0:8" />
            </ DoubleAnimationUsingKeyFrames >
          </ Storyboard >
        </ BeginStoryboard >
      </ EventTrigger >
    </ Rectangle.Triggers >
 </ Rectangle >
 
 
 < Rectangle Fill = "Blue"
    Width = "50"Height="50">
    < Rectangle.RenderTransform >
      < TranslateTransform
        Name = "SplineAnimatedTranslateTransform2"
        X = "0"Y="0" />
    </ Rectangle.RenderTransform >
    < Rectangle.Triggers >
      < EventTrigger RoutedEvent = "Rectangle.Loaded">
        < BeginStoryboard >
          < Storyboard >
            < DoubleAnimationUsingKeyFrames
              Storyboard.TargetName = "SplineAnimatedTranslateTransform2"
              Storyboard.TargetProperty = "X"
              Duration = "0:0:15"
              RepeatBehavior = "Forever">
              < SplineDoubleKeyFrame Value = "500"
                KeyTime = "0:0:7"KeySpline="0.0,1.0 1.0,0.0" />
              < SplineDoubleKeyFrame Value = "200"
                 KeyTime = "0:0:10"KeySpline="0.0,0.0 1.0,0.0" />
              < SplineDoubleKeyFrame Value = "350"
                KeyTime = "0:0:15"KeySpline="0.25,0.5 0.75,1" />
            </ DoubleAnimationUsingKeyFrames >
          </ Storyboard >
        </ BeginStoryboard >
      </ EventTrigger >
    </ Rectangle.Triggers >
 </ Rectangle >
 
 < Rectangle Fill = "Blue"
    Width = "50"Height="50">
    < Rectangle.RenderTransform >
      < TranslateTransform
        Name = "ComboAnimatedTranslateTransform3"
        X = "0"Y="0" />
    </ Rectangle.RenderTransform >
    < Rectangle.Triggers >
      < EventTrigger RoutedEvent = "Rectangle.Loaded">
        < BeginStoryboard >
          < Storyboard >
            < DoubleAnimationUsingKeyFrames
              Storyboard.TargetName = "ComboAnimatedTranslateTransform3"
              Storyboard.TargetProperty = "X"
              Duration = "0:0:15"
              RepeatBehavior = "Forever">
              < discreteDoubleKeyFrame Value = "500"KeyTime="0:0:7" />
              < LinearDoubleKeyFrame Value = "200"KeyTime="0:0:10" />
              < SplineDoubleKeyFrame Value = "350"KeyTime="0:0:15" 
                KeySpline = "0.25,1" />
            </ DoubleAnimationUsingKeyFrames >
          </ Storyboard >
        </ BeginStoryboard >
      </ EventTrigger >
    </ Rectangle.Triggers >
 </ Rectangle >
 
 < Rectangle Fill = "Blue"
    Width = "50"Height="50">
    < Rectangle.RenderTransform >
      < TranslateTransform
        Name = "MyAnimatedTranslateTransform4"
        X = "0"Y="0" />
    </ Rectangle.RenderTransform >
    < Rectangle.Triggers >
      < EventTrigger RoutedEvent = "Rectangle.Loaded">
        < BeginStoryboard >
          < Storyboard >
            < DoubleAnimationUsingKeyFrames
              Storyboard.TargetName = "MyAnimatedTranslateTransform4"
              Storyboard.TargetProperty = "X"
              Duration = "0:0:10">
              < LinearDoubleKeyFrame Value = "100"KeyTime="0:0:3" />
              < LinearDoubleKeyFrame Value = "200"KeyTime="0:0:8" />
              < LinearDoubleKeyFrame Value = "500"KeyTime="0:0:9" />
              < LinearDoubleKeyFrame Value = "600"KeyTime="0:0:10" />
            </ DoubleAnimationUsingKeyFrames >
          </ Storyboard >
        </ BeginStoryboard >
      </ EventTrigger >
    </ Rectangle.Triggers >
 </ Rectangle > 
</ Canvas >
III.页面对应的 JS文件代码(Default.aspx.js)
function createSilverlight()
{   
     Silverlight.createObjectEx({
         source: "Page.xaml",
         properties: {
              width: "1000",
         events: {}
     });
}
 
 
 

 (三). 本入门教程示例代码下载

http://www.cnblogs.com/Files/MVP33650/Silverlight(ByChengKing).rar

(四). 其它.Net相关教程系列

http://blog.csdn.net/ChengKing/archive/2008/03/09/2160334.aspx

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

c# – 如何在Silverlight 4中绑定ContextMenu的IsEnabled属性？
如何在Silverlight4(XAML)中绑定IsEnabled属性？我试过简单的IsEnabled=“{BindingABC}”,但这不起作用–MenuItem总是启用.提前感谢您的线索！干杯编辑：有趣的是,当设置Mode=TwoWay时,绑定似乎有效.但是,在菜单项上...
c# – 使用Silverlight / windows手机式控件设置我的.Net桌面应用程序GUI
我正在编写我的第一个vb.net应用程序(但我也会在这里标记c#,因为我确信即使是一个c#人也可以使用类似的.net实现来回答这个问题).我申请的简短说明：我的桌面应用程序将仅在win平台上运行,使用vb.net,它是一个简单的网...
c# – Silverlight：将服务调用和文件处理移动到后台线程
ProcessFile()是在UIThread上运行还是在单独的线程上运行.如果它在UIThread上,如何将文件请求和ProcessFile()移动到单独的线程？varxClient=newServiceReference1.Service1SoapClient();xClient.Retrieve_File_Compl...
c# – 如何从ASP.NET / Silverlight开发人员成为sharepoint开发人员？
我从同行那里听说,对sharepoint的了解对职业生涯有益.我们不在办公室使用sharepoint.所以不知道如何开始.这些是我的新手问题>学习共享点值得努力吗？>学习sharepoint的资源在哪里？>我是否应该考虑开发哪些...
c# – Windows Phone 8 – 将列表保存到IsolatedStorage
我正在尝试保存一个类我的类对象的集合.我收到一个错误说明：Thecollectiondatacontracttype‘System.Collections.Generic.Listcannotbedeserializedbecauseitdoesnothaveapublicparameterlessconstructor.Addingapu...
c# – 在XAML中使用绑定设置样式
我需要根据Silverlight中的某些配置值设置给定控件的Style.我想有可能从两种可用的样式(静态资源)中选择一个控件样式.我试图做一些像：<TextBoxStyle="{BindingABC}"/>哪里publicstringABC{get{retu...
Android设备上的Silverlight / Moonlight
我刚买了第一台Android设备,我喜欢它…我也很喜欢你可以创建自己的应用程序并随意分发它们.我已经阅读了一些关于Monodroid的内容,而且显然微软希望将Silverlight放在这些设备上,尽管没有太多关于它们的信息……但是M...
c# – 从silverlight应用程序访问SQL Server数据库
我们的ASP.NET网站允许用户执行各种查询,并根据从数据库查询的结果显示网络图(如UML图).目前,我们正在生成一个位图并显示它.但由于我们需要支持允许用户以交互方式显示/隐藏某些块的功能,因此我们计划使用Silverligh...
c# – 自定义Silverlight启动画面导致白屏死机
我正在开发一个Silverlight4应用程序,我已经创建了一个自定义的启动画面.乍一看,自定义启动画面运行良好–非常好.几天后,我开始注意到闪屏不再显示,屏幕仍然是空白.这似乎只发生在我打开多个指向同一个应用程序的IE选...
c# – 使用带偏移的RotateTransform问题旋转图像
这是我的XAML：<ImageVerticalAlignment="Center"HorizontalAlignment="Center"Source="{BindingInput,Converter={StaticResourceByteArrayToBitmapConverter}}"><Image.Ren...
    pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native