WPF自定义控件之双滑块Slider

　　今天写搜索界面，有许多值范围搜索的项，先是做了两个Textbox加两个Slider来实现选择起始->结束值的范围，后来发现这样用户操作性太不好，前台代码又很臃肿，干脆想办法写了个自定义的控件。首先来看下最终效果吧：

   

　　具体的交互基本就是左边框是起始值，右边框是终止值，它们数据的是和两个滑块绑定的，会互相更新。左边的滑块是不能拖到右边滑块之外的，同理右边也不能到左边，如果输入的值超出（小于）上限值（下限），则会把值取为上限值（下限）。

　　我的思路就是定义两个Slider，然后拼起来，哈哈！好吧，来看前台代码：

<UserControl x:Class="FS.PresentationManagement.Controls.SilderArrange"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Name="UC_Arrange" Loaded="UC_Arrange_Loaded">
    <StackPanel Orientation="Horizontal" Height="{Binding ElementName=UC_Arrange,Path=SilderHeight}" >
        <TextBox Text="{Binding ElementName=SL_Bat1,Path=Value}" KeyUp="TextBox_KeyUp1" Width="35" Margin="0,3" BorderBrush="CornflowerBlue" />
        <Canvas Width="{Binding ElementName=UC_Arrange,Path=SilderWidth}" Margin="0,0,5,0">
            <Slider Name="SL_Bat1"
                Value="{Binding ElementName=UC_Arrange,Path=StartValue}"
                Minimum="{Binding ElementName=UC_Arrange,Path=Minimum}"
                Maximum="{Binding ElementName=UC_Arrange,Path=Maximum}"
                SelectionStart="{Binding ElementName=UC_Arrange,Path=StartValue}"
                SelectionEnd="{Binding ElementName=UC_Arrange,Path=EndValue}"
                Width="{Binding ElementName=UC_Arrange,Path=SilderWidth}"
                TickFrequency="{Binding ElementName=UC_Arrange,Path=SliderTickFrequency}"
                FocusVisualStyle="{x:Null}"
                CacheMode="BitmapCache"
                IsSelectionRangeEnabled="True"
                TickPlacement="BottomRight"
                IsSnapToTickEnabled="True"
                VerticalAlignment="Center"
                Margin="2"
                ValueChanged="SL_Bat1_ValueChanged">
                <Slider.Clip>
                    <RectangleGeometry Rect="{Binding ElementName=UC_Arrange,Path=StartRect}" />
                </Slider.Clip>
            </Slider>
            <Slider Name="SL_Bat2" 
                Value="{Binding ElementName=UC_Arrange,Path=EndValue}" 
                Minimum="{Binding ElementName=UC_Arrange,Path=Minimum}" 
                Maximum="{Binding ElementName=UC_Arrange,Path=Maximum}" 
                SelectionStart="{Binding ElementName=UC_Arrange,Path=StartValue}" 
                SelectionEnd="{Binding ElementName=UC_Arrange,Path=EndValue}" 
                Width="{Binding ElementName=UC_Arrange,Path=SilderWidth}"
                TickFrequency="{Binding ElementName=UC_Arrange,Path=SliderTickFrequency}"
                FocusVisualStyle="{x:Null}"
                CacheMode="BitmapCache"
                IsSelectionRangeEnabled="True"                
                TickPlacement="BottomRight"
                IsSnapToTickEnabled="True"
                VerticalAlignment="Center"
                Margin="2"
                ValueChanged="SL_Bat2_ValueChanged">
                <Slider.Clip>
                    <RectangleGeometry Rect="{Binding ElementName=UC_Arrange,Path=EndRect}" />
                </Slider.Clip>                
            </Slider>
        </Canvas>
        <TextBox Text="{Binding ElementName=SL_Bat2,Path=Value}" KeyUp="TextBox_KeyUp2" Width="35" Margin="0,3" BorderBrush="CornflowerBlue"/>        
    </StackPanel>
</UserControl>

　　没错，我这里用的是Canvas，让两个Slider重叠，然后通过Clip剪裁，然后各个控件的值基本都是绑定到了后台的依赖属性，剪裁的矩形范围也不例外，后台会根据滑块的位置实时更新前台界面，让它们看起来很“和谐”。考虑到剪裁可能产生的效率问题，我把两个Slider的CacheMode都设置成了“BitmapCache”，也就是说会用GPU来计算界面元素。FocusVisualStyle="{x:Null}"这个设置则是让XP的机器显示Slider的时候不会出现很丑的虚线框。
　　至于其它设置，都是常规的设置了，这些绑定到后台的除了剪裁的依赖属性设置的是private外，其它都是public，也就是说，使用的时候可以自己再给这些属性赋值。

