分类导航

silverlight 发布时间：2022-05-04 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了SnipperImages(Silverlight DEMO)控件设计之--Slider和ColorSlider，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

概述

在上一篇文章中，介绍了checkBox控件的开发方式，包括xaml和控件逻辑(cs代码控制xaml中UI元素)。本文所要介绍的Slider控件在xaml上与checkBox复杂度相似，比较底。而控件逻辑相对要复杂不少，这些逻辑会在本文中进行介绍。好了，开始今天的正文。首先看一下这个演示页，如下：　　注：因为我从网上所获得的源码中Slider控件并没有全部开发完

   在上一篇文章中，介绍了checkBox控件的开发方式，包括xaml和控件逻辑(cs代码控制xaml中UI元素)。本文所要介绍的Slider控件在xaml上与checkBox复杂度相似，比较底。而控件逻辑相对要复杂不少，这些逻辑会在本文中进行介绍。

     好了，开始今天的正文。

     首先看一下这个演示页，如下：

　　注：因为我从网上所获得的源码中Slider控件并没有全部开发完，起码在上面所示的垂直Slider只是粗略的定义了xaml（其中某些值还有错误），而CS代码就少得更多了。本人在原有代码基础上，完成了垂直Slider的开发，并修正了原有的CS代码中的BUG。

而该控件的xaml代码如下所示(Slider.xaml)：

< ControlTemplate xmlns ="http://scheR_633_11845@as.microsoft.com/client/2007"
                 xmlns:x ="http://scheR_633_11845@as.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 450_151@</ 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( E)
    {
         (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( E)
    {
        FrameworkElement thumb (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( E)
    {
        FrameworkElement thumb (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;
    }
}

接着再来看一下如何使用这两个控件（也就是本文第一张图所演示的@L_874_38@），其page逻辑代码如下：

Page2 : UserControl
{
Page2()
     {
            initializeComponent();

             Slider测试代码,加载图片并添加演示缩放旋转的Transform

             baseUri Application.Current.Host.source.AbsoluteUri.SubString(                                     Application.Current.Host.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( E)
    {
    　   水平Slider设置背景色         SliderPanel.BACkground SolidColorBrush(ColorSlider.GetColor());
    }

     ColorSlider2_ValueChanged( E)
    {
    　　垂直Slider设置背景色         SliderPanel2.BACkground SolidColorBrush(ColorSlider2.GetColor());
    }

     private opacitySlider_ValueChanged( E)
    {　
    　　设置图像的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]

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