silverlight:如何样创建Silverlight的自定义Control控件

　　介绍

　　个基本Microsoft Silverlight project 假设当前project中Extensible Application Markup Language (XAML)文件定义了个特定属于应用页. 然而, 个control project 使用 XAML 文件来为所有它对象提供user erface (UI)定义. 这篇中将介绍如何样往个基本control project中添加文件,来测试这个control.

　　要求 (可参阅Silverlight download site):

　　Microsoft Silverlight 1.1 Alpha.

　　Microsoft Visual Studio Code Name "Orcas" Beta 1.

　　Microsoft Silverlight Tools Alpha for Visual Studio Code Name "Orcas" Beta 1.

　　Control控件UI 和 object Model

　　创建个control 包含两个任务: 定义UI和定义object model. UI 主要是在 XAML 文件中定义. 而object model 则在后台代码文件中定义. 这会经常存在前台标记文件和后台代码交互, 也许你会在标记文件中为个 Loaded handler 而然后在后台代码文件中定义它handler. 又或者, 你可能在XAML中构造或给个已经存在elements命名, 然后你在后台代码文件中来得到它们引用. 这样,代码文件和XAML文件都将编译到个library中, 这个 library然后就可以被其它applications 或者 projects使用了.

　　初见Silverlight Class Library Project

　　个基本 Silverlight library project模板是没有 XAML 文件, 而只有个代码文件.你可以添加个作为embedded资源XAML文件到其中.

　　对Silverlight library project进行修改

　　打开 Visual Studio. 在 File 菜单中, 点击 New Project.在 New Project 对话框中, 选择 Visual C#, 然后选择 Silverlight. 在 Templates 列表中, 选择 Silverlight Class Library.

　　在Solution Explorer, 右击 1.cs 然后选择 Delete.

　　在Solution Explorer, 右击 project,选择 Add, New Item.

　　在 Add New Item 对话框中, 选择 Silverlight User Control. 命名为 MyLabel.xaml, 然后点击OK. 这将添加两个文件: 个定义UI XAML 文件, 和个编写代码 .cs 文件.

　　注意

　　相比直接把XAML页加进来进行编译,把它作为嵌入资源却更合适.原因在接下来我们会进行介绍.

　　定义 UI

　　Canvas 是个典型Control控件开始点. Canvas root element内容将影响任何引用它应用UI.

　　你定义了各种控制UI作为XAML root子elements. 在举例中, 你将只添加个 element,但这将足够来观看 control 运行. 些复杂control samples可能需要添加数百行代码到 XAML 中来, 这包括预定义用于收集UI交互基于 event-drivenanimations , 很深层次element 嵌套, 图象等.

　　在XAML中定义 UI

　　打开 MyLabel.xaml 进行编辑.将下面XAML内容复制到 Canvas 标记根中.

　　CS

<TextBlock x:Name="tb"></TextBlock>

　　VB

<TextBlock x:Name="tb"></TextBlock>

　　保存文件.

　　在QuickStart这个举例中,你所做就是这些了. 注意 x:Name 属性. 你应该般都会要放入x:Name到任何个重要element中, 在后台代码文件中使用name references 是你牢牢控制UIControl控件个重要手段.

　　获取 Object References

　　在你开始添加自定义属性前,你需要获得些 XAML中对象引用,这样你才可以在代码文件中使用. 当你打开后台代码文件时, 你可以看到类已经定义了个默认构造. 这块就介绍说明了为什么要把XAML文件作为个嵌入资源来对待了: 代码文件将从assembly资源中以流方式来访问 XAML文件. 这个stream将作为Control 类思路方法 InitializeFromXaml重要参数输入串,这个思路方法就介绍说明了XAML和其后台代码文件是如何样在最开始就进行挂勾. 其实, 模板生成后台构造还做了其它些工作: InitializeFromXaml 实际上是有个返回值, 这个值对你以后对XAML中各种对象引用将是有用,你可以在接下来过程中访问object tree.

　　在你control中获得对象引用

　　打开 MyLabel.xaml.cs 或 MyLabel.xaml.vb 进行编辑.

