张善友

[翻译]开发Silverlight 2.0的自定义控件

原文： Developing a Custom Control for Silverlight 2.0

译者：张善友

Download MediaButton_demo - 131.06 KB
Download MediaButton_src - 10.91 KB

介绍

这篇文章主要展示了你制作一个Silverlight 2.0的自定义空间需要哪些步骤和在你的Silverlight项目中重用代码。

本文基于 Mix08上发布的Silverlight 2.0 beta1。

文章中我会创建一个控件库和实现自定义控件按钮类，没有任何新增功能只是继承缺省Button类，但是带一个不同原来的button的缺省样式。重用这个控件你不需要为你的项目中的所有控件实例添加Style属性。

让我们开始吧

创建项目

使用Visual Studio 2008新建一个Silerlight 类库项目。

因为这是一个控件库，我们要添加程序集 System.Windows.Controls的引用，这个程序集在Silverlight 2.0 beta 1的版本号是1.0.0.0(不要问为什么:-) ),默认会并放在"C:\Program Files\Microsoft SDKs\Silverlight\v2.0\Libraries\Client\System.Windows.Controls.dll"。

下一步是给我们的控件程序集加入 XmlnsDefinitionAttribute。

这个特性帮助XAML处理器找到和匹配Xml命名空间和CLR的命名空间，因此添加这个特性带下面的参数：

[assembly: System.Windows.Markup.XmlnsDefinition ("http://schemas.eyedea.hu/silverlight/2008/xaml/presentation", "Eyedea.Controls")]

创建控件类

解决方案内找到Class1.cs文件，利用Visual Studio的重构功能，将Class1.cs重命名为 MediaButton.cs。

下一步我们添加我们XAML文件，里面包含这个控件库里面的控件要使用的缺省样式。

让我们添加一个文本类型的项目到公秤里，命名为generic.xaml。

选择generic.xaml文件并设置为嵌入式资源。通过删除Custom Tool属性值并设置Build Action为Resource。

现在轮到编辑我们的主要对象：MediaButton.cs文件。打开这个文件，添加命令空间 System.Windows.Controls的引用修改MediaButton类从系统内建的 Button类继承。

我们的MediaButton类看起来像这个样子：

using System.Windows.Controls;

namespace Eyedea.Controls

{

public class MediaButton : Button

{

public MediaButton()

{

}

给我们的控件加入默认的样式

打开文件general.xmal

首先添加下面的缺省内容到XAML文件和一个引用到我们的XML命名空间：

< ResourceDictionary

xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local ="clr-namespace:Eyedea.Controls;assembly=Eyedea.Controls" >

</ ResourceDictionary >

请注意local这个Xml命名空间前缀将被用于这个控件库里面控件的样式引用。

添加Style标签到我们定义样式的地方，在Style标签有个TargeType属性指定该样式将使用在哪类控件，在这里指向我们的 MediaButton，你还必须和TargeType属性一样指定ControlTemplate属性

< Style TargetType ="local:MediaButton" >

< Setter property ="Template" >

< Setter.Value >

< ControlTemplate TargetType ="local:MediaButton" >

< Grid x:Name ="RootElement" >

</ Grid >

</ ControlTemplate >

</ Setter.Value >

</ Setter >

</ Style >

在Style标签内可以定义充分的控件外观包括 StoryBoards式的视觉状态转换，视觉元素和StoryBoards的名称非常重要，因为他们是Silverlight的样式可以工作的不可或缺的一部分，这里我们不讨论，将在另外的文章中讨论。

当前控件设计有一个固定的宽度和高度，因此我们可以通过用Setter来指定。

我们也指定控件的最小和最大尺寸以保护我们设计的按钮。

提示：简单的属性Setters应直接放在Style标签之后和在Template标签之前。

  
  
  
  
   
   
   
   
   
   
   
   <!--
   
   
   
    Common properties 
   
   
   
   -->
   
   
   
   
 
   
   
   
   <
   
   
   
   Setter 
   
   
   
   property
   
   
   
   ="IsEnabled"
   
   
   
    Value
   
   
   
   ="true"
   
   
   
    
   
   
   
   />
   
   
   
   
 
   
   
   
   <
   
   
   
   Setter 
   
   
   
   property
   
   
   
   ="IsTabStop"
   
   
   
    Value
   
   
   
   ="true"
   
   
   
    
   
   
   
