WPF MultiRangeSlider 简单实现

发布时间:2017-3-24 16:19:02 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"WPF MultiRangeSlider 简单实现 ",主要涉及到WPF MultiRangeSlider 简单实现 方面的内容,对于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;        }

上一篇:02-Vue入门之数据绑定
下一篇:Html之 IFrame使用,注意几点

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款