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