   />
   
   
   
   
 
   
   
   
   <
   
   
   
   Setter 
   
   
   
   property
   
   
   
   ="Margin"
   
   
   
    Value
   
   
   
   ="0"
   
   
   
    
   
   
   
   />
   
   
   
   
 
   
   
   
   <
   
   
   
   Setter 
   
   
   
   property
   
   
   
   ="HorizontalContentAlignment"
   
   
   
    Value
   
   
   
   ="Center"
   
   
   
    
   
   
   
   />
   
   
   
   
 
   
   
   
   <
   
   
   
   Setter 
   
   
   
   property
   
   
   
   ="VerticalContentAlignment"
   
   
   
    Value
   
   
   
   ="Center"
   
   
   
    
   
   
   
   />
   
   
   
   
 
   
   
   
   <
   
   
   
   Setter 
   
   
   
   property
   
   
   
   ="Cursor"
   
   
   
    Value
   
   
   
   ="Arrow"
   
   
   
    
   
   
   
   />
   
   
   
   
 
   
   
   
   <
   
   
   
   Setter 
   
   
   
   property
   
   
   
   ="Foreground"
   
   
   
    Value
   
   
   
   ="#CC808080"
   
   
   
    
   
   
   
   />
   
   
   
   
 
   
   
   
   <!--
   
   
   
    Text related properties 
   
   
   
   -->
   
   
   
   
 
   
   
   
   <
   
   
   
   Setter 
   
   
   
   property
   
   
   
   ="TextAlignment"
   
   
   
    Value
   
   
   
   ="Left"
   
   
   
    
   
   
   
   />
   
   
   
   
 
   
   
   
   <
   
   
   
   Setter 
   
   
   
   property
   
   
   
   ="TextWrapping"
   
   
   
    Value
   
   
   
   ="NoWrap"
   
   
   
    
   
   
   
   />
   
   
   
   
 
   
   
   
   <
   
   
   
   Setter 
   
   
   
   property
   
   
   
   ="FontSize"
   
   
   
    Value
   
   
   
   ="11"
   
   
   
    
   
   
   
   />
   
   
   
   
 
   
   
   
   <!--
   
   
   
    Default Size Constraints 
   
   
   
   -->
   
   
   
   
 
   
   
   
   <
   
   
   
   Setter 
   
   
   
   property
   
   
   
   ="Width"
   
   
   
    Value
   
   
   
   ="50"
   
   
   
    
   
   
   
   />
   
   
   
   
 
   
   
   
   <
   
   
   
   Setter 
   
   
   
   property
   
   
   
   ="MinWidth"
   
   
   
    Value
   
   
   
   ="50"
   
   
   
    
   
   
   
   />
   
   
   
   
 
   
   
   
   <
   
   
   
   Setter 
   
   
   
   property
   
   
   
   ="MaxWidth"
   
   
   
    Value
   
   
   
   ="50"
   
   
   
    
   
   
   
   />
   
   
   
   
 
   
   
   
   <
   
   
   
   Setter 
   
   
   
   property
   
   
   
   ="Height"
   
   
   
    Value
   
   
   
   ="22"
   
   
   
    
   
   
   
   />
   
   
   
   
 
   
   
   
   <
   
   
   
   Setter 
   
   
   
   property
   
   
   
   ="MinHeight"
   
   
   
    Value
   
   
   
   ="22"
   
   
   
    
   
   
   
   />
   
   
   
   
 
   
   
   
   <
   
   
   
   Setter 
   
   
   
   property
   
   
   
   ="MaxHeight"
   
   
   
    Value
   
   
   
   ="22"
   
   
   
    
   
   
   
   />
   
   
   
   
 
  
  
  
  
添加视觉元到模板可复制我们的第一次Expression Design设计的以下xaml内容的一种样式。

这个设计包含一个背景矩形，一个大纲，两个亮点将在和用户交互的时候动画显示。

在底部你发现有一个ContentPresenter元素，它是Button的Content属性的占位符。

添加下列内容到Grid标签：

< Grid.Resources >

< Storyboard x:Key ="MouseOver State" >

< DoubleAnimationUsingKeyFrames BeginTime ="00:00:00" Storyboard.TargetName ="HighlightTop" Storyboard.Targetproperty ="(UIElement.Opacity)" >

< SplineDoubleKeyFrame KeyTime ="00:00:00.3000000" Value ="0.3" />