本文所要介绍的SlIDer控件在xaml上与CheckBox复杂度相似，比较底。而控件逻辑相对要复杂不少，这些
逻辑会在本文中进行介绍。
好了，开始今天的正文。
首先看一下这个演示页，如下：
注：因为我从网上所获得的源码中SlIDer控件并没有全部开发完，起码在上面所示的垂直SlIDer只是粗
略的定义了xaml（其中某些值还有错误），而CS代码就少得更多了。本人在原有代码基础上，完成了垂直
SlIDer的开发，并修正了原有的CS代码中的BUG。
而该控件的xaml代码如下所示(SlIDer.xaml)：
< ControlTemplate xmlns ="http://schemas.microsoft.com/clIEnt/2007"
xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" >
< GrID x:name ="Part_Root" WIDth ="200" Height ="24" >
< Canvas x:name ="Part_border" Background ="transparent" >
< line x:name ='Part_line' strokeThickness ="1" stroke ="Blue" X1 ="4" X2 ="196" Y1 ="12"
Y2 ="12" />
< Path x:name ='Part_ThumbHorizontal' Canvas.top ='3' Data ='M0,0 L16,0 L8,18z' Fill ='Silver'
stroke ='Black' />
< Path x:name ='Part_ThumbVertical' Canvas.left ='3' Visibility ="Collapsed"
Data ='M0,0 L18,8 L0,16z' Fill ='Silver' stroke ='Black' />
</ Canvas >
</ GrID >
</ ControlTemplate >
从上面代码可以看出，SlIDer由四个主要元素组成：
Part_border：用于绘制背景色(如colorSlIDer控件的背景色)
Part_line：用于绘制滑动的中线
Part_ThumbHorizontal：用于绘制水平滑块
Part_ThumbVertical：用于绘制垂直滑块
下面这张图标识了各元素在控件中的对应位置和关系：
对应上图，下面是colorSlIDer的xaml代码：
< ControlTemplate xmlns ="http://schemas.microsoft.com/clIEnt/2007"
xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" >
< GrID x:name ="Part_Root" WIDth ='200' Height ='24' >
< Canvas x:name ='Part_border' >
< Canvas.Background >
< linearGradIEntBrush x:name ="GradIEntBrush" StartPoint ="0,0" EndPoint ="1,0" >
< GradIEntStop color ="#FF000000" Offset ="0" />
< GradIEntStop color ="#FFFF0000" Offset ="0.143" />
< GradIEntStop color ="#FF00FF00" Offset ="0.286" />
< GradIEntStop color ="#FF0000FF" Offset ="0.429" />
< GradIEntStop color ="#FF00FFFF" Offset ="0.571" />
< GradIEntStop color ="#FFFF00FF" Offset ="0.714" />
< GradIEntStop color ="#FFFFFF00" Offset ="0.857" />
< GradIEntStop color ="#FFFFFFFF" Offset ="1" />
</ linearGradIEntBrush >
</ Canvas.Background >
< line x:name ='Part_line' strokeThickness ="1" stroke ="Blue" X1 ="4" X2 ="196" Y1 ="12" Y2 ="12" />
< Path x:name ='Part_ThumbHorizontal' Canvas.top ='3' Data ='M0,18z' Fill ='Silver'
stroke ='Black' />
< Path x:name ='Part_ThumbVertical' Canvas.left ='3' Visibility ="Collapsed"
Data ='M0,16z' Fill ='Silver' stroke ='Black' />
</ Canvas >
</ GrID >
</ ControlTemplate >
说完了xaml，下面开始介绍cs控件逻辑代码。
首先要说的是一个枚举类型，用于标识滑动方向(垂直或水平):
/// <summary>
/// 滑动条方向类型
/// </summary>
public enum SlIDerOrIEntation
{
/// <summary>
/// 垂直
/// </summary>
Vertical,
/// <summary>
/// 水平
/// </summary>
Horizontal
}
而控件的核心代码如下(有关我修改或添加的部分已通过注释说明)：
/// <summary>
/// 滑动条控制类
/// </summary>
[TemplatePart(name = " Part_Root " , Type = typeof (Panel))]
[TemplatePart(name = " Part_border " , Type = typeof (FrameworkElement))]
[TemplatePart(name = " Part_ThumbHorizontal " , Type = typeof (FrameworkElement))]
[TemplatePart(name = " Part_ThumbVertical " , Type = typeof (FrameworkElement))]
[TemplatePart(name = " Part_line " , Type = typeof (FrameworkElement))]
public partial class SlIDer : Control
{
public SlIDer()
{
string xaml = ResourceHelper.GetTemplate( this .GetType());
ControlTemplate template = (ControlTemplate)XamlReader.Load(xaml);
this .Template = template;
this .ApplyTemplate();
}
public event EventHandler ValueChanged;
/// <summary>
/// 值改变时
/// </summary>
protected voID OnValueChanged()
{
if (ValueChanged != null )
{
// 执行绑定代码
ValueChanged( this , new EventArgs());
}
}
/// <summary>
/// 绑定模板元素及相应事件
/// </summary>
public overrIDe voID OnApplyTemplate()
{
Part_Root = (Panel)GetTemplateChild( " Part_Root " );
Part_line = (line)GetTemplateChild( " Part_line " );
Part_ThumbHorizontal = (FrameworkElement)GetTemplateChild( " Part_ThumbHorizontal " );
Part_ThumbVertical = (FrameworkElement)GetTemplateChild( " Part_ThumbVertical " );
Part_border = (FrameworkElement)GetTemplateChild( " Part_border " );
Part_ThumbHorizontal.MouseleftbuttonDown += new MousebuttonEventHandler(Part_Thumb_MouseleftbuttonDown);
Part_ThumbHorizontal.MouseMove += new MouseEventHandler(Part_Thumb_MouseMove);
Part_ThumbHorizontal.MouseleftbuttonUp += new MousebuttonEventHandler(Part_Thumb_MouseleftbuttonUp);
Part_ThumbVertical.MouseleftbuttonDown += new MousebuttonEventHandler(Part_Thumb_MouseleftbuttonDown);
Part_ThumbVertical.MouseMove += new MouseEventHandler(Part_Thumb_MouseMove);
Part_ThumbVertical.MouseleftbuttonUp += new MousebuttonEventHandler(Part_Thumb_MouseleftbuttonUp);
Part_Root.MouseLeave += new MouseEventHandler(Part_Root_MouseLeave);
Part_Root.MouseEnter += new MouseEventHandler(Part_Root_MouseEnter);
Part_border.MouseleftbuttonDown += new MousebuttonEventHandler(Part_border_MouseleftbuttonDown);
}
/// <summary>
/// 当鼠标在滑动条(不是滑块)上点击时，将滑块设置到鼠标点击位置
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
voID Part_border_MouseleftbuttonDown( object sender, MousebuttonEventArgs e)
{
// 当不是滑块时
if (e.source != Part_ThumbHorizontal && e.source != Part_ThumbVertical)
{
Point newPos = e.Getposition(Part_Root);
{
if (_orIEntation == SlIDerOrIEntation.Horizontal)
{
Part_ThumbHorizontal.SetValue(Canvas.leftProperty, Math.Min(newPos.X,
Part_border.ActualWIDth - Part_ThumbHorizontal.ActualWIDth));
}
else
{
Part_ThumbVertical.SetValue(Canvas.topProperty, Math.Min(newPos.Y,
Part_border.ActualHeight - Part_ThumbVertical.ActualHeight));
}
this .OnValueChanged();
}
}
}
/// <summary>
/// 鼠标进入滑动条区域
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
voID Part_Root_MouseEnter( object sender, MouseEventArgs e)
{
if (hasCapture)
{
if (_orIEntation == SlIDerOrIEntation.Horizontal)
{
Part_ThumbHorizontal.CaptureMouse();
}
else
{
Part_ThumbVertical.CaptureMouse();
}
}
else
{
_mouseDownValue = - 1 ;
}
}
/// <summary>
/// 鼠标离开滑动条区域
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
voID Part_Root_MouseLeave( object sender, MouseEventArgs e)
{
if (_orIEntation == SlIDerOrIEntation.Horizontal)
{
Part_ThumbHorizontal.ReleaseMouseCapture();
}
else
{
Part_ThumbVertical.ReleaseMouseCapture();
}
}
/// <summary>
/// 鼠标按下滑动块
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
voID Part_Thumb_MouseleftbuttonDown( object sender, MousebuttonEventArgs e)
{
FrameworkElement thumb = (FrameworkElement)sender;
// 在当前滑动块上设置“鼠标捕获”
thumb.CaptureMouse();
hasCapture = true ;
_thumbMouseDown = e.Getposition(Part_Root);
if (_orIEntation == SlIDerOrIEntation.Horizontal) // 当为水平方向时
{
// 获取滑动块的“左”值属性
_mouseDownValue = ( double )thumb.GetValue(Canvas.leftProperty);
}
else
{
// 获取滑动块的“顶”值属性
_mouseDownValue = ( double )thumb.GetValue(Canvas.topProperty);
}
}
/// <summary>
/// 鼠标拖动滑动块移动
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
voID Part_Thumb_MouseMove( object sender, MouseEventArgs e)
{
FrameworkElement thumb = (FrameworkElement)sender;
Point newPos = e.Getposition(Part_Root);
if (_orIEntation == SlIDerOrIEntation.Horizontal)
{
double newX = newPos.X - _thumbMouseDown.X + _mouseDownValue;
if (_mouseDownValue != - 1 &&
newX <= Part_border.ActualWIDth - 8 &&
newX >= - 8 )
{
thumb.SetValue(Canvas.leftProperty, newX); // 仅在水平方向上移动
this .OnValueChanged();
}
}
else
{
double newY = newPos.Y - _thumbMouseDown.Y + _mouseDownValue;
if (_mouseDownValue != - 1 &&
newY <= Part_border.ActualHeight - 8 &&
newY >= - 8 )
{
thumb.SetValue(Canvas.topProperty, newY); // 仅在垂直方向上移动
this .OnValueChanged();
}
}
}
/// <summary>
/// 鼠标拖动结束
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
voID Part_Thumb_MouseleftbuttonUp( object sender, MousebuttonEventArgs e)
{
FrameworkElement thumb = (FrameworkElement)sender;
_mouseDownValue = - 1 ;
thumb.ReleaseMouseCapture();
hasCapture = false ;
}
/// <summary>
/// 设置滑动条的宽
/// </summary>
public double SlIDerWIDth
{
get { return Part_Root.WIDth; }
set
{
if (_orIEntation == SlIDerOrIEntation.Horizontal)
{
// 水平方向上设置
Part_line.X2 = value;
Part_Root.WIDth = value;
}
else
{
// 获取SlIDer.xaml中的相应属性配置
Part_line.X1 = Part_line.X2 = value / 2d;
Part_ThumbVertical.SetValue(Canvas.leftProperty, value / 2d - Part_ThumbVertical.ActualWIDth / 2d);
}
}
}
/// <summary>
/// 设置滑动条的高度
/// </summary>
public double SlIDerHeight
{
get { return Part_Root.Height; }
set
{
if (_orIEntation == SlIDerOrIEntation.Horizontal)
{
// 获取SlIDer.xaml中的相应属性配置
Part_line.Y1 = Part_line.Y2 = value / 2d;
Part_ThumbHorizontal.SetValue(Canvas.topProperty, value / 2d - Part_ThumbHorizontal.ActualHeight / 2d);
}
else
{
// 垂直方向上设置
Part_line.Y2 = value;
Part_Root.Height = value;
}
}
}
/// <summary>
/// 获取或设置滑动条的当前值
/// </summary>
public double Value
{
get
{
if (_orIEntation == SlIDerOrIEntation.Horizontal)
{
double val = ( double )Part_ThumbHorizontal.GetValue(Canvas.leftProperty) / (Part_Root.ActualWIDth - 8 );
val = Math.Max(0d, val);
val = Math.Min(val, 1d);
return val;
}
else
{
double val = ( double )Part_ThumbVertical.GetValue(Canvas.topProperty) / (Part_Root.ActualHeight - 8 );
val = Math.Max(0d, 1d);
return val;
}
}
set
{
if (_orIEntation == SlIDerOrIEntation.Horizontal)
{
Part_ThumbHorizontal.SetValue(Canvas.leftProperty, value * (Part_Root.WIDth - 8 ));
}
else
{
Part_ThumbVertical.SetValue(Canvas.topProperty, value * (Part_Root.Height - 8 ));
}
}
}
/// <summary>
/// 获取或设置滑动条的方向，参见SlIDerOrIEntation
/// </summary>
public SlIDerOrIEntation OrIEntation
{
get { return _orIEntation; }
set
{
_orIEntation = value;
if (_orIEntation == SlIDerOrIEntation.Horizontal)
{
Part_ThumbVertical.Visibility = Visibility.Collapsed;
Part_ThumbHorizontal.Visibility = Visibility.Visible;
Part_line.Y1 = Part_line.Y2 = Part_Root.Height / 2d;
Part_line.X1 = 0d;
Part_line.X2 = Part_Root.WIDth;
}
else
{
// 注：此处代码为本人所加，用于当为垂直方向时，交换WIDth与Height的值
double temp = Part_Root.WIDth;
Part_Root.WIDth = Part_Root.Height;
Part_Root.Height = temp;
Part_ThumbHorizontal.Visibility = Visibility.Collapsed;
Part_ThumbVertical.Visibility = Visibility.Visible;
Part_line.X1 = Part_line.X2 = Part_Root.WIDth / 2d;
Part_line.Y1 = 0d;
Part_line.Y2 = Part_Root.Height;
}
}
}
#region UI元素声明
protected Panel Part_Root;
protected line Part_line;
protected FrameworkElement Part_border, Part_ThumbVertical, Part_ThumbHorizontal;
#endregion
protected Point _thumbMouseDown;
protected double _mouseDownValue = - 1 ;
protected bool hasCapture = false ;
protected SlIDerOrIEntation _orIEntation = SlIDerOrIEntation.Horizontal;
}
下面代介绍的是colorSlIDer控件的控件逻辑cs文件（详情看注释）：
/// <summary>
/// 颜色滑动条控制
/// </summary>
public partial class colorSlIDer : SlIDer
{
public colorSlIDer()
{
string xaml = ResourceHelper.GetTemplate( this .GetType());
ControlTemplate template = (ControlTemplate)XamlReader.Load(xaml);
this .Template = template;
base .ApplyTemplate();
}
/// <summary>
/// 该方法为本人所加，用户当滑动条方向为“垂直”时，重新设置“GradIEntBrush”的“EndPoint”属性
/// </summary>
public new SlIDerOrIEntation OrIEntation
{
get { return base .OrIEntation; }
set
{
base .OrIEntation = value;
// 当为垂直方向时
if (value == SlIDerOrIEntation.Vertical)
{
((linearGradIEntBrush)GetTemplateChild( " GradIEntBrush " )).EndPoint = new Point( 0 , 1 );
}
}
}
/// <summary>
/// 获取颜色值
/// </summary>
/// <returns></returns>
public color Getcolor()
{
return this .Getcolor( 255 );
}
/// <summary>
/// 将滑动条值(Value)转换为ARGB 颜色值并返回
/// </summary>
/// <param name="Alpha"> Alpha通道，该值介于0到255 </param>
/// <returns> ARGB 颜色值 </returns>
public color Getcolor( byte Alpha)
{
color color;
double value = this .Value;
// 将滑动条的值转换为 ARGB 颜色值
if (value < 0.143d )
{
color = color.FromArgb(Alpha, ( byte )Math.Floor((value * 256d) / 0.143d ), 0 , 0 );
}
else if (value < 0.286d )
{
color = color.FromArgb(Alpha, ( byte )Math.Floor(256d * ( 0.286d - value) / 0.143d ),
( byte )Math.Floor(256d * (value - 0.143d ) / 0.143d ), 0 );
}
else if (value < 0.429 )
{
color = color.FromArgb(Alpha, ( byte )Math.Floor(256d * ( 0.429d - value) / 0.143d ),
( byte )Math.Floor(256d * (value - 0.286d ) / 0.143d ));
}
else if (value < 0.571 )
{
color = color.FromArgb(Alpha, ( byte )Math.Floor(256d * (value - 0.429d ) / 0.143d ), 255 );
}
else if (value < 0.714 )
{
color = color.FromArgb(Alpha, ( byte )Math.Floor(256d * (value - 0.571d ) / 0.143d ),
( byte )Math.Floor(256d * ( 0.714d - value) / 0.143d ), 255 );
}
else if (value < 0.857 )
{
color = color.FromArgb(Alpha, 255 , ( byte )Math.Floor(256d * (value - 0.714d ) / 0.143d ),
( byte )Math.Floor(256d * ( 0.857d - value) / 0.143d ));
}
else
{
color = color.FromArgb(Alpha, ( byte )Math.Floor(256d * (value - 0.857d ) / 0.143d ));
}
return color;
}
}
接着再来看一下如何使用这两个控件（也就是本文第一张图所演示的效果），其page逻辑代码如下：
public partial class Page2 : UserControl
{
public Page2()
{
InitializeComponent();
#region SlIDer测试代码,加载图片并添加演示缩放旋转的transform
string baseUri = Application.Current.Host.source.absoluteUri.Substring( 0 ,
Application.Current.Host.source.absoluteUri.LastIndexOf( " / " ));
currentimage.SetValue(Image.sourceProperty, new BitmAPImage(
new Uri(String.Concat(baseUri, " /../Images/j0433157.jpg " ))));
transformGroup transforms = new transformGroup();
transforms.Children.Add( new Scaletransform());
transforms.Children.Add( new Rotatetransform());
currentimage.Rendertransform = transforms;
currentimage.RendertransformOrigin = new Point( 0.5 , 0.5 );
#endregion
}
#region SlIDer示例代码
voID colorSlIDer_ValueChanged( object sender, EventArgs e)
{
// 水平SlIDer设置背景色
SlIDerPanel.Background = new SolIDcolorBrush(colorSlIDer.Getcolor());
}
voID colorSlIDer2_ValueChanged( object sender, EventArgs e)
{
// 垂直SlIDer设置背景色
SlIDerPanel2.Background = new SolIDcolorBrush(colorSlIDer2.Getcolor());
}
private voID opacitySlIDer_ValueChanged( object sender, EventArgs e)
{
// 设置图像的Opacity属性
currentimage.Opacity = 1d - opacitySlIDer.Value;
}
private voID transformSlIDer_ValueChanged( object sender, EventArgs e)
{
// 设置旋转属性
((Rotatetransform)((transformGroup)currentimage.Rendertransform).Children[ 1 ]).Angle =
(transformSlIDer.Value - 0.5d ) * 720d;
// 设置缩放属性
((Scaletransform)((transformGroup)currentimage.Rendertransform).Children[ 0 ]).ScaleX =
transformSlIDer.Value * 2d;
((Scaletransform)((transformGroup)currentimage.Rendertransform).Children[ 0 ]).ScaleY =
transformSlIDer.Value * 2d;
}
#endregion
}
好了，今天的内容就先到这里了。
tag:silverlight,slIDer,colorslIDer,imagesnipper
作者:代震军,daizhj
原文链接:http://www.cnblogs.com/daizhj/archive/2008/09/04/1284228.HTML
源码下载，请 点击这里:) 总结
以上是内存溢出为你收集整理的SnipperImages(Silverlight DEMO)控件设计之--Slider和ColorSlider全部内容，希望文章能够帮你解决SnipperImages(Silverlight DEMO)控件设计之--Slider和ColorSlider所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）