65.9K
CodeProject 正在变化。 阅读更多。
Home

Silverlight 2.0 示例：第一部分 - Silverlight 元素：面板和控件

Nick Polyak
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.74/5 (24投票s)

2008 年 9 月 24 日

CPOL

8分钟阅读

viewsIcon

69793

downloadIcon

1507

Silverlight 2.0 教程第一部分

引言

这是教程的第一部分，但也有第 0 部分。您可以通过以下链接访问它：第 0 部分。教程的第 0 部分是入门级的。在这里，我们将转向更高级的概念。特别是，我们将假设读者熟悉 C# 及其使用的大多数面向对象概念，例如继承。我们还将假设读者对 Visual Studio 2008 有一些基本的了解。

本期将包含多个简单的示例，展示如何使用 Silverlight 元素：面板和控件，同时展示 Silverlight 的工作方式。

面板和控件概述

Silverlight 2.0 附带许多内置对象，可用于构建业务逻辑应用程序。这些对象又分为面板和控件。面板是包含其他 GUI 对象（其子对象）的 GUI 对象。实际上，任何可视化对象都可以放置在面板内：其他面板、控件等。面板的主要目的是定位其子对象。控件通常用于触发应用程序的某些业务逻辑行为或提供（并更改）某些业务逻辑值。

有关 Silverlight 2.0 Beta 2 控件的综合演示，请查看此网站。

面板和控件都继承自 FrameworkElement 类。下图显示了面板和控件的类层次结构。

SilverlightObjectsInheritanceDiagram.JPG

ContentControl 有一个“Content”属性，可用于包含其他控件（对于 Silverlight 2.0 Beta 而言，尚未完全如此）。ItemsControl 用于显示对象集合。ItemControl 的一个示例是 ListBox。

控件

在本节中，我们将单独考虑控件示例。

Button

Button 是一个 ContentControl，其主要目的是在单击时触发某些业务逻辑。单击后，按钮会恢复到原始状态，并准备好下一次单击。

这是强调 Button 工作方式的简单项目源代码

这是项目的屏幕截图

ButtonProject.jpg

每次单击此按钮时，显示的点击次数都会增加。现在，让我们讨论代码。正如在本教程的第 0 部分中所述，我们大多数时候不需要修改 App.xaml 和 App.xaml.cs 文件。因此，让我们看一下解决方案中的 Page.xaml 和 Page.xaml.cs 文件。

这是 Page.xaml 文件的内容

<UserControl x:Class="ButtonSample.Page"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <Button 
            x:Name="MyButton"
            Width="150"
            Height="25"
            Content="Clicked 0 Times"/>
    </Grid>
</UserControl>

我们可以看到一个简单的按钮位于网格内。按钮有一个名称（x:Name="MyButton"）。Name 用于从 C# 代码访问此控件或元素（我们将在下面进一步讨论）。它还设置了 Width、Height 和 Content 属性。您可以修改或删除这些属性并观察按钮的变化，以此来玩转按钮。现在，让我们看看 Page.xaml.cs 文件中的 C# 代码。这是其内容

public partial class Page : UserControl
{
    int numClicks = 0;

    public Page()
    {
        InitializeComponent();
        MyButton.Click += new RoutedEventHandler(MyButton_Click);
    }

    void MyButton_Click(object sender, RoutedEventArgs e)
    {
        numClicks++;

        MyButton.Content = "Clicked " + numClicks + " times.";
    }
}

查看 Page() 构造函数。我们可以注意到，在该构造函数中，我们像对待类成员一样引用 MyButton。是的，它确实是类的一个成员；我们通过在 XAML 代码中将其命名为“MyButton”来实现这一点。现在，我们所要做的就是指定单击按钮时所需的行为。这可以通过向“Click”事件添加处理程序来实现

MyButton.Click += new RoutedEventHandler(MyButton_Click);

并通过创建一个名为 MyButton_Click 的函数作为处理程序的正文

void MyButton_Click(object sender, RoutedEventArgs e)
{
    numClicks++;
    MyButton.Content = “Clicked “+ numClicks + ” times.”;
}

日期选择器

DatePicker 是一个允许选择日期的控件。所选日期由 DatePicker 的 SelectedDate 属性指定。这是 DatePicker 示例的源代码

该示例允许用户使用 DatePicker 选择日期。然后，每当单击底部的按钮时，按钮的内容就会更改为选定的日期

DatePickerSample.jpg

请注意，为了使 DatePicker 示例能够编译，我们必须将 System.Windows.Controls.Extended 程序集添加到项目的引用中。这也在 Page.xaml 文件中通过以下行反映出来

xmlns:extended="clr-namespace:System.Windows.Controls;
                assembly=System.Windows.Controls.Extended"

此行使“extended”成为 System.Windows.Controls.Extended 程序集中的 System.Windows.Controls 命名空间的功能的 XAML 命名空间。稍后，在 XAML 代码中，我们可以通过在 DatePicker 控件前添加“extended:”前缀来找到它

<extended:DatePicker
    x:Name=”MyDatePicker”
    HorizontalAlignment=”Center”
    VerticalAlignment=”Center”>
</extended:DatePicker>

最后，如果我们查看 C# 代码，我们会注意到 Button 的 Content 属性设置为 DatePicker 的 SelectedDate 属性

ListBox

ListBox 是一个 ItemsControl。它的目的是将多个项显示为列表。它可以选择其中一个项。这是一个非常简单的示例

（将在本教程的后续部分中呈现更复杂的绑定示例。）

ListBoxSample.jpg

这是 Page.xaml 文件中有趣的部分

