[演练]创建您的第一个Silverlight应用程序-CSDN博客

本演练演示如何通过创建简单的应用程序使用 Silverlight 和 Visual Studio 开始编程。本演练演示以下概念。

使用 Grid 和 StackPanel 控件创建动态布局。
添加核心控件和 Silverlight SDK 控件。
添加事件处理程序。
添加代码逻辑。

若要查看此应用程序的运行示例，请单击下面的链接。

运行此示例

先决条件

您需要以下组件来完成本演练：

Silverlight 3.
Silverlight Tools for Visual Studio 2008.
Silverlight SDK（Silverlight Tools for Visual Studio 2008 的一部分）。
Visual Studio 2008 SP1。

可以从 Silverlight 下载站点下载所有 Silverlight 软件。

创建 Silverlight 项目

第一步是创建一个 Silverlight 项目。

创建 Silverlight 项目

使用 Visual Basic 或 Visual C# 新建一个名为 HelloSilverlight 的 Silverlight 应用程序项目。清除"在新网站中承载 Silverlight 应用程序"复选框。有关更多信息，请参见如何创建新 Silverlight 项目。
打开解决方案资源管理器，可以看到有两个文件：App.xaml 和 MainPage.xaml。

App.xaml 允许您指定应用于整个应用程序的资源和代码。MainPage.xaml 定义一个页面，该页面与网站中的页面类似。
在解决方案资源管理器中展开 MainPage.xaml 节点。

MainPage.xaml.vb 或 MainPage.xaml.cs 是您编写托管代码的代码隐藏文件。此模型与 ASP.NET 中使用的模型类似。
如果 MainPage.xaml 尚未打开，请在解决方案资源管理器中双击它。

将在 XAML 视图中打开 MainPage.xaml。可以在 XAML 视图中添加 XAML 来创建布局和设计。为了帮助您在 XAML 视图中工作，将显示 IntelliSense 并且会出现波浪线以指示错误。有关设计器功能的更多信息，请参见 Silverlight Tools for Visual Studio 2008 设计器支持。

定义网格布局

默认情况下，Silverlight 项目包含一个 Grid。Grid 允许您创建一个与 HTML 中的表类似的表类型布局。本节介绍如何创建 Grid 布局。在后面的章节中，您将学会如何使布局具有动态效果。

定义网格布局

在 XAML 视图中找到 Grid 元素。
在 Grid 开始标记中添加 Background 属性。

键入时，您应看到一个 IntelliSense 窗口，其中包含一个可供选择的项列表。
指定一种颜色，如下面的 XAML 所示。

复制代码
```
<grid x:name="LayoutRoot" background="Beige"></grid>
```
在 Grid 开始标记中，添加 ShowGridLines 属性，并将它设置为 True，如下面的 XAML 所示。

复制代码
```
<grid x:name="LayoutRoot" background="Beige" showgridlines="True"></grid>
```
此属性指定添加虚线以标识 Grid 中的行和列。创建 Grid 布局时，这是很有用的调试功能。

在 Grid 元素内添加以下 XAML 来定义三行和两列。

XAML

复制代码

<grid x:name="LayoutRoot" background="Beige" showgridlines="True"><grid.rowdefinitions><rowdefinition height="40"></rowdefinition><rowdefinition height="220"></rowdefinition><rowdefinition height="40"></rowdefinition></grid.rowdefinitions><grid.columndefinitions><columndefinition width="75"></columndefinition><columndefinition width="325"></columndefinition></grid.columndefinitions></grid>

按 F5 或单击"开始调试"工具栏按钮运行应用程序。

浏览器将打开，其中显示您所指定的背景色，如下图所示。还会看到指示您定义的 Grid 的虚线。
关闭浏览器返回到 Visual Studio。

添加控件

Silverlight 包含多个控件，可帮助您显示数据和获取用户输入。本节介绍如何向 Grid 布局中添加 TextBlock、TextBox、StackPanel、Calendar 和 Button 控件。

