SnipperImages(Silverlight DEMO)控件设计之--CheckBox

     在SnipperImages中使用了CheckBox控制，但它未直接使用Silverlight中的CheckBox，而是实现了自己的CheckBox控件。当然它的实现方式是采用“控件复合”的方式（下面会详细说明）。而通过这种实现方式，可以施加更多的控制和动画效果在CheckBox上，使其整体表现更酷（甚至定义第三种选中状态）。

　　当然，我们也可以通过visualstatemanager来订制 Silverlight所提供的CheckBox效果，例如下面的视频教程：

      [url]http://silverlight.net/learn/learnvideo.aspx?video=56930[/url]　　　

　　但我想写这个DEMO的人肯定是有其目的，我猜其意图是告诉我们如何进行控件的UI(xaml)绘制和事件设计。说实在的，在看其CheckBox代码之前，我还真没想过如何去实现CheckBox，一是因为是简单，二是它太基础了。不用我们去开发它，微软已把它变成“原子级”的控件封装到控制库中了。所以看到DEMO之后，才让我感到控件设计也应该从原始做起，一步一步来构造行为越来越复杂，UI越来越酷的控件。

     好了，开始今天的正文吧:)

     在SnipperImages中，CheckBox由三个 部件(所谓的部件（Parts）是指在空间模板中元素，控件逻辑将会控制这些部件来完成一些特定的控件 ）组成：

　　　Rectangle：用于绘制CheckBox外方框

        Path：用于绘制选中时的"X"图形（当然也可以按自己的意愿任意绘制）

        TextBlock：用于显示文本（提示）

      这三个对象通过Grid.ColumnDeFinitions进行布局，其中Rectangle和Path被放在一列，TextBlock一列。如下Xaml代码所示：

< ControlTemplate  xmlns ="http://schemas.microsoft.com/client/2007"
                 xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"   >
     Grid  x:Name ="Part_Root"  Width ="130"  Height ="30"  Background ="Transparent"
       Grid.ColumnDeFinitions
         ColumnDeFinition  Width ="30" /> ="*" </ Rectangle  ="Part_Box"  Grid.Column ="0" ='18'  stroke ='AliceBlue'
                 Margin ='2'  Fill ='Transparent' Path  ="Part_Check"  Visibility ="Collapsed" ='LightGreen'
                 strokeThickness ='3'  IsHitTestVisible ='False'  Data ='M10,10 L20,20 M20,10 L10,20' TextBlock  ="Part_Text" ="1"  Margin ="0,5,0"  Foreground ='Red'  FontSize ='12'
                 Text ='CheckBox' Grid     
ControlTemplate >

     因为通常CheckBox在显示时为未放中状态，所以上面的Part_Check的Visibility属性为"Collapsed"，而在选中时为“Visible”。

　  而其显示效果如下图所示(红框内容对应上面的三个元素)：

 

 

下面即是其控件的CS代码(详情见注释)：

[TemplatePart(Name  =   " Part_Root " , Type  typeof (Panel))]
[TemplatePart(Name  Part_Box (FrameworkElement))]
[TemplatePart(Name  Part_Check Part_Text (TextBlock))]
public partial class  CheckBox : Control
{
      CheckBox()
    {
         string  xaml   ResourceHelper.GetTemplate( this .GetType());
        ControlTemplate template   (ControlTemplate)XamlReader.Load(xaml);
         .Template   template;
         .ApplyTemplate();
    }

     /// <summary>
      绑定模板元素及相应事件
     </summary>
     override void  OnApplyTemplate()
    {
        Part_Root   (Panel)GetTemplateChild( );
        Part_Box   (FrameworkElement)GetTemplateChild( );
        Part_Check  );
        Part_Text   (TextBlock)GetTemplateChild( );
        Part_Box.MouseLeftButtonUp  += new  MouseButtonEventHandler(Part_Box_MouseLeftButtonUp);
    }

     #region  定义Check事件 event  EventHandler CheckedChanged;
     protected  OnCheckedChanged()
    {
         if  (CheckedChanged  != null )
        {
            CheckedChanged(  EventArgs());
        }
    }
     #endregion


      Check元素鼠标左键Up事件
     </summary> <param name="sender"></param> <param name="e"></param>  Part_Box_MouseLeftButtonUp( object  sender, MouseButtonEventArgs e)
    {
          (_isChecked) // 当在点选状态下点击时，则修改为“未选”状态
        {
            _isChecked  false ;
            Part_Check.Visibility   Visibility.Collapsed; 让选中图标"X"为"不显示"             OnCheckedChanged(); 运行绑定的客户端事件         }
         else 　 与上面操作相反 true  Visibility.Visible;
            OnCheckedChanged();
        }
    }

     private bool  _isChecked  ;
      当前控件的“选中”状态
      IsChecked
    {
         get  {  return  _isChecked; }
         set
        {
            _isChecked   value;
              (_isChecked)
            {
                Part_Check.Visibility   Visibility.Visible;
            }
            
            {
                Part_Check.Visibility   Visibility.Collapsed;
            }
        }
    }
    
      CheckBox文本
      Text
    {
          Part_Text.Text; }
          { Part_Text.Text   value; }
    }
 
      UI元素定义  Panel Part_Root;
      FrameworkElement Part_Box;
      FrameworkElement Part_Check;
      TextBlock Part_Text;
    
}

　　下面是一个使用DEMO，首先是Xaml中的定义：

 

ctl:CheckBox  ="cbFullscreen"  Text ="(全屏)复选 框"   CheckedChanged ="                    OnFullscreenCheckedChanged"

 

     接着是实现全屏复选框所执行的CS代码：

 Page2()
{
    InitializeComponent();
     绑定全屏状态触发事件     App.Current.Host.Content.FullScreenChanged   EventHandler(Content_FullScreenChanged);
}

 CheckBox示例代码  OnFullscreenCheckedChanged(  cbFullscreen.IsChecked;
}

 Content_FullScreenChanged(  (App.Current.Host.Content.IsFullScreen  == )
    {
        cbFullscreen.IsChecked  ;
    }
    
    {
        cbFullscreen.IsChecked  ;
    }
}
#endregion

　　好了，今天的内容就先到这里了:)

 

　   tag:Silverlight,ImageSnipper,checkBox,控件开发

     作者:代震军,daizhj

     原文链接:[url]http://www.cnblogs.com/daizhj/archive/2008/09/03/1282819.html[/url]

 

     源码下载，请 点击这里:)