Windows Phone 7 创建自定义的控件

创建自定义的控件：

ContentControl 和 ItemsControl 等 Control 派生类派生。许多内置控件可以直接或间接从添加了 Content 属性的 ContentControl 派生，而该属性允许对控件的内容（如按压

按钮表面上的内容）进行自定义。ListBox 控件则从 ItemsControl 派生，ItemsControl 可以实现用来向用户提供项目集合的控件的基本行为。因为我们要实现按钮，所以将从

ContentControl 派生。
代码结构如下：
namespace SimpleButtonDemo
{
public class SimpleButton : ContentControl
{
}
}

此时，您已实现了单纯的自定义控件，该控件可在 XAML 文档中通过声明进行实例化。为了说明此问题，将下列语句添加到 Page.xaml：
<local:SimpleButton />
为了使 Silverlight 可以识别此声明，您还需要将以下属性添加到 Page.xaml 的根 User­Control 元素：
xmlns:local="clr-namespace:SimpleButtonDemo;"
您可以看到，clr-namespace 能够识别在其中定义 SimpleButton 类的命名空间，而程序集可以识别包含此控件的程序集。
在xaml中就可以调用该控件了，代码结构如下：
<Grid x:Name="LayoutRoot" Background="White">
<local:SimpleButton />
</Grid>

实例：

NaiveGradientButton类

 
 


  
  
using System;  

  
  
using System.Windows;  

  
  
using System.Windows.Controls;  

  
  
using System.Windows.Media;  

  
  
 

  
  
namespace NaiveGradientButtonDemo  

  
  
{  

  
  
    public class NaiveGradientButton : Button  

  
  
    {  

  
  
        GradientStop gradientStop1, gradientStop2;  

  
  
 

  
  
        public NaiveGradientButton()  

  
  
        {  

  
  
            LinearGradientBrush brush = new LinearGradientBrush();  

  
  
            brush.StartPoint = new Point(0, 0);  

  
  
            brush.EndPoint = new Point(1, 0);  

  
  
 

  
  
            gradientStop1 = new GradientStop();  

  
  
            gradientStop1.Offset = 0;  

  
  
            brush.GradientStops.Add(gradientStop1);  

  
  
 

  
  
            gradientStop2 = new GradientStop();  

  
  
            gradientStop2.Offset = 1;  

  
  
            brush.GradientStops.Add(gradientStop2);  

  
  
 

  
  
            Foreground = brush;  

  
  
        }  

  
  
 

  
  
        public Color Color1  

  
  
        {  

  
  
            set { gradientStop1.Color = value; }  

  
  
            get { return (Color)gradientStop1.Color; }  

  
  
        }  

  
  
 

  
  
        public Color Color2  

  
  
        {  

  
  
            set { gradientStop2.Color = value; }  

  
  
            get { return (Color)gradientStop2.Color; }  

  
  
        }  

  
  
    }  

  
  
} 
 
 

xaml中添加引用

xmlns:local="clr-namespace:NaiveGradientButtonDemo"

 
 


  
  
<!--LayoutRoot is the root grid where all page content is placed--> 

  
  
    <Grid x:Name="LayoutRoot" Background="Transparent"> 

  
  
        <Grid.RowDefinitions> 

  
  
            <RowDefinition Height="Auto"/> 

  
  
            <RowDefinition Height="*"/> 

  
  
        </Grid.RowDefinitions> 

  
  
 

  
  
        <!--TitlePanel contains the name of the application and page title--> 

  
  
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> 

  
  
            <TextBlock x:Name="ApplicationTitle" Text="NAIVEGRADIENTBUTTON DEMO" Style="{StaticResource PhoneTextNormalStyle}"/> 

  
  
            <TextBlock x:Name="PageTitle" Text="main page" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> 

  
  
        </StackPanel> 

  
  
 

  
  
        <!--ContentPanel - place additional content here--> 

  
  
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> 

  
  
            <StackPanel> 

  
  
                <local:NaiveGradientButton Content="Naive Gradient Button #1" 

  
  
                                           HorizontalAlignment="Center" /> 

  
  
                  

  
  
                <local:NaiveGradientButton Content="Naive Gradient Button #2" 

  
  
                                           Color1="Blue" Color2="Red" 

  
  
                                           HorizontalAlignment="Center" /> 

  
  
                  

  
  
                <local:NaiveGradientButton Content="Naive Gradient Button #3" 

  
  
                                           Color1="{StaticResource PhoneForegroundColor}" 

  
  
                                           Color2="{StaticResource PhoneBackgroundColor}" 

  
  
                                           HorizontalAlignment="Center" /> 

  
  
 

  
  
                <local:NaiveGradientButton Content="Naive Gradient Button #4" 

  
  
                                           Style="{StaticResource gradientButtonStyle}" /> 

  
  
            </StackPanel> 

  
  
        </Grid> 

  
  
    </Grid> 
 
 

本文转自linzheng 51CTO博客，原文链接:

http://blog.51cto.com/linzheng/1078723