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