#眉標=Silverlight
#副標=Silverlight開發技術（2）
#大標=向量圖形繪製、筆刷上色、與事件處理機制
#作者=文圖／董大偉


==<box>===========
程式1<Canvas xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Line Name="L1" X1="0" Y1="0" X2="100" Y2="50"
   Stroke="Blue" StrokeThickness="4" />
  <Line  Name="L2" X1="0" Y1="0" X2="100" Y2="50" Canvas.Left="100"
   Stroke="Red" StrokeThickness="4" />
</Canvas>==<end>==============
　　

==<box>===========
程式2
  
<Ellipse Name="E1" Height="100" Width="200" Canvas.Left="100" Canvas.Top="60" StrokeThickness="2" Stroke="Green"/>
  <Rectangle Name="R1" Height="100" Width="200" Canvas.Left="100" Canvas.Top="60" StrokeThickness="2" Stroke="Brown"/>
==<end>==============



==<box>===========
程式3
  
<Polygon Name="PL1" Points="300,150 400,100 400,275 300,200" Canvas.Left="30" 
           Stroke="Purple" StrokeThickness="2">
    <Polygon.Fill>
      <SolidColorBrush Color="Blue" Opacity="0.3"/>
    </Polygon.Fill>
  </Polygon> 
  <Polyline Name="PL2" Points="300,150 400,100 400,275 300,200" Canvas.Left="150" 
            Stroke="Purple" StrokeThickness="2">
    <Polyline.Fill>
      <SolidColorBrush Color="Blue" Opacity="0.3"/>
    </Polyline.Fill>
  </Polyline>==<end>==============



==<反灰>===========
0000:<Polyline …>
0001:    <Polyline.Fill>
0002:      <SolidColorBrush Color="Blue" Opacity="0.3"/>
0003:    </Polyline.Fill>
0004:</Polyline>==<end>==============



==<反灰>===========
  <Rectangle ...>
    <Rectangle.Stroke>
       ...
    </Rectangle.Stroke>  
  </Rectangle>==<end>==============



==<反灰>===========
  <Path Stroke="DarkGoldenRod" StrokeThickness="3" Canvas.Top="20"
    Data="M100,200 C100,25 400,350 400,175 H280" />
==<end>==============




　　
==<box>===========
程式4
  
<Path Name="Path1" Stroke="Red" StrokeThickness="3" 
   Data="M300,300 L350,350 H400 V400" />
  <Path Name="Path2" Stroke="Brown" StrokeThickness="3"  
   Data="M400,400 C450,250 550,550 600,400" />
  <Path Name="Path3" Stroke="Red" StrokeThickness="3"  
   Data="M50,250 Q175,400 200,250" />
  <Path Name="Path4" Stroke="Blue" StrokeThickness="3"  
   Data="M50,250 S175,400 200,250" />
  <Path Name="Path5" Stroke="Green" StrokeThickness="3"  
   Data="M50,250 T175,400 200,250" />
  <Path Name="Path6" Stroke="Brown" StrokeThickness="3"  
   Data="M50,250 A35,50 225 1 0 80,170" />==<end>==============
　　


==<box>===========
程式5
  
<Polygon Name="PL2" Points="300,50 400,100 400,275 300,200" 
           Canvas.Left="-100" Stroke="Purple" StrokeThickness="2">
    <Polygon.Fill>
      <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Red" Offset="0.35" />
        <GradientStop Color="Blue" Offset="1.0" />
      </LinearGradientBrush>
    </Polygon.Fill>
  </Polygon>==<end>==============



==<box>===========
程式6
  
<Polygon Name="PL3" Points="300,50 400,100 400,275 300,200"
         Canvas.Left="50" Stroke="Purple" StrokeThickness="2">
    <Polygon.Fill>
      <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
        <GradientStop Color="Yellow" Offset="0.1" />
        <GradientStop Color="Red" Offset="0.35" />
        <GradientStop Color="Blue" Offset="1.0" />
      </RadialGradientBrush>
    </Polygon.Fill>
  </Polygon>==<end>==============
　　


　　
==<box>===========
程式7
 
<Polygon Name="PL4" Points="300,50 400,100 400,275 300,200"
           Canvas.Left="-230" Canvas.Top="200" Stroke="Purple" StrokeThickness="2">
    <Polygon.Fill>
      <ImageBrush ImageSource="http://silverlight.net/themes/silverlight/images/showcase/gallery/flowersforyou-Hero-noSL.jpg" />
    </Polygon.Fill>
  </Polygon>=<end>==============



==<box>===========
程式8
  
<MediaElement
   Name="SilverlightMediaElement"
   Source="http://silverlight.studyhost.com/media/Silverlight_WEB_720p_2M_128_vbr.wmv" IsMuted="False" Opacity="0.0" IsHitTestVisible="False" />

  <Polygon Name="PL5" Points="300,50 400,100 400,275 300,200"
         Canvas.Left="-100" Canvas.Top="200" Stroke="Purple" StrokeThickness="2">
    <Polygon.Fill>
      <VideoBrush SourceName="SilverlightMediaElement" Stretch="UniformToFill" />
    </Polygon.Fill>
  </Polygon>==<end>==============
　　

==<灰>===========
  <Polygon Name="PL3" MouseLeftButtonDown="PL3_Click"
           Points="300,50 400,100 400,275 300,200" Canvas.Left="50" …>
     (…略…)
  </Polygon>==<end>==============
　　


