Nomatic
不积跬步无以至千里

     继续上节《基于Silverlight智能表单设计开发(一)》,从这一节开始对系统进行类设计,采用简单表意类图为主和关键代码片段为辅来进行描述,表达我的设计思路。下面我从表单设计锚点类设计为起点,逐步展开、自底向上进行分析。

     锚点是当控件被选中时在控件四周出现的小矩形框,鼠标通过拖拽小矩形框(锚点)来改变控件的高度和宽度,同时设置控件锚点的可见性向用户表明控件是否被选中。如下图所示:

    一、锚点类(Auchor)   

     锚点类主要包含锚点方位属性(AuchorLocation)用于确定锚点在控件上所处的位置,如:左上方、上中、右上方等。

     1、类图

     

     2、代码片段

     首先看Auchor锚点界面XML代码,在XML代码的作用主要是通过Rectangle画一个小正方形,正方形边框宽为1px,边框颜色是黑色,并用浅蓝色画笔填充:

     

<Grid x:Name="LayoutRoot" >
<Rectangle x:Name="rtg" Stroke="Black" StrokeThickness="1" Cursor="Hand" Fill="#FFCBC8DD"></Rectangle>
</Grid>

     Auchor锚点类实现代码,锚点类主要通过Location方位属性来设置锚点所处方位,以及与方位对应的光标:

 

代码
/// <summary>
/// 锚点方位
/// </summary>
public enum AuchorLocation { 上左,上中,上右,右中,左中,下左,下中,下右}
/// <summary>
/// 锚点控件类
/// </summary>
public partial class Auchor : UserControl
{
AuchorLocation location;
/// <summary>
/// 获取或设置锚点方位
/// </summary>
public AuchorLocation Location
{
get { return location; }
set
{
location
= value;
if (value == AuchorLocation.上右 || value==AuchorLocation.下左) rtg.Cursor = Cursors.SizeNESW;
if (value == AuchorLocation.上左 || value == AuchorLocation.下右) rtg.Cursor = Cursors.SizeNWSE;
if (value == AuchorLocation.上中 || value == AuchorLocation.下中) rtg.Cursor = Cursors.SizeNS;
if (value == AuchorLocation.右中 || value == AuchorLocation.左中) rtg.Cursor = Cursors.SizeWE;
}
}


}

 

     以上就是锚点的设计及实现方法,锚点是智能表单设计的基础元素,先解决它为后继工作做好准备,在下一章节中我们将涉及另一个基础元素设计容器类(DesignRectangle). . . . . .

 

   

 

 

 

posted on 2010-12-03 23:23  刘其武  阅读(3271)  评论(5编辑  收藏  举报