26、利用XAML和JavaScript进行Silverlight编程

利用XAML和JavaScript进行Silverlight编程

1. Silverlight基础操作

1.1 XAML片段处理

在Silverlight编程里， xamlFragment 是一个包含新XAML片段的字符串。创建好这个片段后，会把它的引用返回给 textBlock 变量，接着将该引用添加到根元素的子元素中，从而把它加入到元素树里。

1.2 findName 方法

XAML节点能够借助 x:Name 属性来命名。要是你想操作XAML节点的内容（比如更改 TextBlock 的内容），可以使用 findName 方法获取该节点的引用，然后对这个引用进行编辑。

下面是一个示例代码：

var SilverlightControl;
var theTextBlock;
function handleLoad(control, userContext, rootElement)
{
    SilverlightControl = control;
    theTextBlock = SilverlightControl.content.findName("txt");
    theTextBlock.addEventListener("MouseLeftButtonDown", "txtClicked");
}
function txtClicked(sender, args)
{
    theTextBlock.Text = "Hello to you too!";
}

在 handleLoad 函数中，调用了 findName 方法来获取名为 txt 的 TextBlock 的引用，然后给这个引用添加了一个事件处理程序。

1.3 createObject 方法

此方法可用于创建特定用途的新对象。在Silverlight 1.0版本中，仅支持一种对象： Downloader 对象。 Downloader 对象能利用异步下载功能下载额外的元素，其功能和Ajax类似，支持多个属性、方法和事件，方便处理下载操作。

1.3.1 Downloader 对象的属性

属性	描述
DownloadProgress	提供一个介于0到1之间的值，表示下载会话的百分比进度。
Status	获取当前下载会话状态的HTTP状态码，例如200表示下载成功，404表示资源未找到。
StatusText	获取与状态码相关的HTTP状态文本，如状态为200时，状态文本是 “OK”。
URI	包含要下载对象的URI。

1.3.2 Downloader 对象的方法

• abort ：取消当前下载并将所有属性重置为默认状态。
• getResponseText ：返回下载数据的字符串表示。
• open ：初始化下载会话，采用W3C定义的HTTP动词，Silverlight 1.0仅支持 GET 动词。
• send ：执行下载请求。

1.3.3 Downloader 对象的事件

• completed ：下载完成时触发。
• downloadProgressChanged ：内容下载过程中触发，进度每变化5%或更多时触发，达到100%时也会触发。

1.4 使用 Downloader 对象

要使用 Downloader 对象，首先得创建它的实例，在JavaScript里这很简单。示例代码如下：

var downloader = control.createObject("downloader");

然后使用 open 方法设置要下载资源的URI，再用 send 方法启动下载：

downloader.open("GET","movie.wmv",true);
downloader.send();

如果你想监控下载进度和完成状态，可以绑定相应的事件处理程序。示例如下：

downloader.addEventListener("downloadProgressChanged", "handleDLProgress");
downloader.addEventListener("completed", "handleDLComplete");

接着实现这些处理程序：

function handleDLProgress(sender, args)
{
    var ctrl = sender.getHost();
    var t1 = ctrl.content.findName("txt1");
    var v = sender.downloadProgress * 100;
    t1.Text = v + "%";
}
function handleDLComplete(sender, args)
{
    alert("Download complete");
}

2. Silverlight XAML元素分类

当处理Silverlight XAML时，XML元素通常分为以下六类：
- 布局元素：用于控制用户界面。
- 画笔：用于绘制项目。
- 视觉元素：为不同的UI元素提供通用功能。
- 形状：用于绘制UI元素。
- 复杂UI功能控件：实现复杂的用户界面功能。
- 故事板及其动画配置：用于实现动画效果。

2.1 XAML中的布局

Silverlight XAML里的 <Canvas> 元素是应用布局的核心。 Canvas 是一个绘图表面，可在上面放置其他画布元素。通过 Canvas.Left 和 Canvas.Top 属性来设置其位置，这些属性指定了任何XAML对象相对于其容器的位置。

此外，还能使用 Canvas.ZIndex 属性设置 Canvas 的Z轴顺序。Z轴顺序决定了多个元素在屏幕上重叠时，哪个元素会绘制在上面。Silverlight按从上到下的顺序读取XAML文件，所以文档中靠后的元素会绘制在靠前元素的上面。

