SnipperImages(Silverlight DEMO)控件设计之--Slider和ColorSlider

     在 上一篇文章中，介绍了CheckBox控件的开发方式，包括xaml和控件逻辑(cs代码控制xaml中UI元素)。本文所要介绍的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  ="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( .source.AbsoluteUri.LastIndexOf( ));
            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]

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