XAML与Silverlight布局指南

### XAML与Silverlight布局指南 #### 1. XAML数据绑定 XAML中的数据绑定是一项强大的功能，它能在源对象和目标控件之间建立联系，实现信息的传递。下面介绍单向绑定和双向绑定的相关内容。 ##### 1.1 单向绑定 单向绑定可将一个元素的属性值传递给另一个元素。例如，有一个简单的窗口，包含一个滑块（Slider）和一个文本块（TextBlock）。当拖动滑块时，文本的字体大小会相应改变。 ```xml <Slider x:Name="sliderFontSize" Margin="3" Minimum="1" Maximum="40" Value="10"> </Slider> <TextBlock Margin="10" Text="Simple Text" x:Name="lblSampleText" FontSize="{Binding ElementName=sliderFontSize, Path=Value}" > </TextBlock> ``` 上述代码中，`Binding` 是一个XAML标记扩展，`ElementName` 指明源元素，`Path` 指明源元素的属性。此绑定表达式将滑块的 `Value` 属性值复制到文本块的 `FontSize` 属性。 单向绑定的优点是，无论源元素如何修改，目标元素都会自动更新。但如果直接设置目标元素的属性，会破坏绑定关系。例如： ```csharp private void cmd_SetLarge(object sender, RoutedEventArgs e) { lblSampleText.FontSize = 30; } ``` 此代码直接设置文本块的字体大小，滑块位置不会更新，且会破坏字体大小的绑定。 ##### 1.2 双向绑定 双向绑定可使值在源元素和目标元素之间双向流动。只需设置 `Binding` 的 `Mode` 属性为 `TwoWay` 即可。 ```xml <TextBlock Margin="10" Text="Simple Text" Name="lblSampleText" FontSize="{Binding ElementName=sliderFontSize, Path=Value, Mode=TwoWay}" > </TextBlock> ``` 在包含文本框的示例中，双向绑定很有用。用户可通过拖动滑块或在文本框中输入来设置字体大小。 ```xml <TextBox Text="{Binding ElementName=lblSampleText, Path=FontSize, Mode=TwoWay}"> </TextBox> ``` 需要注意的是，默认情况下，文本框失去焦点时才会将值应用到滑块，不过可以进行修改。 #### 2. Silverlight布局容器 在用户界面设计中，布局容器用于组织内容，使其美观、实用且灵活。Silverlight继承了WPF的灵活布局模型，提供了多种布局容器。 ##### 2.1 布局容器概述 Silverlight窗口只能容纳一个元素，为了添加多个元素，需要使用布局容器。所有布局容器都继承自 `System.Windows.Controls.Panel` 类，该类有 `Background` 和 `Children` 两个公共属性。 Silverlight提供的核心布局容器如下表所示： | 名称 | 描述 | | ---- | ---- | | StackPanel | 将元素水平或垂直堆叠，常用于复杂页面的小部分。 | | WrapPanel | 将元素排列成多行，水平方向从左到右，垂直方向从上到下，在Silverlight Toolkit中可用。 | | DockPanel | 将元素对齐到容器的整个边缘，在Silverlight Toolkit中可用。 | | Grid | 根据不可见的表格将元素排列成行和列，是最灵活和常用的布局容器。 | | Canvas | 使用固定坐标绝对定位元素，是最简单但灵活性最低的布局容器。 | 布局容器可以嵌套使用，典型的用户界面通常从 `Grid` 开始，再包含其他布局容器来组织小元素组。 ##### 2.2 面板背景 所有 `Panel` 元素都有 `Background` 属性，用于设置面板背景。该属性使用 `Brush` 对象，可使用 `SolidColorBrush` 设置纯色背景，也可使用 `LinearGradientBrush` 或 `ImageBrush` 设置更复杂的背景。 设置背景颜色的方法有多种： - 使用 `Colors` 类中的预定义颜色： ```csharp layoutRoot. ```