下面是一个包含两个 Canvas 的XAML文档示例：

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="640" Height="480"
    Background="White"
    x:Name="Page"
>
    <Canvas Width="214" Height="145" Canvas.Top="59" Canvas.Left="8">
        <Rectangle Width="191" Height="104" 
            Fill="White" Stroke="Black" Canvas.Top="19"/>
    </Canvas>
    <Canvas Width="254" Height="162" Canvas.Left="69" Canvas.Top="129">
        <Rectangle Width="211" Height="154" 
            Fill="Black" Stroke="Black"/>
    </Canvas>
</Canvas>

在这个示例中，每个矩形都包含在一个 Canvas 中。第一个白色矩形的 Canvas.Top 属性设置为19，意味着它会从其容器向下偏移19像素。其容器 Canvas 的 Canvas.Top 为59， Canvas.Left 为8，所以这个白色矩形会从屏幕顶部向下偏移78像素，从左边偏移8像素。同理，黑色矩形的位置由其相对于容器 Canvas 的 Canvas.Top 和 Canvas.Left 属性决定。

由于这两个矩形的尺寸设置导致它们重叠，根据Silverlight的绘制规则，黑色矩形会绘制在白色矩形的上面。不过，可以使用元素的 ZIndex 属性来覆盖这种Z轴顺序行为。例如，以下XAML代码会让白色矩形绘制在黑色矩形的上面：

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
    Width="640" Height="480"
    Background="White"
    x:Name="Page">
    <Canvas Canvas.ZIndex="1" Width="214" Height="145" 
        Canvas.Top="59" Canvas.Left="8">
        <Rectangle Width="191" Height="104" Fill="White" 
            Stroke="Black" Canvas.Top="19"/>
    </Canvas>
    <Canvas Canvas.ZIndex="0" Width="254" Height="162" 
        Canvas.Left="69" Canvas.Top="129">
        <Rectangle Width="211" Height="154" Fill="Black" Stroke="Black"/>
    </Canvas>
</Canvas>

2.2 XAML中画笔的使用

XAML使用画笔来定义形状的绘制和填充方式。之前的示例展示了用白色和黑色填充矩形并以黑色勾勒轮廓，这是使用画笔设置填充和描边的简单示例。除了纯色填充，还有其他选择：
- 纯色画笔（ SolidColorBrush ）：用纯色进行绘制。
- 线性渐变画笔（ LinearGradientBrush ）：用二维空间中定义的线性渐变进行绘制。
- 径向渐变画笔（ RadialGradientBrush ）：用圆形（径向）渐变进行绘制。
- 图像画笔（ ImageBrush ）：用图片作为画笔进行绘制。
- 视频画笔（ VideoBrush ）：用视频作为画笔进行绘制。

下面分别介绍这些画笔：

2.2.1 纯色画笔（ SolidColorBrush ）

SolidColorBrush 用于用纯色绘制。颜色可以是命名值（如Red或Black），也可以是十六进制值，该值描述了颜色在Alpha（透明度）、红色、绿色和蓝色的8位强度值。例如，要绘制黑色，可以使用值 Black 或 #00000000 。

2.2.2 线性渐变画笔（ LinearGradientBrush ）

LinearGradientBrush 用二维空间中定义的线性渐变进行绘制。渐变是指从一种颜色过渡到另一种颜色的效果。要定义一个渐变，至少需要两种颜色和一个方向。当使用两种以上的颜色时，还需要定义渐变点，以指示在哪个点切换到该颜色。

颜色的定义方式与 SolidColorBrush 相同，可以使用命名值或十六进制值。方向通过一个归一化矩形来定义，这个矩形宽和高都是1个单位，左上角坐标为(0,0)，右下角坐标为(1,1)，默认的渐变方向是从左上角到右下角。如果要改变方向，只需通过指定渐变方向的起点和终点坐标（基于这个虚拟矩形）来实现，这些坐标通过画笔的 StartPoint 和 EndPoint 属性设置。

以下是一个使用 LinearGradientBrush 填充矩形的示例，起点设置为(0,0.5)（即矩形左边的中间位置），终点设置为(1,0.5)（即矩形右边的中间位置），实现从左到右的水平渐变：

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="640" Height="480"
    Background="White"
    x:Name="Page"
