一步一步学Silverlight 2系列(10):使用用户控件-阿里云开发者社区

开发者社区> 技术小甜> 正文

一步一步学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中,我们可以根据开发自定义控件或者创建用户控件,以达到控件重用的目的,添加一个新的用户控件:
 
编写用户控件实现代码:
<Grid x:Name="LayoutRoot" Background="White">
    <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
               Opacity="0.7" Fill="#FF8A8A8A"/>
    <Border CornerRadius="15" Width="400" Height="150" Background="LightPink" Opacity="0.9">
        <StackPanel Orientation="Horizontal" Height="50">
            <Image Source="info.png" Margin="10 0 0 0"></Image>
            <Button Background="Red" Width="120" Height="40" 
                    Content="OK" Margin="10 0 0 0" FontSize="18"/>
            <Button Background="Red" Width="120" Height="40" 
                    Content="Cancel" Margin="50 0 0 0" FontSize="18"/>
        </StackPanel>
    </Border>
</Grid>
在需要使用该用户控件的页面XAML中注册命名空间:
 
使用用户控件:
<Grid x:Name="LayoutRoot" Background="#46461F">
    <uc:ConfirmBox x:Name="mybox"></uc:ConfirmBox>
</Grid>
整个过程就这么简单,运行后效果如下:
 

为用户控件添加属性

简单的修改一下上面示例中的XAML文件,添加一个文本块控件,用它来显示文字提示信息。
<Grid x:Name="LayoutRoot" Background="White">
    <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
               Opacity="0.7" Fill="#FF8A8A8A"/>
    <Border CornerRadius="15" Width="400" Height="150" Background="LightPink" Opacity="0.9">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="60"></RowDefinition>
                <RowDefinition Height="90"></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <TextBlock x:Name="message" FontSize="18" Foreground="White"
                       HorizontalAlignment="Left" VerticalAlignment="Center"
                       Margin="50 20 0 0"/>
            <StackPanel Orientation="Horizontal" Height="50" Grid.Row="1">
                <Image Source="info.png" Margin="10 0 0 0"></Image>
                <Button Background="Red" Width="120" Height="40" 
                    Content="OK" Margin="10 0 0 0" FontSize="18"/>
                <Button Background="Red" Width="120" Height="40" 
                    Content="Cancel" Margin="50 0 0 0" FontSize="18"/>
            </StackPanel>
        </Grid>
    </Border>
</Grid>
定义属性:
public partial class ConfirmBox : UserControl
{
    public ConfirmBox()
    {
        InitializeComponent();
    }
    public String Message
    {
        get { return this.message.Text; }
        set { this.message.Text = value; }
    }
}
在页面使用用户控件的属性,XAML编辑器能够识别出属性并提示:
 
为ConfirmBox控件的Message属性赋值:
<Grid x:Name="LayoutRoot" Background="#46461F">
    <uc:ConfirmBox x:Name="mybox" Message="使用用户控件成功"></uc:ConfirmBox>
</Grid>
运行后效果如下所示:

动态添加用户控件

用户控件可以动态的添加到页面中,修改一下Page.xaml中的XAML代码,放入一个Canvas作为用户控件的容器。
<Grid x:Name="LayoutRoot" Background="#46461F">
    <Canvas x:Name="ContainerCanvas">
        
    </Canvas>
</Grid>
编写添加用户控件代码:
private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
{
    ConfirmBox confirmbox = new ConfirmBox();
    confirmbox.Message = "动态添加用户控件成功!";
    ContainerCanvas.Children.Add(confirmbox);
}
运行后效果如下所示,当然我们也可以控制用户控件显示的位置等。
 

结束语

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









本文转自lihuijun51CTO博客,原文链接: http://blog.51cto.com/terrylee/67244,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用 TiDB Lightning 恢复 Kubernetes 上的集群数据
本文介绍了如何使用 TiDB Lightning 快速恢复 Kubernetes 上的 TiDB 集群数据。 TiDB Lightning 包含两个组件:tidb-lightning 和 tikv-importer。在 Kubernetes 上,tikv-importer 位于单独的 Helm chart 内,被部署为一个副本数为 1 (replicas=1) 的 StatefulSet;tidb-lightning 位于单独的 Helm chart 内,被部署为一个 Job。 为了使用 TiDB Lightning 恢复数据,tikv-importer 和 tidb-lightning
18 0
如何在Silverlight4中使用摄像头
Silverlight4终于支持摄像头和麦克风了,网页上的视频聊天将不再是Flash的专利! 今天在一个老外的网站上看到webCam的使用示例(http://elegantcode.com/2009/11/20/silverlight-4-webcam-a-quick-glance/),非常简单,...
659 0
Silverlight3.0 起步(一)——环境
开发环境:VS2008 sp1 如果要开发silverlight,需要安装3部分: 1 SDK 用来编译和生成所需要的sl控件的工具 2 Tools 3 sl运行时插件,用于在浏览器中浏览sl,即在浏览器中使用silverlight控件   我在安装的过程中,先单独安装了第三部分,即运行时。
818 0
利刃 MVVMLight 4:绑定和绑定的各种使用场景
原文:利刃 MVVMLight 4:绑定和绑定的各种使用场景 一、绑定:  主要包含元素绑定和非元素绑定两种。 1、元素绑定,是绑定的最简单形式,源对象是WPF的元素,并且源对象的属性是依赖项属性。
649 0
+关注
10146
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《Nacos架构&原理》
立即下载
《看见新力量:二》电子书
立即下载
云上自动化运维(CloudOps)白皮书
立即下载