【李会军】一步一步学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中，我们可以根据开发自定义控件或者创建用户控件，以达到控件重用的目的，添加一个新的用户控件：
2~3z\q2KH@.?#R0
\P*Ff l{7O0

编写用户控件实现代码：

<Gridx:Name="LayoutRoot"Background="White">
rh"fc~8D0<RectangleHorizontalAlignment="Stretch"VerticalAlignment="Stretch"ITPUB个人空间]#fCk{
Opacity="0.7"Fill="#FF8A8A8A"/>
S0T'R5y!i*f'D0<BorderCornerRadius="15"Width="400"Height="150"Background="LightPink"Opacity="0.9">ITPUB个人空间TL}'aO.z
<StackPanelOrientation="Horizontal"Height="50">
0w5D!W
k2Ee0<ImageSource="info.png"Margin="10 0 0 0"></Image>ITPUB个人空间&r"C2P~ X/n6i
<ButtonBackground="Red"Width="120"Height="40"ITPUB个人空间!rsESc!OV]5L
Content="OK"Margin="10 0 0 0"FontSize="18"/>
V`'HYCL&K T;k3g0<ButtonBackground="Red"Width="120"Height="40"ITPUB个人空间EU~
R)qOn-t+F3@
Content="Cancel"Margin="50 0 0 0"FontSize="18"/>ITPUB个人空间Tz*y3v,Mx'kl(wq
</StackPanel>
3~7G
st}0</Border>ITPUB个人空间n\*P3T(IIfp
</Grid>

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

使用用户控件：

<Gridx:Name="LayoutRoot"Background="#46461F">
OR-Z,A\Q8xC&v0<uc:ConfirmBoxx:Name="mybox"></uc:ConfirmBox>ITPUB个人空间B[h	O5H/\7bv8j
</Grid>

整个过程就这么简单，运行后效果如下：
i5u#qwF0ITPUB个人空间q!Nttm@YOq

为用户控件添加属性

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

<Gridx:Name="LayoutRoot"Background="White">ITPUB个人空间N4F@WF^x!e
<RectangleHorizontalAlignment="Stretch"VerticalAlignment="Stretch"
:W'W$_	oF7aGG8w0Opacity="0.7"Fill="#FF8A8A8A"/>
)n2k1p5NRhn0<BorderCornerRadius="15"Width="400"Height="150"Background="LightPink"Opacity="0.9">
x9O-y7zaG
Oh1Dp,U0<Grid>ITPUB个人空间
b:S	z:}:T0V'\
<Grid.RowDefinitions>
8z/fZU'E]m$zUQ-b
c0<RowDefinitionHeight="60"></RowDefinition>ITPUB个人空间{.d,E0X!{B
<RowDefinitionHeight="90"></RowDefinition>ITPUB个人空间\;EACZ
[
</Grid.RowDefinitions>ITPUB个人空间am%umr[R&f
<Grid.ColumnDefinitions>ITPUB个人空间Y EO[A2DVnppY
<ColumnDefinition></ColumnDefinition>ITPUB个人空间$F3}?G2jCQ&S
</Grid.ColumnDefinitions>ITPUB个人空间xH+Z'GA g/v
<TextBlockx:Name="message"FontSize="18"Foreground="White"
0Q#O@SX3xa4q0HorizontalAlignment="Left"VerticalAlignment="Center"ITPUB个人空间t	z8C
K/c|k
Margin="50 20 0 0"/>
s&i!J"@i~&x0<StackPanelOrientation="Horizontal"Height="50"Grid.Row="1">ITPUB个人空间#D/_9F+F'QI
<ImageSource="info.png"Margin="10 0 0 0"></Image>ITPUB个人空间i"V2I-G(u5pC+mx6D
<ButtonBackground="Red"Width="120"Height="40"ITPUB个人空间[#o-~Lez
Content="OK"Margin="10 0 0 0"FontSize="18"/>
 zK5]7p$s4zs;m0<ButtonBackground="Red"Width="120"Height="40"
9T q#l BP,mD0^0Content="Cancel"Margin="50 0 0 0"FontSize="18"/>ITPUB个人空间+f3k)]*Oi4J
</StackPanel>
3pVYO.}
Y)zO0</Grid>
UW5n/U5I5S2|a}0</Border>ITPUB个人空间pW
]Ub
@/i,o2z{
</Grid>

定义属性：

public partial classConfirmBox:UserControlITPUB个人空间"c2w![
O3i:P5zoS
{ITPUB个人空间 G,NFA??s
publicConfirmBox()
pNj
s0~F+V/?0{
,YmNjw,NF)~0InitializeComponent();ITPUB个人空间:wEX(Vwbo!l2l
}ITPUB个人空间L*T
]Lov-Y
ITPUB个人空间
`/w4Z
\u
publicStringMessage
P2A_*\wa9y0{
N'Zt/|]1D`.p!P0get{return this.message.Text; }ITPUB个人空间l yf*AO gKO#o
set{this.message.Text =value; }ITPUB个人空间'S;{({*|U;q3S&N_%i%G
}
[nwmjA0}

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

为ConfirmBox控件的Message属性赋值：

<Gridx:Name="LayoutRoot"Background="#46461F">ITPUB个人空间:@+z@4VH5q~wm
<uc:ConfirmBoxx:Name="mybox"Message="使用用户控件成功"></uc:ConfirmBox>ITPUB个人空间aRA8fT;z&?
</Grid>

运行后效果如下所示：

动态添加用户控件

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

<Gridx:Name="LayoutRoot"Background="#46461F">ITPUB个人空间!B;mwn"OW
<Canvasx:Name="ContainerCanvas">
~,M,]yX|]3c0
mXMJ
y1Dzb0</Canvas>ITPUB个人空间/s{-H\7z0QiG6YJC\
</Grid>

编写添加用户控件代码：

private voidLayoutRoot_Loaded(objectsender,RoutedEventArgse)ITPUB个人空间7X&KNhZ2A!k
{

M Z8c`i$pG0ConfirmBoxconfirmbox =newConfirmBox();
(z9wm%l-t,k0
5B6W"o2Y
ph0confirmbox.Message ="动态添加用户控件成功！";ITPUB个人空间*l#n"t{V
m*d

VG;s
kmu8l0ContainerCanvas.Children.Add(confirmbox);ITPUB个人空间t4i.l+C'r!v1r;_
}

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

结束语

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