SilverLight Customer Control

新建立一个SL Class .删除默认的CS文件

加一个模板文件

 

Generic.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:customerControl">
    <Style TargetType="local:CustomerPanel">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:CustomerPanel">
                    <!--<Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                    </Border>-->
                    <Grid >
                        <Rectangle x:Name="panelFrame" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"
                                   RadiusX="{TemplateBinding myRadiusX}" RadiusY="{TemplateBinding myRadiusY}"/> 
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

CustomerControl.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace customerControl
{
    public class CustomerPanel : ContentControl
    {
        /*注意两个相关依赖属性,这样把控件放到实际中可改变属性*/
        protected  static readonly DependencyProperty RadiusXProperty = DependencyProperty.Register("myRadiusX", typeof(double), typeof(CustomerPanel), null);//请注意myRadiusX 和XAML中的对应

        public double myRadiusX
        {
            get { return (double)GetValue(RadiusXProperty); }
            set { SetValue(RadiusXProperty, value); }
        }

        protected static readonly DependencyProperty RadiusYProperty = DependencyProperty.Register("myRadiusY", typeof(double), typeof(CustomerPanel), null);

        public double myRadiusY
        {
            get { return (double)GetValue(RadiusYProperty); }
            set { SetValue(RadiusYProperty, value); }
        }

        public MouseButtonEventHandler onClick;//注册一个事件

        public CustomerPanel()
        {
            this.DefaultStyleKey = typeof(CustomerPanel);
            setPropertyDefault();
        }

        protected void setPropertyDefault()
        {
            /* all width/height  are 0.0*/
            //if (this.ActualWidth == null && this.ActualWidth !=0)
            //{
            //    this.myRadiusX = ActualWidth * 0.1;
            //}
            //if (this.ActualHeight == null && this.ActualHeight != 0)
            //{
            //    this.myRadiusY = ActualHeight * 0.1;
            //}
            

        }
        public override void OnApplyTemplate()
        {
            Rectangle panelFrame = this.GetTemplateChild("panelFrame") as Rectangle; /*不能用this. 而要用这种方式*/
            panelFrame.MouseLeftButtonUp += new MouseButtonEventHandler(panelFrame_MouseLeftButtonUp);//绑定事件
        }

       void panelFrame_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            if (onClick != null)
            {
                onClick(sender, e);//执行触发事件
            }
            else
            {
               
            }
        }

        
    }
}

用法：

<UserControl x:Class="BookLib.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:myControl="clr-namespace:customerControl;assembly=customerControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot">
        <myControl:CustomerPanel Background="Orange" BorderBrush="Green" myRadiusX="10" myRadiusY="10" />
    </Grid>
</UserControl>

结构：

好了，到此一个Customer Control完成的差不多了！