.NEt专家博客!

【李会军】一步一步学Silverlight 2系列(10):使用用户控件

上一篇 / 下一篇  2008-04-11 19:33:01

概述

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个人空间E d} 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@0
Content="Cancel"Margin="50 0 0 0"FontSize="18"/>ITPUB个人空间 n*N@W1E`,_,c
</
StackPanel>ITPUB个人空间#jFG JPl} m;k0s!Wu
</
Border>
bt^'egCb-|N h0</
Grid>

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

使用用户控件:

<Gridx:Name="LayoutRoot"Background="#46461F">
._H7xfm&DS0<
uc:ConfirmBoxx:Name="mybox"></uc:ConfirmBox>ITPUB个人空间!I2]a/iH J$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)Va0
Opacity="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>
aV Sb0<
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,Cr0
Content="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\io H-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编辑器能够识别出属性并提示:


:uU"uO[0

为ConfirmBox控件的Message属性赋值:

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

运行后效果如下所示:


6qG.C?2kP$Q)A{0

动态添加用户控件

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

<Gridx:Name="LayoutRoot"Background="#46461F">
9]5t.}Hx h0y J7I`.j5{0<
Canvasx:Name="ContainerCanvas">
%l7U"J H:t0ITPUB个人空间 RB T6zIc-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}

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

ITPUB个人空间L-fhl Z7e a

结束语

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

作者:TerryLee
"s5{caX+GV3J+I ?0出处:http://terrylee.cnblogs.com

Q PI [-zi0

TAG:

引用 删除 Guest   /   2009-07-09 14:37:43
5
引用 删除 Guest   /   2009-03-19 15:52:24
-5
引用 删除 Guest   /   2008-10-22 16:48:06
5
 

评分:0

我来说两句

显示全部

:loveliness: :handshake :victory: :funk: :time: :kiss: :call: :hug: :lol :'( :Q :L ;P :$ :P :o :@ :D :( :)

Open Toolbar