添加控件

打开工具箱窗口（如果尚未打开），展开"Silverlight XAML 控件"选项卡。
从工具箱将 TextBlock 控件拖到 XAML 视图中的结束标记之后。

<textblock></textblock> 标记添加到 XAML 视图中。
在 TextBlock 开始标记中添加以下 Text 属性。

复制代码
```
<textblock text="Name:"></textblock>
```
在 Name TextBlock 后添加另一个带有 Text="Date:" 的 TextBlock。
在 Date TextBlock 后添加另一个带有 Text="Message:" 的 TextBlock。

若要在 Grid 单元格中定位 TextBlock 元素，必须指定 Grid..::.Row 和 Grid..::.Column 属性。
在 Name TextBlock 的开始标记中添加以下属性。

复制代码
```
Grid.Row="0" Grid.Column="0"
```
请注意，这些属性命名为 Grid..::.Row 和 Grid..::.Column，而不仅仅是 Row 和 Column。Grid 具有 Row 和 Column 属性，而 TextBlock 却没有。但您可以将 Grid 中的 Row 和 Column 属性"附加"到 TextBlock。Grid..::.Row 和 Grid..::.Column 是称为附加属性的特殊属性。附加属性是一个将在 XAML 中使用的概念。有关更多信息，请参见附加属性概述。
在 Date TextBlock 的开始标记中添加以下属性。

复制代码
```
Grid.Row="1" Grid.Column="0"
```
在 Message TextBlock 的开始标记中添加以下属性。

复制代码
```
Grid.Row="2" Grid.Column="0"
```
将以下 ColumnSpan 附加属性添加到 Message TextBlock 以允许文本跨越两列。

复制代码
```
Grid.ColumnSpan="2"
```
从工具箱将 TextBox 控件拖动到 Message TextBlock 之后。

在开始标记中，设置以下属性。

复制代码

<textbox text="Your Name" grid.row="0" grid.column="1"></textbox>

按 F5 或单击"开始调试"运行应用程序。

下图显示浏览器窗口的一个示例。请注意，TextBox 填满整个 Grid 单元格。由于默认情况下 HorizontalAlignment 和 VerticalAlignment 属性设置为 Stretch，因此它填满该单元格。
关闭浏览器返回到 Visual Studio。
在 TextBox 的开始标记中，将 Width 属性设置为 150。

复制代码
```
Width="150"
```
在 TextBox 的开始标记中，通过添加以下 HorizontalAlignment 属性将对齐方式设置为左对齐。

复制代码
```
HorizontalAlignment="Left"
```
在 Your Name TextBox 下方，从工具箱拖动一个 StackPanel 控件。

StackPanel 是一个用于垂直或水平堆叠元素的有用控件。在 Your Name TextBox 下方的 Grid 单元格中，将垂直堆叠两个控件。
在 StackPanel 的开始标记中添加以下属性。

复制代码
```
Grid.Column="1" Grid.Row="1" Orientation="Vertical"
```
从工具箱将 Calendar 控件拖动到 StackPanel 元素内。

添加 Calendar 控件时，您会注意到标记名与其他控件稍有不同。它以 controls: 为前缀（或使用另一个前缀）。Calendar 控件不是核心 Silverlight 控件的一部分，并且是在另一程序集中实现的。Calendar 控件是 Silverlight SDK 的一部分。若要使用 Silverlight SDK 控件，必须添加 XML 命名空间和对该程序集的引用。将 Silverlight SDK 控件拖到 XAML 视图时，会自动将一个 XML 命名空间和一个引用添加到 MainPage.xaml 文件顶部的 <usercontrol> 标记中。正如在下面的标记中所看到的那样，controls 命名空间使用 System.Windows.Controls.dll 程序集。</usercontrol>

