27、深入探索Silverlight XAML与JavaScript编程

深入探索Silverlight XAML与JavaScript编程

1. VideoBrush的使用

Silverlight的强大特性之一是能够使用视频来填充表面，这可通过VideoBrush实现。使用VideoBrush时，需结合MediaElement控件，具体操作步骤如下：
1. 向画布添加MediaElement控件，为其命名，并将其设置为不可见且鼠标无法访问。
2. 将MediaElement设置为VideoBrush的源。

示例代码如下：

<MediaElement x:Name="vid" Source="thebutterflyandthebear.wmv" 
Opacity="0" IsHitTestVisible="False" />
<TextBlock FontFamily="Verdana" FontSize="80" 
FontWeight="Bold" TextWrapping="Wrap"
Text="Video">
<TextBlock.Foreground>
<VideoBrush SourceName="vid"/>
</TextBlock.Foreground>
</TextBlock>

此例中，MediaElement加载名为 thebutterflyandthebear.wmv 的视频（可从Silverlight网站的QuickStarts页面下载），并用于填充TextBlock中的文本。

2. 使用画笔绘制笔触

除了用画笔填充对象，还可以用指定画笔绘制其笔触。例如，绘制矩形时，可使用不同颜色填充和绘制轮廓。
- 简单示例 ：绘制一个白色矩形，轮廓为黑色。

<Rectangle Stroke="Black" Fill="White" Canvas.Left="40" Canvas.Top="40"
Width="100" Height="200" />

• 使用线性渐变画笔 ：

<Rectangle Fill="White" Canvas.Left="40" Canvas.Top="40" Width="100" Height="200">
<Rectangle.Stroke>
<LinearGradientBrush >
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="0.5"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>

使用笔触时，还可通过以下属性微调其外观：
- 笔触宽度 ：使用 width 属性设置。笔触较窄时，渐变效果可能不明显，增大宽度可使画笔效果更清晰。
- 笔触绘制方式 ：通过 StrokeDashArray 、 StrokeDashCap 和 StrokeDashOffset 属性配置。
- StrokeDashArray ：使用双精度值数组指定线条如何分割为虚线，如“3,1,2,1”表示虚线长度为3，间隔为1，再虚线长度为2，间隔为1。
- StrokeDashCap ：设置虚线端点样式，有Flat（默认，直线结束，角为方形）、Round（端点为半圆，直径与线条厚度相同）、Triangle（端点为等腰三角形，底边长度等于笔触厚度）。
- StrokeLineJoin ：控制笔触转弯处的连接方式，有Bevel（削去连接处边缘，使其平滑）、Miter（保持默认边缘）、Round（使连接处边缘变圆）。

3. XAML中的视觉元素属性

• 尺寸和位置属性 ：
  • Height 和 Width 属性用于设置元素尺寸，如创建一个50x100的矩形：

<Rectangle Fill="Black" Width="50" Height="100" />

- `Canvas.Top`和`Canvas.Left`属性用于设置元素位置，如将上述矩形放置在距离容器左侧和顶部各50像素处：

<Rectangle Fill="Black" Width="50" Height="100" Canvas.Top="50" Canvas.Left="50" />

• 透明度 ：大多数形状允许设置其Alpha通道，可通过形状填充画笔的Alpha通道（VideoBrush除外）或 Opacity 属性设置，0表示不可见，1表示可见。
• 光标行为 ：XAML元素的 Cursor 属性可设置鼠标光标样式，包括Arrow（普通箭头）、Default（使用父元素的光标设置）、Hand（指向手形，常用于超链接）、IBeam（文本光标）、None（无光标）、Wait（沙漏，表示忙碌状态）。

4. XAML中的形状

Silverlight支持多种形状，包括：
|形状|描述|示例代码|
|----|----|----|
|Ellipse|绘制封闭曲线形状，圆是水平和垂直尺寸相同的椭圆| <Ellipse Fill="Red" Height="100" Width="200"/> |
|Rectangle|绘制封闭直线形状，正方形是水平和垂直尺寸相同的矩形| <Rectangle Fill="Red" Height="100" Width="100"/> |
|Line|绘制指定端点之间的直线| <Line Canvas.Top="50" Canvas.Left="50" X1="40" Y1="40" X2="100" Y2="100" Stroke="Black" /> |
|Path|绘制一系列连接的线条和曲线，可使用几何图形或路径语言定义| <Path Stroke="Black" Data="M 10,10 L 150,100" /> |
|Polygon|绘制由一系列连接直线组成的封闭形状| - |
|Polyline|绘制一系列连接的直线| - |

以下是各形状的详细介绍：
- Ellipse ：通过 Height 和 Width 属性控制垂直和水平半径，如创建一个宽是高两倍的椭圆形：

<Ellipse Fill="Red" Height="100" Width="200"/>

