在Silverlight2 Beta2中开发自定义控件
本文主要讲述如何在Silverlight2中开发一个自定义控件,我使用环境是VS2008 Silverlight2 Beta2。
一:创建Silverlight2 类库项目,如下图:

附件:
您所在的用户组无法下载或查看附件然后我们添加一个控件类,该可以继承自Control类,也可以继承自其他类比如ContentControl,ItemControl。我们继承自ContentControl,代码如下:

Code
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 CarySLCustomControlLib
{
public class CarySLCustomControl : ContentControl
{}
}
其实现在已经做好了一个最简单的自定义控件,我们给给他一个控件模板就可以了。在Page.xaml的Grid中添加如下代码:

Code
<custom:CarySLCustomControl>
<custom:CarySLCustomControl.Template>
<ControlTemplate>
<Grid x:Name="RootElement">
<Rectangle x:Name="BodyElement" Width="200" Height="100"
Fill="Lavender" Stroke="Purple" RadiusX="16" RadiusY="16" />
<TextBlock Text="Cary Click" HorizontalAlignment="Center"VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</custom:CarySLCustomControl.Template>
</custom:CarySLCustomControl>
效果如下图:

附件:
您所在的用户组无法下载或查看附件二:创建控件模板下面我们为控件提供一个默认的控件模板,像类库项目中添加添加Generic.xaml文件,代码如下:

Code
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:custom="clr-namespace:CarySLCustomControlLib;assembly=CarySLCustomControlLib"
<Style TargetType="custom:CarySLCustomControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="custom:CarySLCustomControl">
<Grid x:Name="RootElement">
<Rectangle x:Name="BodyElement" Width="200" Height="100"
Fill="LightCoral" Stroke="Purple" RadiusX="16" RadiusY="16" />
<TextBlock Text="Cary Click" HorizontalAlignment="Center"VerticalAlignment="Center" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
向我们的控件类CarySLCustomControl的构造函数中添加如下代码:

Code
this.DefaultStyleKey = typeof(CarySLCustomControl);
在Page.xaml中我们只需要引用控件<custom:CarySLCustomControl/>,就可以达到上面一样的效果了。
三:模板绑定我们在使用控件的时候都会做响应的属性设定,比如:

Code
<custom:CarySLCustomControl Width="500" Height="500" Background="LightGreen"/>
但是你现在做该设置是不会生效的,还仍然使用控件模板的设定,我们可以在控件模板中通过使用 {TemplateBinding ControlProperty} 的标识扩展句法来绑定到控件的属性来实现,使用ContentPresenter控件可以灵活的设置各个属性。修改后的Generic.xaml的代码如下:

Code
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:custom="clr-namespace:CarySLCustomControlLib;assembly=CarySLCustomControlLib"
<Style TargetType="custom:CarySLCustomControl">
<Setter Property="Width" Value="200" />
<Setter Property="Height" Value="100" />
<Setter Property="Background" Value="Lavender" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="custom:CarySLCustomControl">
<Grid x:Name="RootElement">
<Rectangle x:Name="BodyElement" Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}" Fill="{TemplateBinding Background}"
Stroke="Purple" RadiusX="16" RadiusY="16" />
<ContentPresenter Content="{TemplateBinding Content}"
HorizontalAlignment="Center" VerticalAlignment="Center"
FontSize="{TemplateBinding FontSize}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Page.xaml中更改控件的属性如下:

Code
<custom:CarySLCustomControl Width="250" Height="150" Background="LightGreen">
<custom:CarySLCustomControl.Content>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
<Ellipse Width="75" Height="75" Margin="10">
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin="0.25,0.25">
<GradientStop Offset="0.25" Color="LightGray" />
<GradientStop Offset="1.0" Color="DarkGoldenrod" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<TextBlock Text="Cary Click" VerticalAlignment="Center" />
</StackPanel>
</custom:CarySLCustomControl.Content>
</custom:CarySLCustomControl>
效果如下图:

附件:
您所在的用户组无法下载或查看附件原文出处:
http://www.cnblogs.com/carysun/a ... lcustomcontrol.html| 感谢原创者的辛勤劳动,希望对您有所帮助,转载请注明原出处。 |