ASP.NET 伺服器控件封裝 Silverlight 完全指南：從 XAML 定義到屬性事件綁定

封裝優勢

• 像使用一般伺服器控件一樣設定屬性、掛接事件、呼叫方法。
• 頁面標記乾淨，無雜亂 JavaScript。
• 易於維護與部署。

第一步：撰寫 XAML (Sphere.xaml)

<Canvas xmlns="https://schemas.microsoft.com/client/2007" Width="300" Height="300" Background="White">
  <Canvas.Resources>
    <Storyboard x:Name="growAnimation">
      <DoubleAnimation Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Ellipse.Width)" To="250" Duration="0:0:2" />
      <DoubleAnimation Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Ellipse.Height)" To="250" Duration="0:0:2" />
    </Storyboard>
    <Storyboard x:Name="shrinkAnimation">
      <DoubleAnimation Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Ellipse.Width)" To="200" Duration="0:0:2" />
      <DoubleAnimation Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(Ellipse.Height)" To="200" Duration="0:0:2" />
    </Storyboard>
  </Canvas.Resources>
  <TextBlock x:Name="titleText" Width="200" Height="24" Canvas.Left="94" Text="[Title]" />
  <Ellipse x:Name="ellipse" Width="200" Height="200" Canvas.Left="47" Canvas.Top="41">
    <Ellipse.Fill>
      <RadialGradientBrush GradientOrigin="0.75,0.25" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
        <GradientStop Color="Yellow" Offset="0" />
        <GradientStop Color="Green" Offset="1" />
      </RadialGradientBrush>
    </Ellipse.Fill>
  </Ellipse>
</Canvas>

整合流程

1. 建立自訂伺服器控件繼承 Control，屬性對應 XAML 參數。
2. Render 方法輸出 <object type="application/x-silverlight-2"> 標籤，注入 InitParameters 傳遞屬性值。
3. 客戶端 JavaScript 讀取參數，操作 XAML 元素（修改標題、啟動動畫）。

後續文章將詳細示範控件程式碼與 JavaScript 互動邏輯。