【李会军】一步一步学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中，我们可以根据开发自定义控件或者创建用户控件，以达到控件重用的目的，添加一个新的用户控件：
$dq[c~Z n gf.i u0ITPUB个人空间Y G$`(`$s+L+b

编写用户控件实现代码：

<Gridx:Name="LayoutRoot"Background="White">ITPUB个人空间;YnS,n*h;Ph'qs
<RectangleHorizontalAlignment="Stretch"VerticalAlignment="Stretch"ITPUB个人空间k
W5goF|
Opacity="0.7"Fill="#FF8A8A8A"/>ITPUB个人空间!~?G6YB;?(y
<BorderCornerRadius="15"Width="400"Height="150"Background="LightPink"Opacity="0.9">ITPUB个人空间Ed}	jU3xlwu$H
<StackPanelOrientation="Horizontal"Height="50">
&_;\9emD?[0<ImageSource="info.png"Margin="10 0 0 0"></Image>
	\1Gu'D4U2b)g0<ButtonBackground="Red"Width="120"Height="40"ITPUB个人空间 ym6W(i[!@
y+}
Content="OK"Margin="10 0 0 0"FontSize="18"/>ITPUB个人空间LmN@.}4O?&t
<ButtonBackground="Red"Width="120"Height="40"
&\"|$z(T g:va6@0Content="Cancel"Margin="50 0 0 0"FontSize="18"/>ITPUB个人空间n*N@W1E`,_,c
</StackPanel>ITPUB个人空间#jFGJPl}
m;k0s!Wu
</Border>
bt^'eg
Cb-|N
h0</Grid>

在需要使用该用户控件的页面XAML中注册命名空间：

使用用户控件：

<Gridx:Name="LayoutRoot"Background="#46461F">
._H7xfm&DS0<uc:ConfirmBoxx:Name="mybox"></uc:ConfirmBox>ITPUB个人空间!I2]a/iHJ$c
</Grid>

整个过程就这么简单，运行后效果如下：ITPUB个人空间g q9c7d'z0j_ w ur
ITPUB个人空间-y/a[os6T+O

为用户控件添加属性

简单的修改一下上面示例中的XAML文件，添加一个文本块控件，用它来显示文字提示信息。

<Gridx:Name="LayoutRoot"Background="White">ITPUB个人空间,P7I`uAAd&L
<RectangleHorizontalAlignment="Stretch"VerticalAlignment="Stretch"
nb%t7j)Va0Opacity="0.7"Fill="#FF8A8A8A"/>ITPUB个人空间)^'p;M7F6`'G5g
<BorderCornerRadius="15"Width="400"Height="150"Background="LightPink"Opacity="0.9">
G%vg];ssh5ixP0<Grid>ITPUB个人空间U;]:q0lUPX
<Grid.RowDefinitions>
-VZR*oY@[0<RowDefinitionHeight="60"></RowDefinition>
nop'v'["h0<RowDefinitionHeight="90"></RowDefinition>ITPUB个人空间up0C)c$SDt
</Grid.RowDefinitions>
aVSb0<Grid.ColumnDefinitions>
#B%f$S/e1Q;ubcE0<ColumnDefinition></ColumnDefinition>
r%\JWB6S0P]0</Grid.ColumnDefinitions>
B%B$}x9M0<TextBlockx:Name="message"FontSize="18"Foreground="White"ITPUB个人空间/A(Z:L7VLZ\
HorizontalAlignment="Left"VerticalAlignment="Center"ITPUB个人空间!l;f
{HKH;n$Rx5S#e
Margin="50 20 0 0"/>ITPUB个人空间c*]X%Co
<StackPanelOrientation="Horizontal"Height="50"Grid.Row="1">
)z2i,OD1h0<ImageSource="info.png"Margin="10 0 0 0"></Image>ITPUB个人空间k$j	Gb3ht	@
<ButtonBackground="Red"Width="120"Height="40"ITPUB个人空间f3\8[	r%e`
s
Content="OK"Margin="10 0 0 0"FontSize="18"/>
.U3wHbf%dp)Y0<ButtonBackground="Red"Width="120"Height="40"
Aei7O Bo4d,Cr0Content="Cancel"Margin="50 0 0 0"FontSize="18"/>
"b'O+{9{-H]0</StackPanel>
\!mo)?v`R"Bw0</Grid>ITPUB个人空间Nl(g&s\U"Qg
v5Cp;V
</Border>
]'I'{M{B;]%SL0</Grid>

定义属性：

public partial classConfirmBox:UserControl
!j[k|dZ\ioH-a0{

q
{W5CB3XgpF`0publicConfirmBox()
!C~-I Lw0{
TlV0l5r\;X?e;[0InitializeComponent();ITPUB个人空间'v5\$x
x+ZM5v9e%FR
}ITPUB个人空间-T{r/~7V%Ui9F-L5j

4d!PX6{K@T9R0publicStringMessageITPUB个人空间3Rybob0M
{
^4i)fT.Hi}9s0get{return this.message.Text; }
dm
PuBV5r0set{this.message.Text =value; }ITPUB个人空间+C)pa4l4bA5f7b4Xqf
~
}
v%} @R
B1M2S5@0}

在页面使用用户控件的属性，XAML编辑器能够识别出属性并提示：

为ConfirmBox控件的Message属性赋值：

<Gridx:Name="LayoutRoot"Background="#46461F">
6vx7mChT7f2s0<uc:ConfirmBoxx:Name="mybox"Message="使用用户控件成功"></uc:ConfirmBox>ITPUB个人空间:U*~
c0?b{U
</Grid>

运行后效果如下所示：

动态添加用户控件

用户控件可以动态的添加到页面中，修改一下Page.xaml中的XAML代码，放入一个Canvas作为用户控件的容器。

<Gridx:Name="LayoutRoot"Background="#46461F">
9]5t.}Hxh0y
J7I`.j5{0<Canvasx:Name="ContainerCanvas">
%l7U"J H:t0ITPUB个人空间	RBT6zIc-M!|qm
</Canvas>
5`9a#i\
`0</Grid>

编写添加用户控件代码：

private voidLayoutRoot_Loaded(objectsender,RoutedEventArgse)ITPUB个人空间W9W,O8DmbSE`+g
{
_/E/yg}{E0ConfirmBoxconfirmbox =newConfirmBox();
#\RJ;j	H"[!g8y)r6?6k0ITPUB个人空间5j!nL7Q3eM/w2}
confirmbox.Message ="动态添加用户控件成功！";
mDf
S-}9U]w)l0

~&R&n\.~tRE0ContainerCanvas.Children.Add(confirmbox);
?+s1L'^M+QiSl0}

运行后效果如下所示，当然我们也可以控制用户控件显示的位置等。

结束语

本文简单介绍了在Silverlight 2中使用用户控件，包括创建用户控件、添加属性、动态添加用户控件等内容，你可以从这里下载本文示例代码。