复制代码
```
<usercontrol xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"><p>有关 Silverlight SDK 以及 Silverlight SDK 中的控件的更多信息，请参见<a href="http://msdn.microsoft.com/zh-cn/library/cc838244(VS.95).aspx">Silverlight Tools</a>和<a href="http://msdn.microsoft.com/zh-cn/library/cc645075(VS.95).aspx">按功能分类的控件</a>。</p>
  </usercontrol>
```
在 Calendar 的开始标记中设置以下属性。

将 SelectionMode 设置为 SingleDate 表示仅允许选择一个日期。

复制代码
```
SelectionMode="SingleDate" HorizontalAlignment="Left"
```
从工具箱将 Button 控件拖动到 Calendar 控件之后，但在 StackPanel 元素内。

由于 StackPanel 的 Orientation 属性设置为 Vertical，因此 Button 将显示在 Calendar 之后。
在 Button 的开始标记中，设置 Width、Height、HorizontalAlignment 和 Content 属性。

复制代码
Button 控件不具有 Text 属性，但它具有 Content 属性。由于实际上可以添加其他元素（如图像或其他控件）作为 Button 的内容，因此 Button 具有 Content 属性。

在"文件"菜单上单击"全部保存"。

此时，所有控件均已添加。您的 XAML 应与下面的代码类似。

XAML

复制代码

<usercontrol xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" x:class="HelloSilverlight.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:ignorable="d" d:designwidth="640" d:designheight="480"><grid x:name="LayoutRoot" background="Beige" showgridlines="True"><grid.rowdefinitions><rowdefinition height="40"></rowdefinition><rowdefinition height="220"></rowdefinition><rowdefinition height="40"></rowdefinition></grid.rowdefinitions><grid.columndefinitions><columndefinition width="75"></columndefinition><columndefinition width="325"></columndefinition></grid.columndefinitions><textblock text="Name:" grid.row="0" grid.column="0"></textblock><textblock text="Date:" grid.row="1" grid.column="0"></textblock><textblock text="Message:" grid.row="2" grid.column="0" grid.columnspan="2"></textblock><textbox text="Your Name" grid.row="0" grid.column="1" width="150" horizontalalignment="Left"></textbox><stackpanel grid.column="1" grid.row="1" orientation="Vertical"><calendar selectionmode="SingleDate" horizontalalignment="Left"></calendar><button width="75" height="25" horizontalalignment="Left" content="OK"></button>
        </stackpanel></grid></usercontrol>

按 F5 或单击"开始调试"运行应用程序。

下图显示浏览器窗口的一个示例。可以在 TextBox 中键入文本，并且可以在 Calendar 中选择日期，但由于尚未添加代码，因此 Button 不执行任何操作。

添加代码

通过代码隐藏文件可以向 XAML 中定义的元素添加逻辑。若要以编程方式访问控件和其他元素，必须命名元素。本节介绍如何在 XAML 中命名元素、添加事件处理程序以及在代码隐藏文件中添加逻辑。

添加代码

在 XAML 视图中找到 Message TextBlock。
在 Message TextBlock 的开始标记中，添加以下 message1 Name 属性。

复制代码
```
x:Name="message1"
```
x:Name 属性唯一地标识一个元素。有关更多信息，请参见 XAML 概述。
以类似的方式将 TextBox 控件命名为 name1，将 Calendar 控件命名为 cal1，将 Button 控件命名为 okButton。

复制代码
```
x:Name="name1"
x:Name="cal1"
x:Name="okButton"
```
在 OK Button 的开始标记中键入 Click，然后按 Tab。

应出现一个如下图所示的 IntelliSense 窗口。
双击""。

Click 事件处理程序的默认名称显示在 XAML 中 (Click="okButton_Click")，并且在代码隐藏文件中创建了一个事件处理程序。
右击 Click="okButton_Click"，然后在快捷菜单中选择"定位到事件处理程序"，如下图所示。

将打开 MainPage.xam.vb 或 MainPage.xaml.cs，并且光标定位在 okButton_Click 事件处理程序中。
在"生成"菜单上单击"生成解决方案"。

生成解决方案可确保 IntelliSense 包括刚命名的控件。

