深入理解XAML与Silverlight布局系统

### 深入理解 XAML 与 Silverlight 布局系统 #### 1. XAML 基础与重要性 XAML（可扩展应用程序标记语言）在 Silverlight 应用开发中扮演着关键角色。在设计应用程序时，虽然可以借助 Visual Studio 2010 或 Expression Blend 3 等工具通过拖放操作生成页面，但学习 XAML 语法仍然十分必要。 Silverlight 使用两种标记扩展来增强 XAML 功能： - **StaticResource 扩展**：用于引用资源。 - **Binding 扩展**：用于连接不同对象的属性。 理解 XAML 对 Silverlight 应用设计至关重要，它有助于掌握关键概念，确保获得所需的标记。而且，很多任务使用手写 XAML 完成会更加便捷，例如在 Visual Studio 2010 中定义资源、创建控件模板、编写数据绑定表达式和定义动画等。在 Visual Studio 2008 中，手写 XAML 更是必不可少，因为它没有图形化设计支持。 #### 2. Silverlight 布局系统概述 在用户界面设计中，合理组织内容至关重要，特别是在浏览器托管的应用程序中，由于应用可能在各种不同的计算机和设备上使用，且无法控制浏览器窗口的大小，这使得布局任务变得更加棘手。 幸运的是，Silverlight 继承了 WPF 极其灵活的布局模型的重要部分。通过使用布局容器，可以将内容组织起来。每个容器都有自己的布局逻辑，例如堆叠元素、按网格排列或使用固定坐标系定位等。甚至可以创建具有自定义布局逻辑的容器。 #### 3. 核心布局容器 Silverlight 的布局容器均继承自抽象的 `System.Windows.Controls.Panel` 类，该类添加了 `Background` 和 `Children` 两个公共属性。`Background` 用于设置面板背景的画刷，`Children` 是存储在面板中的元素集合。 Silverlight 提供了多种布局容器，如下表所示： | 名称 | 描述 | | ---- | ---- | | StackPanel | 将元素水平或垂直堆叠，通常用于较大、更复杂页面的小部分。 | | WrapPanel | 将元素排列成一系列换行的行或列，在 Silverlight Toolkit 中可用。 | | DockPanel | 将元素对齐到容器的整个边缘，在 Silverlight Toolkit 中可用。 | | Grid | 根据不可见的表格将元素排列成行和列，是最灵活和常用的布局容器之一。 | | Canvas | 允许使用固定坐标绝对定位元素，是最简单但灵活性最低的布局容器。 | 布局容器可以嵌套使用，典型的用户界面通常以 `Grid` 开始，再包含其他布局容器来排列小元素组。 #### 4. 面板背景设置 所有 `Panel` 元素都通过 `Background` 属性引入了背景概念。该属性使用 `Brush` 对象，这使得可以使用纯色（如 `SolidColorBrush`）或更复杂的填充（如渐变或位图）来填充背景和前景内容。 以下是设置页面为浅蓝色背景的代码示例： ```csharp layoutRoot.Background = new SolidColorBrush(Colors.AliceBlue); ``` 也可以通过指定 RGB 值和透明度（alpha 值）来创建颜色： ```csharp int red = 0; int green = 255; int blue = 0; layoutRoot.Background = new SolidColorBrush(Color.FromArgb(255, red, green, blue)); ``` 在 XAML 中设置颜色更加便捷，可以直接使用颜色名称或颜色代码： ```xml <Grid x:Name="layoutRoot" Background="Red"> ``` 等价于： ```xml <Grid x:Name="layoutRoot"> <Grid.Background> <SolidColorBrush Color="Red"></SolidColorBrush> </Grid.Background> </Grid> ``` 使用颜色代码时，可以使用 `#rrggbb` 或 `#aarrggbb` 格式： ```xml <Grid x:Name="layoutRoot" Background="#FFFF0000"> ``` 默认情况下，布局面板的背景设置为 `null`，这意味着任何下方的内容都会显示出来，但布局容器将无法接收鼠标事件。 #### 5. 边框元素 布局容器可以设置背景，但不能绘制边框轮廓。`Border` 元素可以解决这个问题，它接受一个嵌套内容（通常是布局面板）并在其周围添加背景或边框。 `Border` 类的主要属性如下表所示： | 名称 | 描述 | | ---- | ---- | | Background | 使用 `Brush` 对象设置边框内所有内容后面的背景。 | | BorderBrush | 使用 `Brush` 对象设置边框边缘的填充。 | | BorderThickness | 设置边框每一侧的宽度（以像素为单位）。 | | CornerRadius | 圆角效果，值越大，圆角越明显。 | | Padding | 在边框和内部内容之间添加间距。 | 以下是一个简单的带有边框的按钮示例： ```xml <Border Margin="25" Background="LightYellow" BorderBrush="SteelBlue" Bo ```