>
    <Rectangle Width="211" Height="176" 
        Stroke="#FF000000" Canvas.Left="8" Canvas.Top="64">
        <Rectangle.Fill>
            <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                <GradientStop Color="#FF000000" Offset="0"/>
                <GradientStop Color="#FFFFFFFF" Offset="1"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</Canvas>

当使用两种以上的颜色时，需要定义渐变点来配置它们在渐变中的行为。渐变点在一维空间中定义，0表示渐变的起点，1表示终点。例如，以下示例展示了用多种颜色填充同一个矩形的线性渐变，注意渐变点如何决定颜色在彩虹色之间的过渡：

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="640" Height="480"
    Background="White"
    x:Name="Page">
    <Rectangle Width="211" Height="176" Stroke="#FF000000" 
        Canvas.Left="8" Canvas.Top="64">
        <Rectangle.Fill>
            <LinearGradientBrush EndPoint="0,0" StartPoint="1,0.5">
                <GradientStop Color="Red" Offset="0"/>
                <GradientStop Color="Orange" Offset="0.17"/>
                <GradientStop Color="Yellow" Offset="0.34"/>
                <GradientStop Color="Green" Offset="0.51"/>
                <GradientStop Color="Blue" Offset="0.68"/>
                <GradientStop Color="Indigo" Offset="0.85"/>
                <GradientStop Color="Violet" Offset="1"/>
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</Canvas>

2.2.3 径向渐变画笔（ RadialGradientBrush ）

RadialGradientBrush 与 LinearGradientBrush 类似，都是用渐变填充空间，但它是以圆形方式进行填充，0表示圆心，1表示半径。如果定义了两种颜色，效果类似于将第一种颜色的聚光灯照射在第二种颜色的墙上，圆心是灯光的颜色，圆的外边缘是墙的颜色，两者之间的渐变填充整个空间。

使用 RadialGradientBrush 时，不需要指定起点和终点，因为渐变方向总是从圆心到外边缘。渐变点的使用方式与 LinearGradientBrush 相同， Offset 表示相对于圆心的单位距离。

以下是一个使用 RadialGradientBrush 填充矩形的示例，使用与前面矩形相同的彩虹颜色：

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="640" Height="480"
    Background="White"
    x:Name="Page">
    <Rectangle Width="211" Height="176" 
        Stroke="#FF000000" Canvas.Left="8" Canvas.Top="64">
        <Rectangle.Fill>
            <RadialGradientBrush>
                <GradientStop Color="Red" Offset="0"/>
                <GradientStop Color="Orange" Offset="0.17"/>
                <GradientStop Color="Yellow" Offset="0.34"/>
                <GradientStop Color="Green" Offset="0.51"/>
                <GradientStop Color="Blue" Offset="0.68"/>
                <GradientStop Color="Indigo" Offset="0.85"/>
                <GradientStop Color="Violet" Offset="1"/>
            </RadialGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</Canvas>

RadialGradientBrush 还提供了一些额外的控制选项：
- GradientOrigin ：允许设置渐变的起始点，它不一定是圆心，将其设置为不同的值会使渐变从圆心拉伸到指定点。使用归一化的(x,y)值设置，其中(0.5,0.5)是圆心，(1,1)是包围圆的矩形的右下角，(0,0)是左上角。例如，将 GradientOrigin 设置为(0.2,0.2)的示例代码如下：

<Rectangle Width="200" Height="128" Canvas.Left="8" Canvas.Top="8">
    <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.2, 0.2">
            <GradientStop Color="#FF000000" Offset="0"/>
            <GradientStop Color="#FFFFFFFF" Offset="1"/>
        </RadialGradientBrush>
    </Rectangle.Fill>
</Rectangle>

• SpreadMethod ：用于确定渐变的重复方式，可以设置为以下三个值之一：
• Pad （默认值）：表示渐变在颜色之间均匀过渡，包围矩形用渐变的最后一种颜色填充。
• Reflect ：表示渐变填充完后，将其反转以填充剩余部分。
• Repeat ：表示渐变填充完后，重复该渐变。
  这些选项在与 RadiusX 和 RadiusY 属性结合使用时特别有用。例如，使用 Reflect 值的 SpreadMethod 的示例代码如下：

