演练：创建您的第一个 Silverlight 应用程序

演练：创建您的第一个 Silverlight 应用程序

 

Silverlight

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

 

使用 Grid 和 StackPanel 控件创建动态布局。

 

添加核心控件和 Silverlight SDK 控件。

 

添加事件处理程序。

 

添加代码逻辑。

 

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

运行此示例

先决条件

---

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

 

Visual Studio 2010.

 

用于 Visual Studio 2010 的 Silverlight 4 Tools.

 

可以从 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 尚未打开，请在解决方案资源浏览器中双击它。

在 Visual Studio 的中心，您应该看到一个白色的矩形区域。此区域称为“设计”视图。您可以从工具箱拖动控件并且定位元素以便创建您的布局。

在“设计”视图下是 XAML 视图。可以在 XAML 视图中添加 XAML 来创建布局。在对 XAML 视图进行更改时，“设计”视图将自动更新。为了帮助您在 XAML 视图中工作，将显示 IntelliSense 并且会出现波浪线以指示错误。有关设计器功能的更多信息，请参见 用于 Visual Studio 2010 的 Silverlight 设计器。

定义网格布局

---

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

定义网格布局

在 XAML 视图中找到 Grid 元素。

 

在 Grid 开始标记中，通过使用其他颜色替换“White”来更改 Background 颜色。

键入时，您应看到一个 IntelliSense 窗口，其中包含一个可供选择的颜色列表。在您指定某一颜色后，“设计”视图将用新颜色更新。

在 Grid 开始标记中，添加 ShowGridLines 属性，并将它设置为 True，如下面的 XAML 所示。

复制

 

此属性指定添加线条以标识 Grid 中的行和列。创建 Grid 布局时，这是很有用的调试功能。

 

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

 

在“设计”视图中，您看到标识行和列的线条出现。

 

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

您的浏览器将打开并且将看到指示您定义的 Grid 的虚线，如下图中所示。

关闭浏览器返回到 Visual Studio。

添加控件

---

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

添加控件

如果还没有打开“工具箱”窗口，请打开它。

从工具箱将 TextBlock 控件拖到 XAML 视图中的 结束标记之后。

标记添加到 XAML 视图中。

 

在 TextBlock 开始标记中添加以下 Text 属性。

复制

 

在 Name TextBlock 后添加另一个带有 Text="Date:" 的 TextBlock。

 

在 Date TextBlock 后添加另一个带有 Text="Message:" 的 TextBlock。

在“设计”视图中，您可以看到 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"

 

在“设计”视图中，TextBlock 元素现在位于相应的单元格中。

 

从工具箱将 TextBox 控件拖到 XAML 视图中的消息 TextBlock 之后。

 

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

 

 

请注意，TextBox 填满整个 Grid 单元格。由于默认情况下 HorizontalAlignment 和 VerticalAlignment 属性设置为 Stretch，因此它填满该单元格。

在 TextBox 的开始标记中，将 Width 属性设置为 150。

Width="150"

 

请注意，TextBox 在 Grid 单元格中居中。

 

在 TextBox 的开始标记中，通过添加以下 HorizontalAlignment 属性将对齐方式设置为左对齐。

HorizontalAlignment="Left"

 

在 Your Name TextBox 下方，从工具箱将一个 StackPanel 控件拖动到 XAML 视图。

StackPanel 是一个用于垂直或水平堆叠元素的有用控件。在 Your Name TextBox 下方的 Grid 单元格中，将垂直堆叠两个控件。

 

在 StackPanel 的开始标记中添加以下属性。

 

从工具箱将 Calendar 控件拖动到 XAML 视图中的 StackPanel 元素内。

