Silverlight 创建 Customer Control 1：It is lookless

 

Customer Control 不像 Composite Control 一样同时拥有.Xaml 文件和Code-Behind，它只有.cs 文件，so， Lookless。

那控件怎么绘制自己呢，必须有相应的 Style 描述Control Template。 

下面我们举个例子创建一个签名控件：

1. 新建 Silverlight Class Library 项目，命名为 myControlLibrary。
2. 添加New Item =>  Silverlight Templated Control 命名为SignatureControl , 你可以看到生成一个 SignatureControl.Cs 文件和一个装有控件默认样式的 Theme 文件夹下的 Generic.xaml 文件　　　SignatureControl.cs文件的 this.DefaultStyleKey = typeof(SignatureControl); 这句话就是装载默认样式的

将 Generic.Xaml 文件改为：

<Style TargetType="local:SignatureControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:SignatureControl">
                    <Grid>
                        <InkPresenter x:Name="inkPresenter" Strokes="{TemplateBinding Strokes}" Background="{TemplateBinding Background}" RenderTransformOrigin="0.497,0.468"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

 

可以看到 Style 和ControlTemplate 的TargetType 都指向 SignatureControl。

那<InkPresenter....这个标签呢，就是我们控件要绘制的样子。我们同时要在代码里添加引用：　　using System.Windows.Ink;

 申明一个  private InkPresenter _inkPresenter = null;

怎么将绘制的 InkPresenter 和 _inkPresenter 关联起来呢？

我们可以复写这个方法    public override void OnApplyTemplate() ，这个方法在控件显示时会被调用。

方法里加入  _inkPresenter = this.GetTemplateChild("inkPresenter") as InkPresenter; 就可以关联两者了。

 

如何使用定义好的Customer Control 呢，首先添加项目引用，refrence里，大家都会就不多说了，然后在需要使用的Xaml页面添加命名空间的引用：

 xmlns:myTag="clr-namespace:myControlLibrary;assembly=myControlLibrary"

<myTag:SignatureControl StrokeMinimum="2" Height="109" Width="384">

另外我们把默认的Generic.xaml 中的Background="{TemplateBinding Background}" 改为 Background="#FFF82A0F" 

F5 就可以看看效果了。

 

这个Style只是默认的，我们可以在使用控件的xaml 页面添加一个新的 Style ，

以及新添一个Style，格式与上面完全相同：

<Style x:Key="SignatureControlStyle1" TargetType="cakeorama:SignatureControl">
   <Setter Property="Template">
    <Setter.Value>
     <ControlTemplate TargetType="cakeorama:SignatureControl">
      <Grid>
                            <InkPresenter x:Name="inkPresenter" Strokes="{TemplateBinding Strokes}" Background="#FFD82A0F"  RenderTransformOrigin="0.497,0.468"/>
      </Grid>
     </ControlTemplate>
    </Setter.Value>
   </Setter>
  </Style>

 

然后在Grid里添加一行<myTag:SignatureControl StrokeMinimum="2" Height="109" Width="384" Style="{StaticResource SignatureControlStyle1}"  />

再运行一下，发现新的stryle 也起作用了。

 

总结一下：

Silverlight 中的Customer Control 没有对应的xaml 文件，必须依赖 style 里的描述才能绘制自身，style可以是默认的，也可以自己使用时定义。

那style 里加入的控件可以通过this.GetTemplateChild("SomeControlId") as SomeControlType 传到后台去进行操作。

 

下一篇把剩下的知识点如 DependencyProperty 介绍下。