一步一步學Silverlight 2系列（10）：使用使用者控制項

概述

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）：資料繫結