#眉標=Silverlight
#副標=Silverlight開發技術（5）
#大標=將Silverlight封裝為ASP.NET UserControl
#作者=文／圖	董大偉


　　
==<box>===========
程式1
　　　　'設定背景顏色
        Me.AdBanner1.BackColor = Drawing.Color.White
        '設定寬度與高度
        Me.AdBanner1.Width = Unit.Pixel(500)
        Me.AdBanner1.Height = Unit.Pixel(75)
        Me.AdBanner1.IntervalSec = 3
        '用程式碼動態決定Banner 與 JavaScript or Link
        Me.AdBanner1.Banners.Add(New AdBannerItem("AD-1.jpg", "alert('Hello');"))
        Me.AdBanner1.Banners.Add(New AdBannerItem("AD-2.jpg", New Uri("http://www.kimo.com")))
        Me.AdBanner1.Banners.Add(New AdBannerItem("AD-3.jpg", "alert('Hi');"))
        'Me.AdBanner1.Banners.Add(New AdBannerItem("AD-4.jpg", ""))

==<end>==============



　　
==<box>===========
程式2
    ''' 高度
    Public Property Height() As Unit
        Get
            Return Me.Xaml1.Height
        End Get
        Set(ByVal value As Unit)
            Me.Xaml1.Height = value
        End Set
    End Property

==<end>==============
　　



　　
==<box>===========
程式3
    '淡出淡入秒差
    Public Property IntervalSec() As Integer
        Get
            If Me.ViewState("IntervalSec") Is Nothing Then Me.ViewState("IntervalSec") = 2
            Return Me.ViewState("IntervalSec")
        End Get
        Set(ByVal value As Integer)
            If value > 15 Then
                value = 15
            End If
            If value <= 0 Then
                value = 1
            End If
            Me.ViewState("IntervalSec") = value
        End Set
    End Property

==<end>==============
　　

==<box>===========
程式4
        '設定背景顏色
        Me.AdBanner1.BackColor = Drawing.Color.White
        '設定寬度與高度
        Me.AdBanner1.Width = Unit.Pixel(500)
        Me.AdBanner1.Height = Unit.Pixel(75)
        Me.AdBanner1.IntervalSec = 3
        '設定用程式碼決定Banner 與 JavaScript or Link
        Me.AdBanner1.Banners.Add(New AdBannerItem("AD-1.jpg", "alert('Hello');"))
        Me.AdBanner1.Banners.Add(New AdBannerItem("AD-2.jpg", New Uri("http://www.kimo.com")))
        Me.AdBanner1.Banners.Add(New AdBannerItem("AD-3.jpg", "alert('Hi');"))

==<end>==============




==<box>===========
程式5
    'Banner資料
    Public Property Banners() As ArrayList
        Get
            If Me.ViewState("Banners") Is Nothing Then
                Me.ViewState("Banners") = New ArrayList
            End If
            Return Me.ViewState("Banners")
        End Get
        Set(ByVal value As ArrayList)
            Me.ViewState("Banners") = value
        End Set
    End Property

==<end>==============
　　



==<box>===========
Me.AdBanner1.Banners.Add(New AdBannerItem("AD-1.jpg", "alert('Hello');"))
Me.AdBanner1.Banners.Add(New AdBannerItem("AD-2.jpg", New Uri("http://www.kimo.com")))
Me.AdBanner1.Banners.Add(New AdBannerItem("AD-3.jpg", "alert('Hi');"))

==<end>==============
　　




==<box>===========
程式6
''' <summary>
''' Ad-Banner選項
''' </summary>
''' <remarks></remarks>
<Serializable()> _
Public Structure AdBannerItem
    Public BannerUrl As String     '存放Banner的圖檔位置
    Public LinkUrl As Uri          '存放按下Banner之後要開啟的網頁位置
    Public javaScript As String     '存放按下Banner之後要執行的JavaScript
    ''' <summary>
    ''' 以BannerURL和LinkURL建立Banner物件
    ''' </summary>
    ''' <param name="_BannerUrl">Banner位置</param>
    ''' <param name="_ LinkUrl ">按下Banner之後要開啟的網頁位置</param>
    ''' <remarks></remarks>
      Public Sub New(ByVal _BannerUrl As String, ByVal _LinkUrl As Uri)
        Me.BannerUrl = _BannerUrl
        Me.LinkUrl = _LinkUrl
    End Sub
    ''' <summary>
    ''' 以BannerURL和JavaScript建立Banner物件
    ''' </summary>
    ''' <param name="_BannerUrl">Banner位置</param>
    ''' <param name="_javaScript">按下Banner之後要執行的JavaScript</param>
    ''' <remarks></remarks>
    Public Sub New(ByVal _BannerUrl As String, ByVal _javaScript As String)
        Me.BannerUrl = _BannerUrl
        Me.javaScript = _javaScript
    End Sub
End Structure

==<end>==============




==<box>===========
程式7
    '在頁面Render之前
    Protected Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
        Dim xaml As String
        Dim inLineXamlID As String = "InLineXaml_" & Me.UniqueID
        '動態組出Xaml
        xaml = "<script type='text/xaml' id='" & inLineXamlID & "'><?xml version='1.0'?>" & vbCrLf
        xaml += BuildAdBannerXamlCode() & vbCrLf
        xaml += "</script>" & vbCrLf
        '註冊動態組出的Xaml到頁面上
        Me.Page.ClientScript.RegisterStartupScript(GetType(String), Me.UniqueID & "_xaml", xaml, False)
        '設定Xaml1的XamlUrl為InLine Xaml(動態組出的Xaml)
        Me.Xaml1.XamlUrl = "#" & inLineXamlID
        Dim js As String
        '動態組出JavaScript
        js = BuildAdBannerJavaScriptlCode()
        '註冊動態組出的JavaScript
        Me.Page.ClientScript.RegisterStartupScript(GetType(String), Me.UniqueID & "_JS", js, True)
    End Sub

==<end>==============




==<灰>===========
Me.Xaml1.XamlUrl = "#" & inLineXamlID

==<end>==============
　　




==<box>===========
程式8
0000: '依照AdBanner屬性動態建立xaml Code
0001:    Function BuildAdBannerXamlCode() As String
0002:        Dim i As Integer
0003:        Dim xaml As String
0004:        Dim xaml_Canvas As String = ""
0005:        Dim xaml_Resource As String = ""
0006:        Dim xaml_Rec As String = ""
0007:        Dim xaml_Canvas_footer As String = "</Canvas>"
0008:
0009:        '動態組出XamlCanvas
0010:        xaml_Canvas += " <Canvas"
0011:        xaml_Canvas += "        xmlns='http://schemas.microsoft.com/client/2007'"
0012:        xaml_Canvas += "        xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'"
0013:        xaml_Canvas += "        Width='" & Me.Width.Value & "' Height='" & Me.Height.Value & "'"
0014:        xaml_Canvas += "        Background='White'"
0015:        xaml_Canvas += "        x:Name='Page'"
0016:        xaml_Canvas += " >"
0017:        '動態加上Silverlight音效(如果需要的話)
0018:        If Me.BackgroundMusicURL <> "" Then
0019:            xaml_Canvas += "	<MediaElement Canvas.Left=""10"" Volume=""1"" Canvas.Top=""10"" Width=""0"" Height=""0""  Source=""" & Me.BackgroundMusicURL & """ />"
0020:        End If
0021:        '動態組出淡出淡入Silverlight特效
0022:        For i = 0 To Banners.Count - 1
0023:            xaml_Resource += "	<Storyboard x:Name='SB_AD" & i & "' Completed='SB_AD" & i & "_Completed'>"
0024:            xaml_Resource += "	<DoubleAnimationUsingKeyFrames BeginTime='00:00:00' Storyboard.TargetName='AD" & i & "' Storyboard.TargetProperty='(UIElement.Opacity)'>"
0025:            xaml_Resource += "	<SplineDoubleKeyFrame KeyTime='00:00:00' Value='0'/>"
0026:            xaml_Resource += "	<SplineDoubleKeyFrame KeyTime='00:00:00.25' Value='1'/>"
0027:            xaml_Resource += "	<SplineDoubleKeyFrame KeyTime='00:00:" & Right("0" & Me.IntervalSec, 2) & "' Value='1'/>"
0028:            xaml_Resource += "	<SplineDoubleKeyFrame KeyTime='00:00:" & Right("0" & Me.IntervalSec, 2) & ".25' Value='0'/>"
0029:            xaml_Resource += "	</DoubleAnimationUsingKeyFrames>"
0030:            xaml_Resource += "	</Storyboard>"
0031:        Next
0032:        'N張圖片(依照Banner數量)
0033:        For i = 0 To Banners.Count - 1
0034:            xaml_Rec += "	<Rectangle Cursor='Hand' Width='" & Me.Width.Value & "' Height='" & Me.Height.Value & "' Stroke='#FF000000' Canvas.Top='0' x:Name='AD" & i & "' Canvas.Left='0' Opacity='0' MouseLeftButtonDown='AD" & i & "_Click' " & IIf(i = 0, "Loaded='AD0_Loaded'", "") & ">"
0035:            xaml_Rec += "	  <Rectangle.Fill>"
0036:            xaml_Rec += "		<ImageBrush ImageSource='" & CType(Me.Banners.Item(i), AdBannerItem).BannerUrl & "'/>"
0037:            xaml_Rec += "	  </Rectangle.Fill>"
0038:            xaml_Rec += "	</Rectangle>"
0039:        Next
0040:        '動態組出Xaml碼
0041:        xaml = xaml_Canvas
0042:        xaml += "<Canvas.Resources>" & xaml_Resource & " </Canvas.Resources>"
0043:        xaml += xaml_Rec
0044:        xaml += xaml_Canvas_footer
0045:
0046:        '回傳xaml
0047:        Return xaml
0048:    End Function

==<end>==============





==<box>===========
程式9
0000:   '依照AdBanner屬性動態組出需要的JavaScript
0001:    Function BuildAdBannerJavaScriptlCode() As String
0002:        Dim i As Integer
0003:        '動態組出需要的JavaScript
0004:        Dim js As String = ""
0005:        js += vbCrLf + "    //播放中的圖示設定為焦點(最上層顯示)"
0006:        js += vbCrLf + "    function SetFocus(obj) {"
0007:        js += vbCrLf + "        //非focus物件設為1"
0008:        For i = 0 To Banners.Count - 1
0009:            js += vbCrLf + "        obj.findName('AD" & i & "')['canvas.ZIndex']=1;"
0010:        Next
0011:        js += vbCrLf + "        //設定最上層"
0012:        js += vbCrLf + "        obj['canvas.ZIndex']=10;"
0013:        js += vbCrLf + "    }"
0014:        js += vbCrLf + "    //當AD0載入時直接撥放動畫"
0015:        js += vbCrLf + "    function AD0_Loaded(sender,e) {"
0016:        js += vbCrLf + "        sender.findName('SB_AD0').begin();"
0017:        js += vbCrLf + "        SetFocus(sender);"
0018:        js += vbCrLf + "    }"
0019:        For i = 0 To Banners.Count - 2
0020:            js += vbCrLf + "//當AD0的動畫播放完成, 則開始撥放下一個動畫"
0021:            js += vbCrLf + "    function SB_AD" & i & "_Completed(sender,e) {"
0022:            js += vbCrLf + "    sender.findName('SB_AD" & i + 1 & "').begin();"
0023:            js += vbCrLf + "    SetFocus(sender.findName('AD" & i + 1 & "'));"
0024:            js += vbCrLf + "    }"
0025:        Next
0026:        js += vbCrLf + "//當AD" & i & "的動畫播放完成, 則開始撥放第一個動畫"
0027:        js += vbCrLf + "function SB_AD" & i & "_Completed(sender,e) {"
0028:        js += vbCrLf + "        sender.findName('SB_AD0').begin();"
0029:        js += vbCrLf + "        SetFocus(sender.findName('AD0'));"
0030:        js += vbCrLf + "}"
0031:
0032:        '動態組出需要的JavaScript
0033:        For i = 0 To Banners.Count - 1
0034:            js += vbCrLf + "//當AD" & i & "被按下"
0035:            js += vbCrLf + "function AD" & i & "_Click() {"
0036:            If CType(Banners.Item(i), AdBannerItem).javaScript = "" Then
0037:                If CType(Me.Banners.Item(i), AdBannerItem).BannerUrl IsNot Nothing Then
0038:                    js += vbCrLf + "   window.open('" & CType(Banners.Item(i), AdBannerItem).LinkUrl.ToString & "');"
0039:                End If
0040:            Else
0041:                js += vbCrLf + CType(Banners.Item(i), AdBannerItem).javaScript & ";"
0042:            End If
0043:            js += vbCrLf + "}"
0044:        Next
0045:        Return js
0046:    End Function

==<end>==============
　　



　　
==<box>===========
程式10
    '載入
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Me.IsPostBack = False Then
            '背景顏色
            Me.WebUserControl1.BackColor = Drawing.Color.Black
            '寬度與高度
            Me.WebUserControl1.Width = Unit.Pixel(600)
            Me.WebUserControl1.Height = Unit.Pixel(400)
            Me.WebUserControl1.IntervalSec = 3
            '用程式碼決定Banner 與 JavaScript or Link
            '用程式碼決定Banner 與 JavaScript or Link
            Me.WebUserControl1.Banners.Add(New AdBannerItem("Pic1.jpg", New Uri("http://www.google.com.tw/")))
            Me.WebUserControl1.Banners.Add(New AdBannerItem("Pic2.jpg", New Uri("http://www.yahoo.com.tw/")))
            Me.WebUserControl1.Banners.Add(New AdBannerItem("Pic3.jpg", "alert('Hello');"))
            Me.WebUserControl1.Banners.Add(New AdBannerItem("Pic4.jpg", "alert('Hi');"))
            Me.WebUserControl1.BackgroundMusicURL = "background.mp3"
        End If
    End Sub
    'DropDownList1事件
    Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles DropDownList1.SelectedIndexChanged
        '切換撥放速度
        Me.WebUserControl1.IntervalSec = Me.DropDownList1.SelectedValue
    End Sub

==<end>==============