Silverlight 2 Beta 1版本發布了，無論從Runtime還是Tools都給我們帶來了很多的驚喜，如支持框架語言Visual Basic, Visual C#, IronRuby, Ironpython，對JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步學Silverlight 2系列》文章帶您快速進入Silverlight 2開發。 本文為系列文章第10篇，主要介紹Silverlight 2中的用戶控件使用。 1.創建用戶控件 2.為用戶控件添加屬性 3.動態添加用戶控件

概述

Silverlight 2 Beta 1版本發布了，無論從Runtime還是Tools都給我們帶來了很多的驚喜，如支持框架語言Visual Basic, Visual C#, IronRuby, Ironpython，對JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步學Silverlight 2系列》文章帶您快速進入Silverlight 2開發。

本文為系列文章第10篇，主要介紹Silverlight 2中的用戶控件使用。

創建用戶控件

在Silverlight 2中，我們可以根據開發自定義控件或者創建用戶控件，以達到控件重用的目的，添加一個新的用戶控件：

編寫用戶控件實現代碼：

<Grid x:Name="LayoutRoot" Background="White">
    <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
               Opacity="0.7" Fill="#FF8A8A8A"/>
    <Border CornerRadius="15" Width="400" Height="150" Background="LightPink" Opacity="0.9">
        <StackPanel Orientation="Horizontal" Height="50">
            <Image Source="info.png" Margin="10 0 0 0"></Image>
            <Button Background="Red" Width="120" Height="40" 
                    Content="OK" Margin="10 0 0 0" FontSize="18"/>
            <Button Background="Red" Width="120" Height="40" 
                    Content="Cancel" Margin="50 0 0 0" FontSize="18"/>
        </StackPanel>
    </Border>
</Grid>

在需要使用該用戶控件的頁面XAML中注冊命名空間：

使用用戶控件：

<Grid x:Name="LayoutRoot" Background="#46461F">
    <uc:ConfirmBox x:Name="mybox"></uc:ConfirmBox>
</Grid>

整個過程就這么簡單，運行后效果如下：

為用戶控件添加屬性

簡單的修改一下上面示例中的XAML文件，添加一個文本塊控件，用它來顯示文字提示信息。

<Grid x:Name="LayoutRoot" Background="White">
    <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
               Opacity="0.7" Fill="#FF8A8A8A"/>
    <Border CornerRadius="15" Width="400" Height="150" Background="LightPink" Opacity="0.9">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="60"></RowDefinition>
                <RowDefinition Height="90"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <TextBlock x:Name="message" FontSize="18" Foreground="White"
                       HorizontalAlignment="Left" VerticalAlignment="Center"
                       Margin="50 20 0 0"/>
            <StackPanel Orientation="Horizontal" Height="50" Grid.Row="1">
                <Image Source="info.png" Margin="10 0 0 0"></Image>
                <Button Background="Red" Width="120" Height="40" 
                    Content="OK" Margin="10 0 0 0" FontSize="18"/>
                <Button Background="Red" Width="120" Height="40" 
                    Content="Cancel" Margin="50 0 0 0" FontSize="18"/>
            </StackPanel>
        </Grid>
    </Border>
</Grid>

定義屬性：

public partial class ConfirmBox : UserControl
{
    public ConfirmBox()
    {
        InitializeComponent();
    }

    public String Message
    {
        get { return this.message.Text; }
        set { this.message.Text = value; }
    }
}

在頁面使用用戶控件的屬性，XAML編輯器能夠識別出屬性并提示：

為ConfirmBox控件的Message屬性賦值：

<Grid x:Name="LayoutRoot" Background="#46461F">
    <uc:ConfirmBox x:Name="mybox" Message="使用用戶控件成功"></uc:ConfirmBox>
</Grid>

運行后效果如下所示：

動態添加用戶控件

用戶控件可以動態的添加到頁面中，修改一下Page.xaml中的XAML代碼，放入一個Canvas作為用戶控件的容器。

<Grid x:Name="LayoutRoot" Background="#46461F">
    <Canvas x:Name="ContainerCanvas">
        
    </Canvas>
</Grid>

編寫添加用戶控件代碼：

private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
{
    ConfirmBox confirmbox = new ConfirmBox();

    confirmbox.Message = "動態添加用戶控件成功！";

    ContainerCanvas.Children.Add(confirmbox);
}

運行后效果如下所示，當然我們也可以控制用戶控件顯示的位置等。

結束語

本文簡單介紹了在Silverlight 2中使用用戶控件，包括創建用戶控件、添加屬性、動態添加用戶控件等內容，你可以從這里下載本文示例代碼。

下一篇：一步一步學Silverlight 2系列（11）：數據綁定