一步一步学Silverlight 2系列（10）：使用用户控件

叁歲伎倆 2021-12-17 05:43 226阅读 0赞

# **![orig_1.gif][] 一步一步学Silverlight 2系列（10）：使用用户控件**  #

--------------------

2008-03-08 20:36:00

标签： [用户][Link 1] [控件][Link 2] [一步一步学Silverlight2系列][Silverlight2]　　　 \[ [推送到技术圈][Link 3]\]

<table style="table-layout:fixed;width:650px;"> 
 <tbody> 
 <tr> 
 <td> 
 <div> 
 版权声明：原创作品，允许转载，转载时请务必以超链接形式标明文章 
 <a style="text-decoration:underline;" href="http://terrylee.blog.51cto.com/342737/67244" rel="nofollow">原始出处</a> 、作者信息和本声明。否则将追究法律责任。 
 <a href="http://terrylee.blog.51cto.com/342737/67244" rel="nofollow">http://terrylee.blog.51cto.com/342737/67244</a> 
 </div> </td> 
 </tr> 
 <tr> 
 <td> 
 <div style="font-size:10pt;"> 
 <h2>概述</h2> 
 <div>
 Silverlight 2 Beta 1版本发布了，无论从Runtime还是Tools都给我们带来了很多的惊喜，如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython，对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。《一步一步学Silverlight 2系列》文章带您快速进入Silverlight 2开发。 
 </div> 
 <div>
 本文为系列文章第10篇，主要介绍Silverlight 2中的用户控件使用。 
 </div> 
 <h2>创建用户控件</h2> 
 <div>
 在Silverlight 2中，我们可以根据开发自定义控件或者创建用户控件，以达到控件重用的目的，添加一个新的用户控件： 
 </div> 
 <div> 
 <a href="https://images.cnblogs.com/cnblogs_com/Terrylee/WindowsLiveWriter/Silverlight210_102DA/TerryLee_Silverlight2_0049_4.gif" rel="nofollow"></a> 
 <img alt="" src="http://terrylee.blog.51cto.com/attachment/200803/200803241206346738265.gif">&nbsp; 
 </div> 
 <div>
 编写用户控件实现代码： 
 </div> 
 <pre>&lt;Grid x:Name="LayoutRoot" Background="White"&gt;
 &lt;Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
 Opacity="0.7" Fill="#FF8A8A8A"/&gt;
 &lt;Border CornerRadius="15" Width="400" Height="150" Background="LightPink" Opacity="0.9"&gt;
 &lt;StackPanel Orientation="Horizontal" Height="50"&gt;
 &lt;Image Source="info.png" Margin="10 0 0 0"&gt;&lt;/Image&gt;
 &lt;Button Background="Red" Width="120" Height="40"
 Content="OK" Margin="10 0 0 0" FontSize="18"/&gt;
 &lt;Button Background="Red" Width="120" Height="40"
 Content="Cancel" Margin="50 0 0 0" FontSize="18"/&gt;
 &lt;/StackPanel&gt;
 &lt;/Border&gt;
 &lt;/Grid&gt;</pre> 
 <a href="http://11011.net/software/vspaste" rel="nofollow"></a> 
 <div>
 在需要使用该用户控件的页面XAML中注册命名空间： 
 </div> 
 <div> 
 <a href="https://images.cnblogs.com/cnblogs_com/Terrylee/WindowsLiveWriter/Silverlight210_102DA/TerryLee_Silverlight2_0050_2.gif" rel="nofollow"></a> 
 <img alt="" src="http://terrylee.blog.51cto.com/attachment/200803/200803241206346772234.gif">&nbsp; 
 </div> 
 <div>
 使用用户控件： 
 </div> 
 <pre>&lt;Grid x:Name="LayoutRoot" Background="#46461F"&gt;
 &lt;uc:ConfirmBox x:Name="mybox"&gt;&lt;/uc:ConfirmBox&gt;
 &lt;/Grid&gt;</pre> 
 <div> 
 <a href="http://11011.net/software/vspaste" rel="nofollow"></a>整个过程就这么简单，运行后效果如下： 
 </div> 
 <div> 
 <a href="https://images.cnblogs.com/cnblogs_com/Terrylee/WindowsLiveWriter/Silverlight210_102DA/TerryLee_Silverlight2_0051_2.gif" rel="nofollow"></a> 
 <img alt="" src="http://terrylee.blog.51cto.com/attachment/200803/200803241206346783031.gif">&nbsp; 
 </div> 
 <h2>为用户控件添加属性</h2> 
 <div>
 简单的修改一下上面示例中的XAML文件，添加一个文本块控件，用它来显示文字提示信息。 
 </div> 
 <pre>&lt;Grid x:Name="LayoutRoot" Background="White"&gt;
 &lt;Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
 Opacity="0.7" Fill="#FF8A8A8A"/&gt;
 &lt;Border CornerRadius="15" Width="400" Height="150" Background="LightPink" Opacity="0.9"&gt;
 &lt;Grid&gt;
 &lt;Grid.RowDefinitions&gt;
 &lt;RowDefinition Height="60"&gt;&lt;/RowDefinition&gt;
 &lt;RowDefinition Height="90"&gt;&lt;/RowDefinition&gt;
 &lt;/Grid.RowDefinitions&gt;
 &lt;Grid.ColumnDefinitions&gt;
 &lt;ColumnDefinition&gt;&lt;/ColumnDefinition&gt;
 &lt;/Grid.ColumnDefinitions&gt;
 &lt;TextBlock x:Name="message" FontSize="18" Foreground="White"
 HorizontalAlignment="Left" VerticalAlignment="Center"
 Margin="50 20 0 0"/&gt;
 &lt;StackPanel Orientation="Horizontal" Height="50" Grid.Row="1"&gt;
 &lt;Image Source="info.png" Margin="10 0 0 0"&gt;&lt;/Image&gt;
 &lt;Button Background="Red" Width="120" Height="40"
 Content="OK" Margin="10 0 0 0" FontSize="18"/&gt;
 &lt;Button Background="Red" Width="120" Height="40"
 Content="Cancel" Margin="50 0 0 0" FontSize="18"/&gt;
 &lt;/StackPanel&gt;
 &lt;/Grid&gt;
 &lt;/Border&gt;
 &lt;/Grid&gt;</pre> 
 <a href="http://11011.net/software/vspaste" rel="nofollow"></a> 
 <div>
 定义属性： 
 </div> 
 <pre>public partial class ConfirmBox : UserControl
 {
 public ConfirmBox()
 {
 InitializeComponent();
 }
 public String Message
 {
 get { return this.message.Text; }
 set { this.message.Text = value; }
 }
 }</pre> 
 <div> 
 <a href="http://11011.net/software/vspaste" rel="nofollow"></a>在页面使用用户控件的属性，XAML编辑器能够识别出属性并提示： 
 </div> 
 <div> 
 <a href="https://images.cnblogs.com/cnblogs_com/Terrylee/WindowsLiveWriter/Silverlight210_102DA/TerryLee_Silverlight2_0052_2.gif" rel="nofollow"></a> 
 <img alt="" src="http://terrylee.blog.51cto.com/attachment/200803/200803241206346798109.gif">&nbsp; 
 </div> 
 <div>
 为ConfirmBox控件的Message属性赋值： 
 </div> 
 <pre>&lt;Grid x:Name="LayoutRoot" Background="#46461F"&gt;
 &lt;uc:ConfirmBox x:Name="mybox" Message="使用用户控件成功"&gt;&lt;/uc:ConfirmBox&gt;
 &lt;/Grid&gt;</pre> 
 <div>
 运行后效果如下所示： 
 </div> 
 <div> 
 <a href="https://images.cnblogs.com/cnblogs_com/Terrylee/WindowsLiveWriter/Silverlight210_102DA/TerryLee_Silverlight2_0053_2.gif" rel="nofollow"><img alt="" src="http://terrylee.blog.51cto.com/attachment/200803/200803241206346810000.gif">&nbsp;</a> 
 </div> 
 <h2>动态添加用户控件</h2> 
 <div>
 用户控件可以动态的添加到页面中，修改一下Page.xaml中的XAML代码，放入一个Canvas作为用户控件的容器。 
 </div> 
 <pre>&lt;Grid x:Name="LayoutRoot" Background="#46461F"&gt;
 &lt;Canvas x:Name="ContainerCanvas"&gt;
 &lt;/Canvas&gt;
 &lt;/Grid&gt;</pre> 
 <a href="http://11011.net/software/vspaste" rel="nofollow"></a> 
 <div>
 编写添加用户控件代码： 
 </div> 
 <pre>private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
 {
 ConfirmBox confirmbox = new ConfirmBox();
 confirmbox.Message = "动态添加用户控件成功！";
 ContainerCanvas.Children.Add(confirmbox);
 }</pre> 
 <div> 
 <a href="http://11011.net/software/vspaste" rel="nofollow"></a>运行后效果如下所示，当然我们也可以控制用户控件显示的位置等。 
 </div> 
 <div> 
 <a href="https://images.cnblogs.com/cnblogs_com/Terrylee/WindowsLiveWriter/Silverlight210_102DA/TerryLee_Silverlight2_0054_2.gif" rel="nofollow"></a> 
 <img alt="" src="http://terrylee.blog.51cto.com/attachment/200803/200803241206346823750.gif">&nbsp; 
 </div> 
 <h2>结束语</h2> 
 <div>
 本文简单介绍了在Silverlight 2中使用用户控件，包括创建用户控件、添加属性、动态添加用户控件等内容，你可以从 
 <a href="http://files.cnblogs.com/Terrylee/TerryLee.SilverlightDemo21.rar" rel="nofollow">这里</a>下载本文示例代码。 
 </div> 
 本文出自 “<a href="http://terrylee.blog.51cto.com/" rel="nofollow">TerryLee技术专栏</a>” 博客，请务必保留此出处<a href="http://terrylee.blog.51cto.com/342737/67244" rel="nofollow">http://terrylee.blog.51cto.com/342737/67244</a> 
 <a href="http://terrylee.blog.51cto.com/342737/67244" rel="nofollow">本文出自 51CTO.COM技术博客</a> 
 </div> </td> 
 </tr> 
 </tbody> 
</table>

转载于:https://www.cnblogs.com/hdjjun/archive/2008/12/24/1361497.html

[orig_1.gif]: /images/20211217/6aef26ea37b845939e59300eafb06483.png
[Link 1]: http://blog.51cto.com/tagindex.php?keyword=%D3%C3%BB%A7
[Link 2]: http://blog.51cto.com/tagindex.php?keyword=%BF%D8%BC%FE
[Silverlight2]: http://blog.51cto.com/tagindex.php?keyword=%D2%BB%B2%BD%D2%BB%B2%BD%D1%A7Silverlight2%CF%B5%C1%D0
[Link 3]: http://terrylee.blog.51cto.com/342737/67244#