　　来看下后台代码吧：

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace FS.PresentationManagement.Controls
{
    /// <summary>
    /// 双滑块Slider 
    /// By lekko
    /// </summary>
    public partial class SilderArrange : UserControl
    {
        #region 私有变量

        private static int _width = 150;  // 拖动条初始宽度
        private static int _height = 30;  // 高度
        private static int _min = 0;      // 最小值
        private static int _max = 100;    // 最大值
        private static int _freq = 10;    // 出现刻度的间距

        #endregion

        // 构造函数
        public SilderArrange()
        {
            InitializeComponent();            
        }        

        #region 私有属性

        /// <summary>
        /// 裁剪矩阵（头）
        /// </summary>
        private Rect StartRect
        {
            get { return (Rect)GetValue(StartRectProperty); }
            set { SetValue(StartRectProperty, value); }
        }
        private static readonly DependencyProperty StartRectProperty =
            DependencyProperty.Register("StartRect", typeof(Rect), typeof(SilderArrange));

        /// <summary>
        /// 裁剪矩阵（尾）
        /// </summary>
        private Rect EndRect
        {
            get { return (Rect)GetValue(EndRectProperty); }
            set { SetValue(EndRectProperty, value); }
        }
        private static readonly DependencyProperty EndRectProperty =
            DependencyProperty.Register("EndRect", typeof(Rect), typeof(SilderArrange));

        #endregion

        #region 公开依赖属性

        /// <summary>
        /// 刻度间距，默认为10
        /// </summary>
        public int SliderTickFrequency
        {
            get { return (int)GetValue(SliderTickFrequencyProperty); }
            set { SetValue(SliderTickFrequencyProperty, value); }
        }
        public static readonly DependencyProperty SliderTickFrequencyProperty =
            DependencyProperty.Register("SliderTickFrequency", typeof(int), typeof(SilderArrange), new PropertyMetadata(_freq));

        /// <summary>
        /// 控件高度，默认为30
        /// </summary>
        public int SilderHeight
        {
            get { return (int)GetValue(SilderHeightProperty); }
            set { SetValue(SilderHeightProperty, value); }
        }
        public static readonly DependencyProperty SilderHeightProperty =
            DependencyProperty.Register("SilderHeight", typeof(int), typeof(SilderArrange), new PropertyMetadata(_height));

        /// <summary>
        /// 拖动条宽度，默认为150
        /// </summary>
        public int SilderWidth
        {
            get { return (int)GetValue(SilderWidthProperty); }
            set { SetValue(SilderWidthProperty, value); }
        }
        public static readonly DependencyProperty SilderWidthProperty =
            DependencyProperty.Register("SilderWidth", typeof(int), typeof(SilderArrange), new PropertyMetadata(_width));

        /// <summary>
        /// 最小值，默认为0
        /// </summary>
        public int Minimum
        {
            get { return (int)GetValue(MinimumProperty); }
            set { SetValue(MinimumProperty, value); }
        }
        public static readonly DependencyProperty MinimumProperty =
            DependencyProperty.Register("Minimum", typeof(int), typeof(SilderArrange), new PropertyMetadata(_min));

        /// <summary>
        /// 最大值，默认为100
        /// </summary>
        public int Maximum
        {
            get { return (int)GetValue(MaximumProperty); }
            set { SetValue(MaximumProperty, value); }
        }
        public static readonly DependencyProperty MaximumProperty =
            DependencyProperty.Register("Maximum", typeof(int), typeof(SilderArrange), new PropertyMetadata(_max));

        /// <summary>
        /// 选中开始值，默认为0
        /// </summary>
        public int StartValue
        {
            get { return (int)GetValue(StartValueProperty); }
            set { SetValue(StartValueProperty, value); }
        }
        public static readonly DependencyProperty StartValueProperty =
            DependencyProperty.Register("StartValue", typeof(int), typeof(SilderArrange));

        /// <summary>
        /// 选中结束值，默认为100
        /// </summary>
        public int EndValue
        {
            get { return (int)GetValue(EndValueProperty); }
            set { SetValue(EndValueProperty, value); }
        }
        public static readonly DependencyProperty EndValueProperty =
            DependencyProperty.Register("EndValue", typeof(int), typeof(SilderArrange), new PropertyMetadata(_max));

        #endregion

        #region 前台交互

        /// <summary>
        /// 对两个拖动条进行裁剪
        /// </summary>
        private void ClipSilder()
        {
            int selectedValue = EndValue - StartValue;
            int totalValue = Maximum - Minimum;
            double sliderClipWidth = SilderWidth * (StartValue - Minimum + selectedValue / 2) / totalValue;
            // 对第一个拖动条进行裁剪
            StartRect = new Rect(0, 0, sliderClipWidth, SilderHeight);
            // 对第二个拖动条进行裁剪
            EndRect = new Rect(sliderClipWidth, 0, SilderWidth, SilderHeight);
        }        

        /// <summary>
        /// 初始化裁剪
        /// </summary>
        private void UC_Arrange_Loaded(object sender, RoutedEventArgs e)
        {
            ClipSilder();
        }

        private void SL_Bat1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            if (e.NewValue > EndValue)    // 检查值范围
                StartValue = EndValue;    // 超出，重设为最大值
            ClipSilder();
        }

        private void SL_Bat2_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            if (e.NewValue < StartValue)
                EndValue = StartValue;
            ClipSilder();
        }

        private void TextBox_KeyUp1(object sender, System.Windows.Input.KeyEventArgs e)
        {
            try
            {               
                if (e.Key == Key.Enter)    // 按回车时确认输入
                    StartValue = Convert.ToInt32(((TextBox)sender).Text);
            }
            catch
            {
            }
        }

        private void TextBox_KeyUp2(object sender, KeyEventArgs e)
        {
            try
            {
                if (e.Key == Key.Enter)
                    EndValue = Convert.ToInt32(((TextBox)sender).Text);
            }
            catch
            {
            }
        }       

        #endregion        
        
    }
}

　　这样，在需要使用到这个控件的地方，先在前台代码加上程序集：xmlns:us="clr-namespace:FS.PresentationManagement.Controls"，其中“FS.PresentationManagement.Controls”是刚才自定义的控件的命名空间，然后：

<us:SilderArrange x:Name="SLA_V" SilderWidth="250" Minimum="-50" Maximum="200" />

　　就可以了，是不是很方便，呵呵，其实还有不少地方可以改进，不过最少能用了。

转载请注明原址:http://www.cnblogs.com/lekko/archive/2012/07/23/2604257.html