　　添加个命名为implementationRootFrameworkElement类型变量. 然后改变InitializeFromXaml ,把它返回值赋给implementationRoot. 当你做完这些后,你代码应该和下面例子样了.

　　接下来, 把 implementationRoot 作为object tree开始点,这样你就可以得到TextBlock element引用了. 如果你不 FindName 而使用 "this" 或者 "Me" ( Control base), 则不对,这么还不存在object tree. object tree 只在载入完XAML文件后生成. 在这儿, 为TextBlock添加个变量.

　　CS

TextBlock tb;

　　VB

Private m_tb As TextBlock

　　加入第 3行代码,来 FindName构造,这样得到了TextBlock引用.

　　CS

tb = implementationRoot.FindName("tb") as TextBlock;

　　VB

m_tb = m_implementationRoot.FindName("tb")

　　为Control控件定制属性和事件

　　般情况下, Control控件是没有暴露任何属性或事件.你可以定义公有属性(使用public ters),这样你无论是在标记文件或是代码文件中都可以对Control控件例子进行设置.同样道理,你也可以定义共用事件. 在本篇 QuickStart中, 你将跟着举例对FrameworkElement两个基本外观尺寸属性进行设置 , Height 和 Width.你将添加两个自定义属性到MyLabel,这将应用到TextBlock 属性值.

　　添加属性

　　在 MyLabel.xaml.cs 或 MyLabel.xaml.vb, 添加MyLabelHeight属性,以此来设置外面implementationRootCanvas 宽度. 你必须隐藏这个属性,这个属性已经在Control中存在了, 但是 Control.Height 却没有和你Control控件产生任何联系.

　　CS

public virtual double Height
{
　　get
　　{
　　　　 implementationRoot.Height;
　　}
　　
　　{
　　　　implementationRoot.Height = value;
　　　　UpdateLayout;
　　}
}

　　VB

Public Overridable Shadows Property Height As Double
　　Get
　　　　Return m_implementationRoot.Height
　　End Get
　　Set(ByVal value As Double)
　　　　m_implementationRoot.Height = value
　　　　UpdateLayout
　　End Set
End Property

　　添加个带NEW关键字属性Width 给 MyLabel.

　　CS

public virtual double Width
{
　　get
　　{
　　　　 implementationRoot.Width;
　　}
　　
　　{
　　　　implementationRoot.Width = value;
　　　　UpdateLayout;
　　}
}

　　VB

Public Overridable Shadows Property Width As Double
　　Get
　　　　Return m_implementationRoot.Width
　　End Get
　　Set(ByVal value As Double)
　　　　m_implementationRoot.Width = value
　　　　UpdateLayout
　　End Set
End Property

　　你需要再提供个重要属性给MyLabel, 这就是它显示文字. 定义个 Text 属性给 MyLabel, 这样你就可以为你Control控件TextBlock设置Text属性了(该Control控件是和tb引用关系).

　　CS

public String Text
{
　　get
　　{
　　　　 tb.Text;
　　}
　　
　　{
　　　　tb.Text = value;
　　　　UpdateLayout;
　　}
}

　　VB

Public Property Text As String
　　Get
　　　　Return m_tb.Text
　　End Get
　　Set(ByVal value As String)
　　　　m_tb.Text = value
　　　　UpdateLayout
　　End Set
End Property

　　你也可以定义更多属性,比如设置文字颜色属性. , 在这种情况下,你需要将 Brush 类型强行转换为 SolidColorBrush来避免设置属性局限性, 当然,设置属性值应该符合element 语法.

　　CS

public SolidColorBrush LabelColor
{
　　get
　　{
　　　　 (SolidColorBrush)tb.Foreground;
　　}
　　
　　{
　　　　tb.Foreground = (SolidColorBrush)value;
　　}
}

　　VB

Public Property LabelColor As SolidColorBrush
　　Get
　　　　Return m_tb.Foreground
　　End Get
　　Set(ByVal value As SolidColorBrush)
　　　　m_tb.Foreground = DirectCast(value, SolidColorBrush)
　　End Set
End Property

　　保存 MyLabel.Xaml.cs (或 MyLabel.xaml.vb) 然后build 这个 project.

