SilverLight学习笔记--建立Silverlight自定义控件(1)--外观设计

   Silverlight 2 以丰富且强大可靠的控件模型闻名，该模型是平台中包括的控件和第三方控件包的基础。您也可以使用此控件模型构建自己的控件。
  在了解如何为新平台编写自定义控件时，我经常先复制一些内置控件：按钮和列表框等等。这些控件可能表面看起来简单，但他们总是揭示了控件模型的关键功能并可以测试人们对这些功能的掌握程度。  
  下面我们一起来一步步建立一个自定义控件MySilverButton.
1、打开VS2008，文件-新建项目-Silverlight类库，项目名输入为 MyDesignButton。创建的Silverlight类库中默认会有一个Class1.cs，这是一个普通的C#类，与Silverlight并无关系，可以选择保留它利用VS的重构功能换成喜欢的名字，也可以删掉它再重新建立一个类。总之我们的Silverlight类库中只需要保留一个我们要开发的控件名字的类就可以了。因此在此处，我们进入后把Class1.cs改名为 MySilverButton.cs,让此类继承自 ContentControl，代码如下:

 

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace MyDesignButton
{
    public class MySilverButton: ContentControl 
    {

    }
}

2、为此项目添加一个新文件夹，名称为themes,因为下一步我们要在此文件夹中建立一个名为Generic.xaml的文件(默认控件模板 )，用于存放我们自定义控件的外观定义。建立方法如下:在解决方案管理器中选择此项目，鼠标右键弹出菜单，添加--新建项,为此项目添加一个文件文件，默认名称为TextFile1.txt,但我们需要把它的后缀名改为xaml,所以，其全名为 Generic.xaml。此文件内容如下:

 

<ResourceDictionary 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:custom="clr-namespace:MyDesignButton">

    <Style TargetType="custom:MySilverButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="custom:MySilverButton">
                    <Grid x:Name="RootElement">
                        <Rectangle x:Name="BodyElement" Width="200" Height="100"   Fill="Brown"  Stroke="Purple" RadiusX="16" RadiusY="16" />
                        <TextBlock x:Name="ButtonCaption"  HorizontalAlignment="Center"  VerticalAlignment="Center" FontSize="26"  />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

 

3、添加MySilverButton类的构造函数，并在其构造函数内部加入代码

 

this.DefaultStyleKey = typeof(MySilverButton);

 

加入此代码后，你才能在引用此控件时看到它的外观。此时构造函数如下

        public MySilverButton()
        {
               this.DefaultStyleKey = typeof(MySilverButton);
        }

 

4、下面我们先来看看初步效果，为此我们需要另建一个项目，文件-新建项目-Silverlight应用程序。项目名为:MySLbutton,项目类型:Asp.net web应用程序项目 。此时VS2008自动为我们搭建好必要的项目环境。内有两个项目，一个名为MySLbutton.一个名为MySLbutton.Web，后者为前者的运行环境。为看到初步效果，我们需要做如下工作。
  (1)、先在MySLbutton项目中引入我们前面所建立的名为MyDesignButton的项目中所生成的MyDesignButton.dll(在此项目的bin/debug目录下)。即我们所建立的自定义控件。
  (2)、修改MySLbutton项目的Page.xaml文件。主要是添加两处代码

      一是引入xmlns定义。代码是: 

xmlns:custom="clr-namespace:MyDesignButton;assembly=MyDesignButton"

      二是引用我们的自定义控件。代码是:

<custom:MySilverButton x:Name="MyFirstSLbutton"> </custom:MySilverButton>

  修改后，完整的Page.xaml文件为:

 <UserControl x:Class="MySLbutton.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:custom="clr-namespace:MyDesignButton;assembly=MyDesignButton"
             Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <custom:MySilverButton x:Name="MyFirstSLbutton">
            
        </custom:MySilverButton>
    </Grid>
</UserControl>

 (3)、生成项目，并按下F5运行，我们可看到初步效果。
下一篇：
SilverLight学习笔记--建立Silverlight自定义控件(2)--事件响应

前往：Silverlight学习笔记清单