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學習筆記清單