将下面的代码添加到 okButton_Click 事件处理程序中。

Visual Basic

复制代码

Private Sub okButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
    Dim dateString As String
    If cal1.SelectedDate Is Nothing Then
        dateString = "<date not selected>"
    Else
        dateString = cal1.SelectedDate.ToString()
    End If
    message1.Text = "Hi " &amp; name1.Text &amp; vbCrLf &amp; _
        "Selected Date: " &amp; dateString
End Sub</date>

复制代码

private void okButton_Click(object sender, RoutedEventArgs e)
{
    string dateString;
    if (cal1.SelectedDate == null)
    {
        dateString = "<date not selected>";
    }
    else
    {
        dateString = cal1.SelectedDate.ToString();
    }
    message1.Text = "Hi " + name1.Text + "/n" +
        "Selected Date: " + dateString;
}</date>

按 F5 或单击"开始调试"运行应用程序。
在"姓名"框中键入您的姓名，在 Calendar 中选择一个日期，然后单击"确定"。

将显示您的姓名和选定的日期。下图显示浏览器窗口的一个示例。

使布局具有动态效果

当前布局是固定的。Silverlight 包括生成动态布局的多个选项。本节介绍使布局更具动态效果的技巧。

使布局具有动态效果

在 MainPage.xaml 的 Grid..::.RowDefinitions 元素中，将 Height 值更改为以下内容。

复制代码
```
<rowdefinition height="Auto"></rowdefinition><rowdefinition height="*" minheight="240"></rowdefinition><rowdefinition height="Auto"></rowdefinition>
```
Auto 大小调整表示大小由内容确定。Star 大小调整 (*) 表示大小是剩余空间的加权比例。

在 Grid..::.ColumnDefinitions 元素中，将 Width 值更改为以下内容。

复制代码

<columndefinition width="Auto"></columndefinition><columndefinition width="*"></columndefinition>

将以下 Margin 属性添加到 Name、Date 和 Message TextBlock 元素。

这表示在左侧和右侧添加 10 像素边距，在顶部和底部添加 5 像素边距。

复制代码
```
Margin="10,5,10,5"
```
将以下 Margin 属性添加到 TextBox、Calendar 和 Button。

复制代码
```
Margin="0,5,0,5"
```
将以下 FontSize 属性添加到 Message TextBlock 以增加字号。

复制代码
```
FontSize="20"
```

在"文件"菜单上单击"全部保存"。

您的 XAML 应与下面的代码类似。

XAML

复制代码

<usercontrol xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" x:class="HelloSilverlight.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:ignorable="d" d:designwidth="640" d:designheight="480"><grid x:name="LayoutRoot" background="Beige" showgridlines="True"><grid.rowdefinitions><rowdefinition height="Auto"></rowdefinition><rowdefinition height="*" minheight="240"></rowdefinition><rowdefinition height="Auto"></rowdefinition></grid.rowdefinitions><grid.columndefinitions><columndefinition width="Auto"></columndefinition><columndefinition width="*"></columndefinition></grid.columndefinitions><textblock text="Name:" grid.row="0" grid.column="0" margin="10,5,10,5"></textblock><textblock text="Date:" grid.row="1" grid.column="0" margin="10,5,10,5"></textblock><textblock x:name="message1" text="Message:" grid.row="2" grid.column="0" grid.columnspan="2" margin="10,5,10,5" fontsize="20"></textblock><textbox x:name="name1" text="Your Name" grid.row="0" grid.column="1" width="150" horizontalalignment="Left" margin="0,5,0,5"></textbox><stackpanel grid.column="1" grid.row="1" orientation="Vertical"><calendar x:name="cal1" selectionmode="SingleDate" horizontalalignment="Left" margin="0,5,0,5"></calendar><button click="okButton_Click" x:name="okButton" width="75" height="25" horizontalalignment="Left" content="OK" margin="0,5,0,5"></button>
        </stackpanel></grid></usercontrol>