【李会军】一步一步学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中，我们可以根据开发自定义控件或者创建用户控件，以达到控件重用的目的，添加一个新的用户控件：ITPUB个人空间a/]+\8Ff'_

f{AokT,U.]z9k%r0

编写用户控件实现代码：

<Gridx:Name="LayoutRoot"Background="White">
!lO%G
hF5^UQ
q2L0<RectangleHorizontalAlignment="Stretch"VerticalAlignment="Stretch"
ob:q~P%P?{ c0Opacity="0.7"Fill="#FF8A8A8A"/>
\ pecB0<BorderCornerRadius="15"Width="400"Height="150"Background="LightPink"Opacity="0.9">ITPUB个人空间PuA'c)h1\YB5E
<StackPanelOrientation="Horizontal"Height="50">
pL:W
DR(Tw,V%\0<ImageSource="info.png"Margin="10 0 0 0"></Image>
&wA.\S~u.e w1\n
F	p8j0<ButtonBackground="Red"Width="120"Height="40"ITPUB个人空间A
h0]1nnh3i6N;K
Content="OK"Margin="10 0 0 0"FontSize="18"/>ITPUB个人空间8p$`zC$_
<ButtonBackground="Red"Width="120"Height="40"ITPUB个人空间PRL+N6]+wzB6|
Content="Cancel"Margin="50 0 0 0"FontSize="18"/>
+K(YU/aQ4Q-`0</StackPanel>ITPUB个人空间uQ'\ZI0GPw,J`
</Border>
R0F-kT ^0</Grid>

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

使用用户控件：

<Gridx:Name="LayoutRoot"Background="#46461F">ITPUB个人空间 xB.T
Vk
zK3I
p
<uc:ConfirmBoxx:Name="mybox"></uc:ConfirmBox>
"B
v8Ucv2h|PY@0</Grid>

整个过程就这么简单，运行后效果如下：
(e \'\lb/L,p'j;A0

G8D u;{9{#V \0

为用户控件添加属性

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

<Gridx:Name="LayoutRoot"Background="White">
B:Y]5lSVC~G0<RectangleHorizontalAlignment="Stretch"VerticalAlignment="Stretch"
s1dvseL(E	a(w/Y.i0Opacity="0.7"Fill="#FF8A8A8A"/>
 E#iy@;Nr"]0<BorderCornerRadius="15"Width="400"Height="150"Background="LightPink"Opacity="0.9">ITPUB个人空间%p]_[2a#v;d#E
<Grid>
F1ON:A(Z2PBw
YQ0<Grid.RowDefinitions>ITPUB个人空间 S7nff%gd*YM"k7x
<RowDefinitionHeight="60"></RowDefinition>ITPUB个人空间S&wL"HJ\
<RowDefinitionHeight="90"></RowDefinition>ITPUB个人空间)o6Q8Hs8fr#^~zk
</Grid.RowDefinitions>ITPUB个人空间-Z?Y
to*E3{
<Grid.ColumnDefinitions>ITPUB个人空间B+DF.YB;z8J5TC(y
O
<ColumnDefinition></ColumnDefinition>ITPUB个人空间}u]7C,b
j
</Grid.ColumnDefinitions>ITPUB个人空间MVbi)\9]/x
d7T
<TextBlockx:Name="message"FontSize="18"Foreground="White"
#A'i7qMuG0Mi0HorizontalAlignment="Left"VerticalAlignment="Center"ITPUB个人空间.e+^s1p/J3^/N
Margin="50 20 0 0"/>
ctW;`.o_tL%J%N|0<StackPanelOrientation="Horizontal"Height="50"Grid.Row="1">
FY"d[arq5N)IJfU0<ImageSource="info.png"Margin="10 0 0 0"></Image>ITPUB个人空间`Z@Z8x+S+p
<ButtonBackground="Red"Width="120"Height="40"
3ZeH1}	WC8r0Content="OK"Margin="10 0 0 0"FontSize="18"/>ITPUB个人空间+t`'Zo L
<ButtonBackground="Red"Width="120"Height="40"ITPUB个人空间*_AE)Tx,gQ/D
Content="Cancel"Margin="50 0 0 0"FontSize="18"/>
+`/E J0V,g8l4z0</StackPanel>
&RVP.QHc0</Grid>ITPUB个人空间:DqT
CRV
</Border>ITPUB个人空间E C2f3l5o2t~6C8C
</Grid>

定义属性：

public partial classConfirmBox:UserControl
b`#Bnq+J0{ITPUB个人空间.A4`$nx
]-t
publicConfirmBox()ITPUB个人空间;QpDz/{
t
{ITPUB个人空间/t1e
{'M:tL+[:g7@
InitializeComponent();
n5d]+KWq$~{0}
@g"Ioj_/Um0
2OB7Q"Y*\0publicStringMessage

M0XDH%ltzO8H0{ITPUB个人空间kW3zC%Z
C_NK)O
get{return this.message.Text; }
W3a%Za
?I`9w0set{this.message.Text =value; }ITPUB个人空间R/R5[5?^&X
}
}(RB$N.SG)G	}g+mb0}

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

为ConfirmBox控件的Message属性赋值：

<Gridx:Name="LayoutRoot"Background="#46461F">ITPUB个人空间#LoNnYv$ZZ
<uc:ConfirmBoxx:Name="mybox"Message="使用用户控件成功"></uc:ConfirmBox>ITPUB个人空间pVuW
T9h7I1UH/B.vn
</Grid>

运行后效果如下所示：

动态添加用户控件

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

<Gridx:Name="LayoutRoot"Background="#46461F">
$RfrL
q0<Canvasx:Name="ContainerCanvas">
7?qtY~i4OGt]0ITPUB个人空间3Z!gK4Yc/A;h
znK%]
</Canvas>
5l!TD,W%U]A5p.c0</Grid>

编写添加用户控件代码：

private voidLayoutRoot_Loaded(objectsender,RoutedEventArgse)
#};B9o4Z,Bn0{ITPUB个人空间fo$j,eSw:mb~1r1q
ConfirmBoxconfirmbox =newConfirmBox();ITPUB个人空间cA5h
Yed
ITPUB个人空间p6kSS6l-^+H
x*Y&{
confirmbox.Message ="动态添加用户控件成功！";
A.C7z{WBh0
M"m O:P`j
W0ContainerCanvas.Children.Add(confirmbox);ITPUB个人空间]3m:@0w\:mBX-g4{W
}

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

结束语

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