WPF MultiRangeSlider 简单实现

WPF 多滑块Slider简单实现（MultiRangeSlider）

WPF中的MultiRangeSlider，网上有商业的，有开源的，找了几个都不太理想,那就自己写

一个吧，给大家提供点思路。

WPF中的Slider，看他的模板那就很复杂，如果想弄一个可以自定义样式的MultiRangeSlider

那就得花大时间好好弄，粗略的想MultiRangeSlider不就是几个滑块(Thumb),加几个矩形么，

一个滑块对应两个矩形，滑块移动的时候，不就两边的矩形的宽度的变化么，矩形我们只想

关注宽度变化，不想再去调整他的其实位置，用什么容器来装矩形呢，StackPanel，里面的对象

总是首尾相连的嘛，可是要使Thumb能够水平移动，在StackPanel中显示不合适，那就放到Canvas

中，然后把这两个容器使用Grid叠在一起，Canvas在上，就是下面这个样子

<Grid>
    <StackPanel Margin="15,0,15,0"
                x:Name="RangeContainer"
                Orientation="Horizontal">

    </StackPanel>
    <Canvas x:Name="ThumbContainer">
    </Canvas>
</Grid>

滑块为了好看，也做了样式修改

<Style TargetType="local:ThumbEx">
        <Setter Property="Width"
                Value="30"></Setter>
        <Setter Property="Height"
                Value="150"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="40" />
                            <RowDefinition />
                            <RowDefinition Height="40" />
                        </Grid.RowDefinitions>

                        <StackPanel>
                            <Rectangle SnapsToDevicePixels="True"
                                       Height="30"
                                       StrokeThickness="0"
                                       Stroke="LightGray"
                                       Fill="LightGray"></Rectangle>
                            <Path Fill="LightGray"
                                  Stroke="LightGray"
                                  StrokeThickness="1"
                                  Data="M0,0 L30,0 L15,10z">
                            </Path>
                        </StackPanel>

                        <Path Grid.Row="1"
                              Data="M15,0 L15,110"
                              Fill="Black"
                              Stroke="Black"
                              StrokeThickness="1"></Path>

                        <StackPanel Grid.Row="2">
                            <Path Fill="LightGray"
                                  StrokeThickness="1"
                                  Stroke="LightGray"
                                  Data="M15,0 L0,10 L30,10z">
                            </Path>
                            <Rectangle Height="30"
                                       StrokeThickness="0"
                                       Stroke="LightGray"
                                       Fill="LightGray"></Rectangle>
                        </StackPanel>

                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

为了简便，我用了UserControl来实现这个控件，当然得支持各种数据Binding啊，对于这个控件来说，

我不需要知道外面是什么样的数据结构，我只需要知道我要展现多滑块需要哪些数据就行，

所以得有一个描述Range的数据结构

public class RangeItem
{
    #region 字段
    private double _from;
    private double _to;
    private string _name;
    private double _maxDuration;
    private bool _isStatic;
    private double _duration;

    #endregion

    #region 属性
    public double From
    {
        get
        {
            return _from;
        }
        set
        {
            _from = value;
        }
    }

    public double To
    {
        get
        {
            return _to;
        }
        set
        {
            _to = value;
        }
    }

    /// <summary>
    /// 是否静止
    /// </summary>
    public bool IsStatic
    {
        get
        {
            return _isStatic;
        }
        set
        {
            _isStatic = value;
        }
    }

    public double Duration
    {
        get
        {
            return _duration;
        }
        set
        {
            _duration = value;
        }
    }

    public double MaxDuration
    {
        get
        {
            return _maxDuration;
        }
        set
        {
            _maxDuration = value;
        }
    }

    #endregion
}

重要的属性有From（起始值），To（结束值），MaxDuration（总长），

根据这一个数据，我们就能生成一个矩形。整个Slider的宽度是固定的，所以就可以根据

(To-From)/MaxDuration*Slider长度，就能计算出这个矩形的宽度，直接加入StackPanel就

行。

矩形加进去了，现在加滑块，因为滑块是在Canvas中的，所以他需要确切知道Canvas.Left附加

属性，这个Left不就左边矩形的宽度么。在把滑块和左右两边的矩形关联起来，因为矩形的拖动事件

需要实时去改变两边的矩形的宽度。

我还是直接上代码吧，讲这么多你们也不一定清楚，哎。

WPF MultiRangeSlider