演练：创建您的第一个 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 x:Name="LayoutRoot" Background="Beige" ShowGridLines="True">

 

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

 

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

<Grid x:Name="LayoutRoot" Background="Beige" ShowGridLines="True">
    <Grid.RowDeFinitions>
        <RowDeFinition Height="40"/>
        <RowDeFinition Height="220"/>
        <RowDeFinition Height="40"/>
    </Grid.RowDeFinitions>
    <Grid.ColumnDeFinitions>
        <ColumnDeFinition Width="75" />
        <ColumnDeFinition Width="325"/>
    </Grid.ColumnDeFinitions>
</Grid>

 

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

 

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

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

关闭浏览器返回到 Visual Studio。

添加控件

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

添加控件

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

从工具箱将 TextBlock 控件拖到 XAML 视图中的 </Grid.ColumnDeFinitions> 结束标记之后。

<TextBlock /> 标记添加到 XAML 视图中。

 

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

复制

<TextBlock Text="Name:"></TextBlock>

 

在 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 Text="Your Name" Grid.Row="0" Grid.Column="1"></TextBox>

 

请注意，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 的开始标记中添加以下属性。

<StackPanel Grid.Column="1" Grid.Row="1" Orientation="Vertical">

</StackPanel>

 

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

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

<UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"

 

有关 Silverlight SDK 以及 Silverlight SDK 中的控件的更多信息，请参见Silverlight Tools和按功能分类的控件。

 

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

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

请注意，应使用 sdk: 前缀将日历元素与在上一步中声明的 SDK 命名空间关联。

<sdk:Calendar SelectionMode="SingleDate" HorizontalAlignment="Left"></sdk:Calendar>

 

从工具箱将 Button 控件拖动到 Calendar 控件之后，但在 XAML 视图中的 StackPanel 元素内。

由于 StackPanel 的 Orientation 属性设置为 Vertical，因此 Button 将显示在 Calendar 之下。

 

在 Button 的开始标记中，设置 Width、Height、HorizontalAlignment 和 Content 属性。

<Button Width="75" Height="25" HorizontalAlignment="Left" Content="OK"></Button>

 

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

 

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

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

<UserControl
    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 x:Name="LayoutRoot" Background="Beige" ShowGridLines="True">
        <Grid.RowDeFinitions>
            <RowDeFinition Height="40"/>
            <RowDeFinition Height="220"/>
            <RowDeFinition Height="40"/>
        </Grid.RowDeFinitions>
        <Grid.ColumnDeFinitions>
            <ColumnDeFinition Width="75" />
            <ColumnDeFinition Width="325"/>
        </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">
            <sdk:Calendar SelectionMode="SingleDate"
                HorizontalAlignment="Left"></sdk: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 事件处理程序中。

 

将下面的代码添加到 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 = "<date not selected>"
    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 值更改为以下内容。

<RowDeFinition Height="Auto"/>
<RowDeFinition Height="*" MinHeight="220"/>
<RowDeFinition Height="Auto"/>

Auto 大小调整表示大小由内容确定。Star 大小调整 (*) 表示大小是剩余空间的加权比例。

 

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

<ColumnDeFinition Width="Auto" />
<ColumnDeFinition Width="*"/>

 

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

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

Margin="10,5,10,5"

 

将以下 Margin 属性添加到 TextBox、Calendar 和 Button。

Margin="0,5"

 

将以下 FontSize 属性添加到 Message TextBlock 以增加字号。

FontSize="20"

 

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

您的 XAML 应与下面的代码类似。
 
<!-- NOTE:
  By convention,the sdk prefix indicates a URI-based XAML namespace declaration
  for Silverlight SDK client libraries. This namespace declaration is valid for
  Silverlight 4 only. In Silverlight 3,you must use individual XAML namespace
  declarations for each CLR assembly and namespace combination outside the scope
  of the default Silverlight XAML namespace. For more @R_270_4045@ion,see the help
  topic "Prefixes and Mappings for Silverlight Libraries".
-->
<UserControl
    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 x:Name="LayoutRoot" Background="Beige" ShowGridLines="True">
        <Grid.RowDeFinitions>
            <RowDeFinition Height="Auto"/>
            <RowDeFinition Height="*" MinHeight="220"/>
            <RowDeFinition Height="Auto"/>
        </Grid.RowDeFinitions>
        <Grid.ColumnDeFinitions>
            <ColumnDeFinition Width="Auto" />
            <ColumnDeFinition Width="*"/>
        </Grid.ColumnDeFinitions>
        <TextBlock Text="Name:" Grid.Row="0" Grid.Column="0" Margin="10,5"></TextBlock>
        <TextBlock Text="Date:" Grid.Row="1" Grid.Column="0" Margin="10,5"></TextBlock>
        <TextBlock x:Name="message1" Text="Message:" Grid.Row="2" Grid.Column="0"
            Grid.ColumnSpan="2" Margin="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"></TextBox>
        <StackPanel Grid.Column="1" Grid.Row="1" Orientation="Vertical">
            <sdk:Calendar x:Name="cal1" SelectionMode="SingleDate"
                HorizontalAlignment="Left" Margin="0,5"></sdk:Calendar>
            <Button Click="okButton_Click" x:Name="okButton" Width="75" Height="25"
                HorizontalAlignment="Left" Content="OK" Margin="0,5"></Button>
        </StackPanel>
    </Grid>
</UserControl>

 

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

 

调整浏览器窗口的大小并注意行为。

 

单击 OK Button。

请注意，Grid 第三行的高度有所增加以容纳文本，如下图所示。

请参见

概念
Silverlight 路线图
Silverlight 示例
Silverlight 布局系统
其他资源
XAML
控件

 

引自：http://msdn.microsoft.com/zh-cn/library/cc838218(v=vs.95).aspx