==<灰>===========
function PL3_Click(sender,mouseEventArgs)
{
 alert(sender.Name);
}==<end>==============
　　


==<灰>===========
function PL3_Click(sender,mouseEventArgs)
{
 var Canvas1 = sender.findName("Canvas1");
 var Host = sender.getHost();
}==<end>==============
　　


==<灰>===========
mouseEventArgs.getPosition(null).x
mouseEventArgs.getPosition(null).y=<end>==============
　　


==<灰>===========
mouseEventArgs.shift
mouseEventArgs.ctrl
==<end>==============
　　


==<灰>===========
<Canvas KeyDown="Canvas_KeyDown" KeyUp="Canvas_KeyUp" 
        xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
　　　　(…略…)
</Canvas>==<end>==============
　　


==<灰>===========
function Canvas_KeyDown(sender, keyEventArgs){
 alert(keyEventArgs.PlatformKeyCode);
}
function Canvas_KeyUp(sender, keyEventArgs){
 alert(keyEventArgs.Key);
}
==<end>==============


==<box>===========
程式9
function onSilverlightPlugInLoaded()
{
 var PL2;
 PL2=document.getElementById('SilverlightPlugIn').content.findName('PL2');
 PL2.addEventListener("MouseLeftButtonDown", onPL2click);
} 
function onPL2click()
{
    alert('onPL2click');
}==<end>==============


==<灰>===========
<Canvas
	xmlns="http://schemas.microsoft.com/client/2007"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Name="Canvas1"
	Width="640" Height="480" MouseLeftButtonDown="OnClick" MouseMove="OnMouseMove" KeyDown="OnKeyDown"	>
==<end>==============
　　


==<灰>===========
    //鍵盤按下
    function OnKeyDown(sender, keyEventArgs){
     //按下空白鍵就發射 
     if (keyEventArgs.PlatformKeyCode == 32) Shoot();
    }
    //滑鼠點選也發射
    function OnClick(sender, mouseEventArgs) {
     Shoot();
    }==<end>==============
　　


==<box>===========
程式100000:   var BugsName=new Array(4);    
0001:    function init()
0002:    {
0003:        var i;
0004:        for (i=0;i<5;i++)
0005:        {
0006:         BugsName[i]="bug_"+i;
0007:         CreateBug(BugsName[i],i*80+50,30);
0008:        }        
0009:        //開始移動
0010:        setTimeout('BugsMove()',500);
0011:    }
0012:    //目標開始移動
0013:    function BugsMove()
0014:    {
0015:        var i,flag;
0016:        flag=false;
0017:        for (i=0;i<5;i++)
0018:        {
0019:         var bug=document.getElementById('SilverlightPlugIn').content.findName(BugsName[i])
0020:         if (bug!=null) 
0021:         {
0022:            flag=true;
0023:            bug["Canvas.Top"]+=15;
0024:            //如果Bug到達本部
0025:            if ( bug["Canvas.Top"]>430) {alert('Game Over, You Lost!!!'); return;}
0026:         }
0027:         //如果所有bug消失
0028:         if (flag==false) {alert('Game Over, You Win!!!'); return;}
0029:        }
0030:        //繼續移動
0031:        setTimeout('BugsMove()',1500);
0032:    }==<end>==============
　　

　　
==<box>===========
程式110000:    //發射子彈 
0001:    function Shoot()
0002:    {
0003:     var bullet=document.getElementById('SilverlightPlugIn').content.findName('bullet');
0004:     var shuttle=document.getElementById('SilverlightPlugIn').content.findName('shuttle');
0005:
0006:     //動態設定子彈的位置(依照太空梭所在位置)
0007:     bullet["Canvas.Left"]=shuttle["Canvas.Left"]+25;
0008:     bullet["Canvas.Top"]=shuttle["Canvas.Top"]-20;
0009:     //發射動畫(處理子彈移動以及判斷是否射中目標)
0010:     ShootingProcess();
0011:    }
0012:    //處理子彈發射 
0013:    function ShootingProcess()
0014:    {
0015:     var bullet=document.getElementById('SilverlightPlugIn').content.findName('bullet');
0016:     bullet["Canvas.Top"]-=10;
0017:     //判斷是否有射中目標
0018:     var i;
0019:     for (i=0;i<5;i++)
0020:     {
0021:      var bug=document.getElementById('SilverlightPlugIn').content.findName(BugsName[i])
0022:        if (bug!=null) {
0023:           if ( bullet["Canvas.Top"]<bug["Canvas.Top"]+bug["Height"] &&
0024:                bullet["Canvas.Left"]>bug["Canvas.Left"] &&
0025:                bullet["Canvas.Left"]<bug["Canvas.Left"]+bug["Width"])
0026:              {
0027:                //射中了
0028:                document.getElementById('SilverlightPlugIn').content.findName('Canvas1').children.remove(bug);
0029:              }
0030:        }
0031:     }
0032:     //判斷是否超出範圍
0033:     if (bullet["Canvas.Top"]>-20) setTimeout('ShootingProcess()',10);
0034:    }==<end>==============
　　


==<灰>===========
    //切換全螢幕
    function FullScreen(sender, mouseEventArgs)
    {
     document.getElementById('SilverlightPlugIn').content.fullScreen=true;
    }==<end>==============