一步一步学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中,我们可以根据开发自定义控件或者创建用户控件,以达到控件重用的目的,添加一个新的用户控件:

TerryLee_Silverlight2_0049

编写用户控件实现代码:

<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中注册命名空间:

TerryLee_Silverlight2_0050

使用用户控件:

<Grid x:Name="LayoutRoot" Background="#46461F">
    <uc:ConfirmBox x:Name="mybox"></uc:ConfirmBox>
</Grid>

整个过程就这么简单,运行后效果如下:

TerryLee_Silverlight2_0051

为用户控件添加属性

简单的修改一下上面示例中的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编辑器能够识别出属性并提示:

TerryLee_Silverlight2_0052

为ConfirmBox控件的Message属性赋值:

<Grid x:Name="LayoutRoot" Background="#46461F">
    <uc:ConfirmBox x:Name="mybox" Message="使用用户控件成功"></uc:ConfirmBox>
</Grid>

运行后效果如下所示:

TerryLee_Silverlight2_0053

动态添加用户控件

用户控件可以动态的添加到页面中,修改一下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);
}

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

TerryLee_Silverlight2_0054

结束语

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

下一篇:一步一步学Silverlight 2系列(11):数据绑定

作者:TerryLee
出处:http://terrylee.cnblogs.com
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则视为侵权。
Tag标签: Silverlight

posted on 2008-03-08 20:36 TerryLee 阅读(4601) 评论(15)  编辑 收藏 所属分类: Silverlight

评论

#1楼  2008-03-08 23:15 calm [未注册用户]

Terrylee大侠,怕在别的你看不到,占这个地方问你个与silverlight无关的问题:我现在是vista系统,请问可以同时安装IE7跟IE8吗?如果安装上IE8后有问题或者我不想用,可以重新切换到IE7吗?

谢谢   回复  引用    

#2楼 [楼主] 2008-03-08 23:22 TerryLee      

@calm
可以安装,在IE8中带了切换到IE7的功能,如果不想用,也可以进行卸载。

参见http://www.cnblogs.com/JustinYoung/archive/2008/03/06/eyes-on-IE8.html   回复  引用  查看    

#3楼  2008-03-11 12:53 笑煞天      

为什么我添加的属性Blend2.5无法识别呢?   回复  引用  查看    

#4楼 [楼主] 2008-03-11 13:21 TerryLee      

@笑煞天
我在Blend2.5下没有测试,也许会有问题,添加属性在VS2008 XAML编辑器中是可以识别的:)   回复  引用  查看    

#5楼  2008-03-28 23:03 井号键      

Terrylee大侠,我在开发用户控件中遇到拉问题...
想请教一下:
在Silverlight1.1中使用用户控件时,控制用户控件的位置可以通过
setValues(Canvas.LeftProperty(TopProperty),double)这个方法来设置...但在2.0里面 原来的Canvas变成拉UserControl...也没有原来的LeftProperty这些属性..多拉MaxHeightProperty之类的4个属性...不知道原来那样的方法该怎么实现阿.   回复  引用  查看    

#6楼  2008-04-02 21:43 itmsn [未注册用户]

今天终于看到这拉。例子也一个一个做到这啦。
今天我还就是没有找到那个添加一个新的用户控件的地方,请教一下。   回复  引用    

#7楼  2008-04-07 11:38 80后的任务就是制造08后 [未注册用户]

TO: itmsn

就是按照TerryLee的方法建立silverlight应用程序,之后会有两个工程,你就在solution View中的silverlightApplication这个工程上右击-〉add->new item->Silverlight 就有了   回复  引用    


标题  
姓名  
主页
Email (只有博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2008-03-08 23:52 编辑过
 
另存  打印
 


导航

公告

  • 网名:TerryLee
  • 本名:李会军
  • 位置:中国北京 Ethos
  • 联系方式:
  • 访问我的个人主页

 MVP配置

 版权声明

  • 本站采用创作共用许可 署名,非商业

绿色通道

IT新闻

统计

与我联系

留言簿(322)

我的标签

随笔分类

随笔档案

个人站点

关注项目

好的网站

我的好友

搜索

积分与排名

阅读排行榜

评论排行榜