<Rectangle Width="200" Height="128" Canvas.Left="8" Canvas.Top="8">
    <Rectangle.Fill>
        <RadialGradientBrush SpreadMethod="Reflect">
            <GradientStop Color="white" Offset="0"/>
            <GradientStop Color="gray" Offset="0.5"/>
            <GradientStop Color="black" Offset="1"/>
        </RadialGradientBrush>
    </Rectangle.Fill>
</Rectangle>

• RadiusX 和 RadiusY ：用于设置渐变的期望半径，默认值是0.5。指定小于该值的值意味着在填充中会使用多个渐变。例如，将 RadiusX 和 RadiusY 都设置为0.1的示例代码如下：

<Rectangle Width="200" Height="128" Canvas.Left="8" Canvas.Top="8">
    <Rectangle.Fill>
        <RadialGradientBrush RadiusX="0.1" RadiusY="0.1" SpreadMethod="Reflect">
            <GradientStop Color="#FF000000" Offset="0"/>
            <GradientStop Color="#FFFFFFFF" Offset="1"/>
        </RadialGradientBrush>
    </Rectangle.Fill>
</Rectangle>

2.2.4 图像画笔（ ImageBrush ）

除了用颜色或渐变填充空间，还可以使用 ImageBrush 用图片填充。 ImageBrush 提供了一些属性来设置其行为，特别是如何控制图像的纵横比和平铺行为。

以下是一个使用 ImageBrush 用图像填充矩形的XAML示例：

<Rectangle Width="200" Height="128">
    <Rectangle.Fill>
        <ImageBrush ImageSource="apress.jpg" />
    </Rectangle.Fill>
</Rectangle>

通过 Stretch 属性可以确定图像的拉伸方式，它可以取以下几种不同的拉伸模式：
| 拉伸模式 | 描述 |
| ---- | ---- |
| None | 不改变图像，直接渲染。 |
| Uniform | 缩放图像以适应填充区域的尺寸，同时保持图像的纵横比。 |
| UniformToFill | 完全缩放图像以填充所需区域，保持图像的纵横比，必要时进行裁剪。 |
| Fill | 使用独立的x轴和y轴缩放图像以填充所需区域，这会扭曲图像以完全填充可用空间。 |

为了配合图像的拉伸，还可以使用 AlignmentX 和 AlignmentY 属性设置图像的对齐方式。当图像没有填满绘制区域时，可以通过设置这些属性将图像按期望的方式对齐。 AlignmentX 的值可以是 Left 、 Right 和 Center ， AlignmentY 的值可以是 Top 、 Bottom 和 Center 。

以下是一个XAML示例，用相同的图像填充四个矩形，但为每个矩形设置不同的拉伸模式，并将它们的对齐方式设置为右下角：

<Rectangle Width="200" Height="200" Stroke="Black" Canvas.Left="23" Canvas.Top="17">
    <Rectangle.Fill>
        <ImageBrush ImageSource="apress.jpg" Stretch="None" 
            AlignmentX="Right" AlignmentY="Bottom" />
    </Rectangle.Fill>
</Rectangle>
<Rectangle Width="200" Height="200" Stroke="Black" 
    Canvas.Left="292" Canvas.Top="17">
    <Rectangle.Fill>
        <ImageBrush ImageSource="apress.jpg" Stretch="Fill" 
            AlignmentX="Right" AlignmentY="Bottom" />
    </Rectangle.Fill>
</Rectangle>
<Rectangle Width="200" Height="200" Stroke="Black" 
    Canvas.Top="245" Canvas.Left="23">
    <Rectangle.Fill>
        <ImageBrush ImageSource="apress.jpg" Stretch="Uniform" 
            AlignmentX="Right" AlignmentY="Bottom" />
    </Rectangle.Fill>
</Rectangle>
<Rectangle Width="200" Height="200" Stroke="Black" 
    Canvas.Left="292" Canvas.Top="245">
    <Rectangle.Fill>
        <ImageBrush ImageSource="apress.jpg" Stretch="UniformToFill" 
            AlignmentX="Right" AlignmentY="Bottom" />
    </Rectangle.Fill>
</Rectangle>

综上所述，通过掌握Silverlight的这些基础操作和XAML元素的使用，能够创建出丰富多样的用户界面。无论是布局的控制、元素的操作，还是使用不同的画笔画出各种效果，都为开发者提供了强大的工具。希望这些内容能帮助你更好地进行Silverlight开发。

3. 视频画笔（ VideoBrush ）