• Rectangle ：同样使用 Height 和 Width 属性控制尺寸，还可使用 RadiusX 和 RadiusY 属性圆角，如将一个正方形的角设置为半径为10像素的圆角：

<Rectangle Fill="Red" Height="100" Width="100" RadiusX="10" RadiusY="10"/>

• Line ：使用 X1 、 Y1 指定起点， X2 、 Y2 指定终点，坐标是相对于容器的。
• Path ：可使用几何图形（如 EllipseGeometry 、 LineGeometry 、 RectangleGeometry 、 PathGeometry ）或路径语言定义。路径语言使用简单的空格分隔值，包含命令字母和参数，如 M （移动绘图头）、 L （绘制直线）等。

5. XAML控件

Silverlight的XAML控件包括：
- Image ：用于绘制图形，通过 Source 属性设置图像URI，支持.bmp、.jpg和.png格式。

<Image Width="200" Height="200" Source="apress.jpg" />

• Glyphs ：根据定义的字体渲染固定文本，可直接使用Unicode文本或字符在字体中的偏移量。通过 FontURI 指定字体文件路径，使用 Indices 或 UnicodeString 指定字符， FontRenderingEmSize 控制字体大小， StyleSimulations 设置字体样式。

<Glyphs Canvas.Top="0" FontUri="webdings.ttf" Indices="201;188;196" 
Fill="Black" FontRenderingEmSize="48"/>

• TextBlock ：轻量级控件，用于显示单行或多行文本。支持多种网络安全字体，可通过 FontSize 、 FontStyle 、 FontWeight 控制文本渲染， TextDecorations 添加装饰， TextWrapping 控制文本换行。

<TextBlock Width="157" Height="101" Canvas.Left="47" Canvas.Top="72" Text="The Quick
brown fox jumped over the lazy dog" TextWrapping="Wrap" FontFamily="Courier New"/>

• MediaElement ：用于播放媒体文件，与VideoBrush结合使用。

6. 变换

XAML允许定义变换，影响元素在屏幕上的渲染方式。Silverlight提供以下固定变换：
- RotateTransform ：按指定角度旋转元素。
- ScaleTransform ：改变对象在x轴、y轴或两个轴上的大小。
- TranslateTransform ：将对象移动到新位置。
- SkewTransform ：按指定角度在特定方向上倾斜对象。
- MatrixTransform ：应用自定义变换。

变换可组合在 TransformGroup 中，Silverlight会根据定义的变换计算单个矩阵并应用。

7. 故事板和动画

Silverlight中的动画通过在一段时间内改变属性来实现，动画包含在故事板中，有以下几种类型：
- DoubleAnimation和DoubleAnimationUsingKeyFrames ：用于改变基于双精度值的属性，如 Canvas.Left 或 Opacity 。
- PointAnimation和PointAnimationUsingKeyFrames ：用于随时间改变点值。
- ColorAnimation和ColorAnimationUsingKeyFrames ：用于随时间改变颜色值。

每种值都有标准动画和使用关键帧的动画两种类型。

8. 使用JavaScript编程

通常，设计师使用工具创建Silverlight XAML UI设计，程序员使用JavaScript激活设计。
- 编辑属性 ：在编程中，XAML标签应视为对象，属性可直接设置，但对于具有点语法的附加属性（如 Canvas.Left ），需使用 setValue 和 getValue 读写。
示例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">
<TextBlock Width="197" Height="59" Text="This is the first text" 
TextWrapping="Wrap" Canvas.Left="96" Canvas.Top="35" x:Name="txt"/>
</Canvas>

JavaScript代码：

function handleLoad(control, context, sender)
{
var txtBlock=control.content.findName("txt");
txtBlock.Text = "This is the new Text";
}

通过 findName 方法获取要操作的对象引用，然后访问其编程模型。

综上所述，Silverlight XAML和JavaScript结合使用，可创建丰富的用户界面和动画效果。通过掌握上述各种控件、属性、变换和动画的使用方法，开发者能够实现各种复杂的交互和视觉效果。在实际开发中，可根据具体需求灵活运用这些技术，为用户带来更好的体验。

深入探索Silverlight XAML与JavaScript编程（续）

9. 详细操作流程总结

为了更好地理解和运用上述的知识，下面通过流程图展示使用VideoBrush的操作流程：

graph TD;
    A[开始] --> B[添加MediaElement到画布];
    B --> C[为MediaElement命名];
    C --> D[设置MediaElement不可见且鼠标无法访问];
    D --> E[将MediaElement设置为VideoBrush的源];
    E --> F[使用VideoBrush填充文本或其他元素];
    F --> G[结束];

这个流程图清晰地展示了使用VideoBrush的步骤，从添加MediaElement开始，到最终使用VideoBrush填充元素，每一步都有明确的指向。

10. 形状绘制与属性设置的注意事项

