继续上节《基于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). . . . . .