<ListBox Width=”100″ Height=”100″>
    <ListBoxItem Content=”Item1″/>
    <ListBoxItem Content=”Item2″/>
    <ListBoxItem Content=”Item3″/>
</ListBox>

您可以看到 ListBox 包含多个 ListBoxItem。所选项通过 ListBox 的 SelectedItem 属性进行引用。

演示控件

还有许多其他重要的控件。由于我没有时间为它们全部提供示例，因此我将在本节中简要介绍其中一些

  • Border - 完全是视觉控件，没有任何特定行为。它为其内容的边框提供视觉呈现。
  • CheckBox - 一个具有两种状态的控件：“已单击”和“未单击”。其布尔属性 IsClicked 反映其状态。
  • GridSplitter - 允许调整 GridPanel 内的行或列的大小。
  • RadioButton - 允许创建互斥的单选按钮组：如果一个处于按下状态，则其他按钮均不处于按下状态。
  • Slider - 一个滑块控件。其 Value 属性指定滑块移动的距离。
  • TextBlock - 只是显示文本的一种方式，用户无法编辑。文本字符串存储在其 Text 属性中。
  • TextBox - 表示可编辑文本。文本字符串由其 Text 属性反映。
  • DataGrid - 值得一个单独的部分。允许以表格格式呈现数据。
  • TabControl - 允许在同一窗口中将多个屏幕显示为选项卡。
  • ToolTip - 将弹出消息与任何控件关联。当鼠标悬停在控件上时，将显示此消息。

面板

如前所述，面板是 Silverlight 可视对象的容器，它们决定了对象的位置和放置方式。

画布

Canvas 是一个面板，它通过坐标来定位其子对象（对象距离面板左侧的距离，以及距离顶部的距离）。样本代码可从此处下载

下图显示了一个位于 Canvas 上方的 Button，距离顶部 200 个通用像素，距离左侧 100 个通用像素。

CanvasSample.jpg

相应的 XAML 代码如下

<Canvas x:Name=”LayoutRoot” Background=”White”>
    <Button 
        Canvas.Left=”100″ 
        Canvas.Top=”200″
        Content=”Hello World”/>
</Canvas>

如您所见，Canvas.Left 属性设置了按钮的水平位置，Canvas.Top 属性设置了垂直位置。

StackPanel

StackPanel 允许将可视化对象一个接一个地放置，垂直或水平放置。我们只能使用它们的 Margin 属性来间隔对象。Margin 由 4 个数字组成，按相同顺序指定：与左侧的距离、与顶部的距离，以及下一个元素之前与右侧和底部的额外空间。这是 StackPanel 示例的源代码

下图显示了该示例的屏幕截图

StackPanelSample.jpg

该示例包含两个 StackPanel：Vertical 和 Horizontal。水平 StackPanel 位于垂直 StackPanel 内部。这是相应的 XAML

<StackPanel
    x:Name=”LayoutRoot” 
    Background=”White”>
    <Button 
        Width=”200″
        Height=”25″
        Margin=”0,10,0,0″
        Content=”Vertical Button 1″/>
    <Button 
        Width=”200″
        Height=”25″
        Margin=”0,10,0,0″
        Content=”Vertical Button 2″/>
    <StackPanel 
        Margin=”0,10,0,0″
        Orientation=”Horizontal”>
        <Button 
            Width=”150″
            Height=”25″
            Margin=”10,0,0,0″
            Content=”Horizontal Button 1″/>
        <Button 
            Width=”150″
            Height=”25″
            Margin=”10,0,0,0″
            Content=”Horizontal Button 2″/>
    </StackPanel>
</StackPanel>

我们可以看到顶层 StackPanel 具有垂直（默认）方向，并包含两个 Button 和另一个 StackPanel 作为子项。借助 Margin 属性，Button 和子 StackPanel 之间垂直间隔 10 个通用像素。子 StackPanel 具有水平方向（由“Orientation”属性控制），并包含两个水平间隔 10 个通用像素的按钮。

Grid

Grid 允许将它占用的区域分割成行和列。可以有不同数量的行和列；行可以有不同的高度，列可以有不同的宽度。这是 Grid 的代码示例

运行时，此示例会生成以下窗口

GridSample.jpg

让我们看一下 XAML

<Grid x:Name=”LayoutRoot” Background=”White”>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width=”80″/>
        <ColumnDefinition Width=”80″/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height=”55″/>
        <RowDefinition Height=”55″/>
    </Grid.RowDefinitions>
    <TextBlock 
        Grid.Row=”0″
        Grid.Column=”0″
        Text=”Cell (0, 0)”/>        
    <TextBlock 
        Grid.Row=”0″
        Grid.Column=”1″
        HorizontalAlignment=”Right”
        Text=”Cell (1, 0)”/>
    <TextBlock 
        Grid.Row=”1″
        Grid.Column=”0″
        Text=”Cell (0, 1)”/>
    <TextBlock 
        Grid.Row=”1″
        Grid.Column=”1″
        VerticalAlignment=”Bottom”
        Text=”Cell (1, 1)”/>
</Grid>

行和列分别由 RowDefinition 和 ColumnDefinition 标签定义。可以通过定义 Grid.Row 和 Grid.Column 属性将项放置到特定单元格。在每个单元格内，项的位置由 HorizontalAlignment 和 VerticalAlignment 属性控制。此外，我们还可以使用 Margin 属性在每个单元格内定位元素。

结论

在本教程的这一部分，我们介绍了几个 Silverlight 控件和面板，它们是业务逻辑应用程序的构建块。稍后，我们将使用它们来创建更酷的东西。

如果您喜欢这篇文章，请评分

如果您不喜欢，请给我一些关于如何写出更好文章的建议。谢谢。

© . All rights reserved.