在使用各种形状进行绘制时，有一些需要注意的地方：
- Path的路径语言 ：路径语言虽然简单，但命令和参数的使用需要准确。例如，在使用 M 和 L 命令时，要确保坐标值的正确性。不同的命令组合可以绘制出复杂的图形，下面是一些常见命令的详细解释：
|命令|描述|示例|
|----|----|----|
|M|将绘图头移动到指定点| M 10,10 移动到(10,10)点|
|L|从当前点绘制直线到指定点| L 150,100 绘制直线到(150,100)点|
|H|绘制水平直线到指定x坐标点| H 200 绘制水平直线到x=200的点|
|V|绘制垂直直线到指定y坐标点| V 300 绘制垂直直线到y=300的点|
|C|绘制三次贝塞尔曲线| C 50,50 100,100 150,150 根据控制点和终点绘制曲线|
|Q|绘制二次贝塞尔曲线| Q 80,80 120,120 根据控制点和终点绘制曲线|
|S|与Q命令类似，但使用当前坐标作为一个控制点| S 90,90 130,130 绘制曲线|
|A|绘制椭圆弧| A 50,50 0 0 1 100,100 绘制椭圆弧到(100,100)点|
|Z|结束当前路径并闭合| Z 闭合路径|

• Rectangle的圆角设置 ： RadiusX 和 RadiusY 属性可以让矩形拥有圆角效果，但要注意设置的值不能过大，否则可能会影响矩形的整体形状。例如，当矩形的宽度和高度较小时，设置过大的圆角半径可能会使矩形看起来变形。

11. 控件使用的技巧与建议

不同的控件在使用过程中也有各自的技巧和建议：
- Image控件 ：在设置 Source 属性时，要确保图像文件的路径正确，并且文件格式是支持的.bmp、.jpg或.png。如果图像文件较大，可能会影响加载速度，可以考虑对图像进行压缩处理。
- Glyphs控件 ：使用 Indices 或 UnicodeString 指定字符时，要了解字体文件中字符的偏移量或Unicode编码。同时， FontRenderingEmSize 属性可以根据实际需求调整字体大小，以达到最佳的显示效果。
- TextBlock控件 ：在使用 TextWrapping 属性时，如果选择 Wrap 模式，要注意文本框宽度的报告可能不准确，需要通过 actualWidth 和 actualHeight 属性获取正确的值。另外，对于支持的网络安全字体，要根据设计需求选择合适的字体，以确保在不同操作系统上都能正常显示。

12. 变换与动画的应用场景

变换和动画在不同的应用场景中可以发挥重要作用：
- 变换的应用场景 ：
- RotateTransform ：常用于创建旋转的图标或动画效果，如旋转的加载图标。
- ScaleTransform ：可用于实现放大或缩小的效果，如图片的缩放功能。
- TranslateTransform ：用于移动元素的位置，例如实现元素的滑动效果。
- SkewTransform ：可以创建倾斜的效果，为界面增添动态感。
- MatrixTransform ：在需要自定义复杂变换时使用，如实现特殊的扭曲效果。
- 动画的应用场景 ：
- DoubleAnimation ：可用于实现元素的淡入淡出效果，通过改变 Opacity 属性。
- PointAnimation ：常用于实现元素的移动轨迹动画，如小球的移动。
- ColorAnimation ：可用于实现颜色的渐变效果，如按钮的颜色变化。

13. JavaScript编程的扩展应用

除了前面提到的编辑属性，JavaScript还可以用于实现更复杂的交互功能：
- 事件处理 ：可以为XAML元素添加事件处理程序，如点击事件、鼠标悬停事件等。例如，为一个按钮添加点击事件处理程序：

<Button x:Name="myButton" Content="Click Me" Canvas.Left="200" Canvas.Top="200"/>

function handleButtonClick(sender, eventArgs) {
    var button = sender;
    button.Content = "Clicked!";
}

function handleLoad(control, context, sender) {
    var myButton = control.content.findName("myButton");
    myButton.addEventListener("click", handleButtonClick);
}

• 动态创建元素 ：可以使用JavaScript动态创建XAML元素并添加到界面中。例如，动态创建一个新的TextBlock：

function createTextBlock(control) {
    var newTextBlock = control.content.createFromXaml('<TextBlock Text="Dynamic Text" Canvas.Left="300" Canvas.Top="300"/>');
    var canvas = control.content.findName("Page");
    canvas.children.add(newTextBlock);
}

function handleLoad(control, context, sender) {
    createTextBlock(control);
}

通过以上对Silverlight XAML与JavaScript编程的深入探索，我们了解了各种控件、属性、变换、动画的使用方法以及JavaScript编程的应用。在实际开发中，开发者可以根据具体需求灵活运用这些技术，创造出丰富多样、交互性强的用户界面。同时，要注意各个技术点的细节和注意事项，以确保开发出高质量的应用程序。