添加 Calendar 控件时，您会注意到标记名与其他控件稍有不同。它以“sdk:”为前缀。Calendar 控件不是核心 Silverlight 控件的一部分，并且是在另一程序集中实现的。Calendar 控件是 Silverlight SDK 的一部分。若要使用 Silverlight SDK 控件，必须添加 XML 命名空间和对该程序集的引用。当您将 Silverlight SDK 控件拖到 XAML 视图或“设计”视图时，会自动将一个 XML 命名空间添加到 MainPage.xaml 文件顶部的 标记中。正如在下面的标记中所看到的那样，sdk 命名空间使用如 Silverlight 库的前缀和映射中所述的特定 URI。

 
  
 
 
  
有关 Silverlight SDK 以及 Silverlight SDK 中的控件的更多信息，请参见Silverlight Tools和按功能分类的控件。
 
  
 
 
  
在 Calendar 的开始标记中设置以下属性。
 
  
将 SelectionMode 设置为 SingleDate 表示仅允许选择一个日期。
 
  
请注意，应使用 sdk: 前缀将日历元素与在上一步中声明的 SDK 命名空间关联。
 
  

 
  


 
  
 
 
  
从工具箱将 Button 控件拖动到 Calendar 控件之后，但在 XAML 视图中的 StackPanel 元素内。
 
  
由于 StackPanel 的 Orientation 属性设置为 Vertical，因此 Button 将显示在 Calendar 之下。
 
  
 
 
  
在 Button 的开始标记中，设置 Width、Height、HorizontalAlignment 和 Content 属性。
 
  

 
  


 
  
 
 
  
Button 控件不具有 Text 属性，但它具有 Content 属性。由于实际上可以添加其他元素（如图像或其他控件）作为 Button 的内容，因此 Button 具有 Content 属性。
 
  
 
 
  
在"文件"菜单上单击"全部保存"。
 
  
此时，所有控件均已添加。您的 XAML 应与下面的代码类似。
 
  

    
        
            
            
            
        
        
            
            
        
        
        
        
        
        
            
            
        
    



 
  
 
 
  
按 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 事件处理程序中。
 
  
 
 
  
将下面的代码添加到 okButton_Click 事件处理程序中。
 
  

 
VB 
C# 
C++ 
F# 
JScript 
 
  
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 = ""
    Else
        dateString = cal1.SelectedDate.ToString()
    End If
    message1.Text = "Hi " & name1.Text & vbCrLf & _
        "Selected Date: " & dateString
End Sub


 
  
 
 
  
按 F5 或单击"开始调试"运行应用程序。
 
  
 
 
  
在"姓名"框中键入您的姓名，在 Calendar 中选择一个日期，然后单击"确定"。
 
  
将显示您的姓名和选定的日期。下图显示浏览器窗口的一个示例。
 
  

使布局具有动态效果
 
  
 
  

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

使布局具有动态效果
 
  
在 MainPage.xaml 的 Grid.RowDefinitions 元素中，将 Height 值更改为以下内容。
 
  





 
  
Auto 大小调整表示大小由内容确定。Star 大小调整 (*) 表示大小是剩余空间的加权比例。
 
  
 
 
  
在 Grid.ColumnDefinitions 元素中，将 Width 值更改为以下内容。
 
  

 
  



 
  
 
 
  
将以下 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 应与下面的代码类似。
 

    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    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="400" d:DesignHeight="300">
    
        
            
            
            
        
        
            
            
        
        
        
                    Grid.ColumnSpan="2" Margin="10,5,10,5" FontSize="20">
                    Width="150" HorizontalAlignment="Left" Margin="0,5,0,5">
        
                            HorizontalAlignment="Left" Margin="0,5,0,5">
                            HorizontalAlignment="Left" Content="OK" Margin="0,5,0,5">
        
    


 
  
 
 
  
按 F5 或单击"开始调试"运行应用程序。
 
  
 
 
  
调整浏览器窗口的大小并注意行为。
 
  
 
 
  
单击 OK Button。
 
  
请注意，Grid 第三行的高度有所增加以容纳文本，如下图所示。
 
  

请参见
 
  
 
  


概念
Silverlight 路线图 
Silverlight 示例 
Silverlight 布局系统 
其他资源
XAML 
控件
 
  
 
 
  
引自：http://msdn.microsoft.com/zh-cn/library/cc838218(v=vs.95).aspx