　　目前,你还不能对你project进行debug 或运行, 你control还只是个library,它并没有被其它Silverlight页使用.下面,我们将添加些test文件到你project. 别外个可选思路方法是,创建个包含多个project solutions,然后再将control projectassembly加进来,然后再使用.

　　测试你 Control

　　对control进行测试

　　新开个Visual Studio. 创建个新基本 Silverlight project (查看 如何来创建个Silverlight Project). 你如何样 命名没有关系, 接下来你将会对project中文件进行整理,最后加入到主project中来.

　　打开 Explorer. 到 你刚创建project 文件夹. 复制这些 文件: Default.html, CreateSilverlight.js, Silverlight.js, 和 Page.xaml. 在本篇 QuickStart中, 你不需要 Page.xaml.cs.

　　导航 Explorer 到 SilverlightCustomControl project 文件夹. 粘贴这 4个文件.

　　在创建SilverlightCustomControl project Visual Studio 中 , 打开 Solution Explorer. 右击 project, 然后选择Add, Existing Item.

　　在Add Existing Item 对话框中,选择 4个你才粘贴 文件.点击 OK.

　　在 Solution Explorer, 右击 project, 然后选择Properties.

　　在Properties 窗口上, 点击Debug 栏. 改变 Start Action 为 Specic Page, 设置值为 Default.html.

　　打开 Page.xaml 进行编辑. 删除x:Class 属性 和 root element中Loaded handler . (You would have needed the code file and a separate build action to support this code, but you do not need any code to merely instantiate your control in XAML.)

　　现在你需要添加行xmlns 来引用你自定义 control assembly. 添加以下属性到你根tag下:

xmlns:my="clr-:SilverlightSampleControl;assembly=ClientBin/SilverlightSampleControl.dll".

　　现在添加个特定 element将放置个MyLabel 到你页面中来. 但是在element名字前你应该加个前缀my ,这样编译器才知道如何去找到它定义. 你也可以设置你为MyLabel定义属性值.

　　CS

<my:MyLabel Height="30" Width="200" Text="Hello...." LabelColor="Blue"/>



　　VB

<my:MyLabel Height="30" Width="200" Text="Hello...." LabelColor="Blue"/>

　　编译并对application进行debug .你可以看到自定义 MyLabel 显示了. 你也可以添加断点,比如在 MyLabel 构造处, 或者在handlers 中添加,来调试用户交互过程.

　　隐藏继承属性

　　上面举例定义了两个属性 (Height 和 Width) 它们通过使用关键字有意隐藏了基类相应属性,这种思路方法在Silverlight SDK中其它Sample中也可以看到. 隐藏属性并不是个最佳办法,但是却是目前唯可行办法. Control 从FrameworkElement继承 Height 和 Width , 但是 FrameworkElement 却不清楚 Control 基类实现定义. XAML 属性试图来设置基类属性.除了隐藏这些从基类来属性外,你在被访问前应该同步这些属性.在这个举例中, UpdateLayout 思路方法就在相应属性申明中被了,而类构造也设置了基类被隐藏属性,以使其同步.

延伸阅读

• 2009-1-23-- silverlight:学Silverlight 2系列(8):使用样式封装Control控件观感
• 2009-1-23-- silverlight:Silverlight 2 手把手(的 4) 创建 Silverlight 2 Control控件
• 2009-1-23-- silverlight:使用Silverlight 2 和 VS 2008创建 Hello World 程序
• 2009-1-23-- silverlight:学Silverlight 2系列(10):使用用户Control控件
• 2009-1-23-- 微软silverlight:Silverlight 微软平台的再度膨胀
• 2009-1-23-- silverlight:Silverlight 2 (beta1)数据操作(3)——使用ADO.NET Data Service (Astoria)进行数据CRUD操作
• 2009-1-23-- silverlight:学Silverlight 2系列(26):基本图形
• 2009-1-23-- silverlight应用:使用Silverlight构建插件式应用程序( 4)
• 2009-1-23-- silverlight:在Silverlight中做单元测试
• 2009-1-23-- silverlight:学Silverlight 2系列(32):图形图像综合例子— 功夫的王 剧照播放