在Silverlight的XAML中，除了前面提到的各种画笔， VideoBrush 也是一种独特的画笔类型，它可以使用视频作为画笔来填充形状。不过，使用 VideoBrush 时需要确保视频资源的可用性和正确配置。

3.1 VideoBrush 的基本使用

以下是一个简单的使用 VideoBrush 填充矩形的示例：

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="640" Height="480"
    Background="White"
    x:Name="Page"
>
    <Rectangle Width="211" Height="176" 
        Stroke="#FF000000" Canvas.Left="8" Canvas.Top="64">
        <Rectangle.Fill>
            <VideoBrush SourceName="myVideo" />
        </Rectangle.Fill>
    </Rectangle>
    <MediaElement x:Name="myVideo" Source="exampleVideo.wmv" AutoPlay="True" />
</Canvas>

在这个示例中，首先定义了一个矩形，使用 VideoBrush 来填充它。 VideoBrush 的 SourceName 属性指定了一个 MediaElement 的名称，这里是 myVideo 。然后在下方定义了一个 MediaElement 元素，它的 Source 属性指定了视频资源的路径， AutoPlay 属性设置为 True 表示视频会自动播放。

3.2 VideoBrush 的注意事项

• 资源可用性 ：确保指定的视频文件路径正确，并且该文件存在于指定的位置。
• 同步问题 ： VideoBrush 的显示依赖于 MediaElement 的播放状态，所以要确保 MediaElement 正常播放视频。

4. Silverlight XAML 开发流程总结

4.1 整体开发流程

下面是一个简单的 mermaid 流程图，展示了使用 Silverlight XAML 进行开发的基本流程：

graph LR
    A[规划布局] --> B[选择元素]
    B --> C[设置属性]
    C --> D[添加事件处理]
    D --> E[测试与调试]
    E --> F[优化与部署]

4.2 各步骤详细说明

步骤	说明	操作示例
规划布局	确定应用程序的整体布局结构，选择合适的布局元素，如 <Canvas> 。	使用 <Canvas> 作为主要布局元素，规划各个子元素的位置。
选择元素	根据需求选择合适的 XAML 元素，如布局元素、视觉元素、形状等。	选择 <Rectangle> 来绘制矩形，使用 SolidColorBrush 填充颜色。
设置属性	为选择的元素设置各种属性，如位置、大小、颜色、渐变等。	设置矩形的 Width 、 Height 属性，使用 Canvas.Left 和 Canvas.Top 确定位置。
添加事件处理	为元素添加事件处理程序，实现交互功能。	使用 findName 方法获取元素引用，添加 MouseLeftButtonDown 事件处理程序。
测试与调试	在开发环境中测试应用程序，检查是否存在错误或不符合预期的行为。	在浏览器中运行应用程序，检查布局是否正确，事件处理是否正常。
优化与部署	根据测试结果进行优化，然后将应用程序部署到生产环境。	优化代码性能，压缩资源文件，将应用程序部署到服务器。

5. 常见问题及解决方案

5.1 布局问题

• 问题描述 ：元素位置不符合预期，重叠或显示不全。
• 解决方案 ：
  • 检查 Canvas.Left 和 Canvas.Top 属性的设置，确保元素位置正确。
  • 使用 Canvas.ZIndex 属性调整元素的 Z 轴顺序，避免重叠问题。

5.2 画笔显示问题

• 问题描述 ：使用画笔填充时，颜色或渐变效果显示异常。
• 解决方案 ：
  • 检查颜色值的设置，确保使用正确的命名值或十六进制值。
  • 对于渐变画笔，检查渐变点的设置和方向属性，确保渐变效果符合预期。

5.3 事件处理问题

• 问题描述 ：事件处理程序没有正常触发。
• 解决方案 ：
  • 检查 findName 方法是否正确获取了元素的引用。
  • 确保事件名称和处理程序名称正确匹配，并且处理程序的代码逻辑没有错误。

通过以上对 Silverlight XAML 中各种元素和功能的介绍，以及开发流程的总结和常见问题的解决方案，相信你对使用 Silverlight 进行开发有了更深入的了解。在实际开发中，可以根据具体需求灵活运用这些知识，创建出功能丰富、界面美观的应用程序。不断实践和探索，你将能够更好地掌握 Silverlight 开发的技巧和方法。