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

     在SnipperImages中使用了CheckBox控制,但它未直接使用Silverlight中的CheckBox,而是实现了

自己的CheckBox控件。当然它的实现方式是采用“控件复合”的方式(下面会详细说明)。而通过这种实现

方式,可以施加更多的控制和动画效果在CheckBox上,使其整体表现更酷(甚至定义第三种选中状态)。


  当然,我们也可以通过VisualStateManager来订制 Silverlight所提供的CheckBox效果,例如下面的

视频教程:


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

  但我想写这个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"/>
        
<ColumnDefinition Width="*"/>
      
</Grid.ColumnDefinitions>
      
<Rectangle x:Name="Part_Box" Grid.Column="0" Width='18' Height='18' Stroke='AliceBlue'
                 Margin
='2' Fill='Transparent'/>
      
<Path x:Name="Part_Check" Grid.Column="0" Visibility="Collapsed" Stroke='LightGreen'
                 StrokeThickness
='3' IsHitTestVisible='False' Data='M10,10 L20,20 M20,10 L10,20'/>
      
<TextBlock x:Name="Part_Text" Grid.Column="1" Margin="0,5,0,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", Type = typeof(FrameworkElement))]
[TemplatePart(Name 
= "Part_Check", Type = typeof(FrameworkElement))]
[TemplatePart(Name 
= "Part_Text", Type = typeof(TextBlock))]
public partial class CheckBox : Control
{
    
public CheckBox()
    {
        
string xaml = ResourceHelper.GetTemplate(this.GetType());
        ControlTemplate template 
= (ControlTemplate)XamlReader.Load(xaml);
        
this.Template = template;
        
this.ApplyTemplate();
    }

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

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


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

    
private bool _isChecked = false;
    
/// <summary>
    
/// 当前控件的“选中”状态
    
/// </summary>
    public bool IsChecked
    {
        
get { return _isChecked; }
        
set
        {
            _isChecked 
= value;
            
if (_isChecked)
            {
                Part_Check.Visibility 
= Visibility.Visible;
            }
            
else
            {
                Part_Check.Visibility 
= Visibility.Collapsed;
            }
        }
    }
    
    
/// <summary>
    
/// Checkbox文本
    
/// </summary>
    public string Text
    {
        
get { return Part_Text.Text; }
        
set { Part_Text.Text = value; }
    }
 
    
#region UI元素定义
    
private Panel Part_Root;
    
private FrameworkElement Part_Box;
    
private FrameworkElement Part_Check;
    
private TextBlock Part_Text;
    
#endregion
}
复制代码


  下面是一个使用DEMO,首先是Xaml中的定义:

 

 <ctl:CheckBox x:Name="cbFullscreen" Text="(全屏)复选框"  CheckedChanged="
                   OnFullscreenCheckedChanged"/>

 


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

复制代码
public Page2()
{
    InitializeComponent();
    
//绑定全屏状态触发事件
    App.Current.Host.Content.FullScreenChanged += new EventHandler(Content_FullScreenChanged);
}

#region CheckBox示例代码
void OnFullscreenCheckedChanged(object sender, EventArgs e)
{
    App.Current.Host.Content.IsFullScreen 
= cbFullscreen.IsChecked;
}

void Content_FullScreenChanged(object sender, EventArgs e)
{
    
if (App.Current.Host.Content.IsFullScreen == true)
    {
        cbFullscreen.IsChecked 
= true;
    }
    
else
    {
        cbFullscreen.IsChecked 
= false;
    }
}
#endregion
复制代码


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

 

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

     作者:代震军,daizhj

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

 

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


 

posted @   代震军  阅读(2990)  评论(5编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示