数值范围选择控件RangeSlider

原文:数值范围选择控件RangeSlider

RangeSlider控件用于在一个指定上下限的范围中选择一个数值范围，因此该控件的Maximum和Minimum属性用于指定上下限；而SelectionStart和SelectionEnd用于指定选择的范围，还有一个Change属性用于指定SelectionStart和SelectionEnd的最小变化值。运行效果如下图所示。默认样式很难看，不过定制一个漂亮的样式很简单。

以下是控件的默认样式：

<Setter.Value>

<Border BorderBrush="{TemplateBinding
BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

Background="{TemplateBinding Background}"

SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

</Grid>

</Border>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

从控件的样式中可以看出，三个Thumb分别支持拖动改变开始值，结束值和同时改变两个值。两个RepeatButton支持按最小变化值同时改变开始值和结束值；按下Ctl键和左右箭头可达到相同的目的。

RangeSlider控件还实现了SelectedRangeChanged路由事件，这样就可以在SelectionStart和SelectionEnd改变的时候发出事件通知。

RangeSlider控件还支持命令；也就是说它实现了ICommandSource接口，这样就可以和MVVM模式很好的结合起来。剩下也没什么好说的了，代码贴上：

using System;

usingSystem.Collections.Generic;

usingSystem.Linq;

usingSystem.Text;

usingSystem.Windows.Controls;

usingSystem.Windows;

usingSystem.Windows.Input;

usingSystem.Windows.Controls.Primitives;

usingSystem.ComponentModel;

namespace MySolution.Controls

{

[TemplatePart(Name = GridContainerName, Type =
typeof(Grid))]

[TemplatePart(Name = LeftThumbName, Type =
typeof(Thumb))]

[TemplatePart(Name = CenterThumbName, Type =
typeof(Thumb))]

[TemplatePart(Name = RightThumbName, Type =
typeof(Thumb))]

public
class RangeSlider :
Control,ICommandSource

{

static RangeSlider()

{

DefaultStyleKeyProperty.OverrideMetadata(typeof(RangeSlider),
new FrameworkPropertyMetadata(typeof(RangeSlider)));

}

#region PartNames

private
conststring LeftThumbName =
"PART_LeftThumb";

private
conststring CenterThumbName =
"PART_CenterThumb";

private
conststring RightThumbName =
"PART_RightThumb";

private
conststring GridContainerName =
"PART_GridContainerName";

#endregion

#region Minimum

public
long Minimum

{

get {
return(long)GetValue(MinimumProperty); }

set { SetValue(MinimumProperty,
value); }

}

public
staticreadonly
DependencyPropertyMinimumProperty =

DependencyProperty.Register("Minimum",
typeof(long),
typeof(RangeSlider),

new
FrameworkPropertyMetadata(0L,OnMinimumChanged));

private
staticvoid OnMinimumChanged(DependencyObjectsender,
DependencyPropertyChangedEventArgse)

{

RangeSlider slider = sender
as RangeSlider;

slider.CoerceValue(MaximumProperty);

slider.CoerceValue(SelectionStartProperty);

slider.CoerceValue(SelectionEndProperty);

slider.Relayout();

}

#endregion

#region Maximum

public
longMaximum

{

get {
return(long)GetValue(MaximumProperty); }

set { SetValue(MaximumProperty,
value); }

}

public
staticreadonly
DependencyPropertyMaximumProperty =

DependencyProperty.Register("Maximum",
typeof(long),
typeof(RangeSlider),

new
FrameworkPropertyMetadata(100L,OnMaximumChanged, CoerceMaximum));

private
staticvoid OnMaximumChanged(DependencyObjectsender,
DependencyPropertyChangedEventArgse)

{

RangeSlider slider = sender
as RangeSlider;

slider.CoerceValue(SelectionStartProperty);

slider.CoerceValue(SelectionEndProperty);

slider.Relayout();

}

private
staticobject CoerceMaximum(DependencyObjectsender,
object baseValue)

{

RangeSlider slider = sender
as RangeSlider;

long value = (long)baseValue;

if (value < slider.Minimum + 1)

{

returnslider.Minimum + 1;

}

return baseValue;

}

#endregion

#regionSelectionStart

public
longSelectionStart

{

get {
return(long)GetValue(SelectionStartProperty); }

set { SetValue(SelectionStartProperty,
value); }

}

public
staticreadonly
DependencyPropertySelectionStartProperty =

DependencyProperty.Register("SelectionStart",
typeof(long),
typeof(RangeSlider),

new
FrameworkPropertyMetadata(0L,OnSelectionStartChanged, CoerceSelectionStart));

private
staticvoid OnSelectionStartChanged(DependencyObject sender,
DependencyPropertyChangedEventArgse)

{

RangeSlider slider = sender
as RangeSlider;

slider.CoerceValue(SelectionEndProperty);

slider.Relayout();

}

private
staticobject CoerceSelectionStart(DependencyObject sender,
objectbaseValue)

{

RangeSlider slider = sender
as RangeSlider;

long value = (long)baseValue;

if (slider.SelectionEnd >=slider.Minimum && slider.SelectionEnd <= slider.Maximum)

{

if(value > slider.SelectionEnd)

{

returnslider.SelectionEnd;

}

if (value < slider.Minimum)

{

returnslider.Minimum;

}

if (value > slider.Maximum)

{

returnslider.Maximum;

}

return baseValue;

}

#endregion

#regionSelectionEnd

public
longSelectionEnd

{

get {
return(long)GetValue(SelectionEndProperty); }

set { SetValue(SelectionEndProperty,
value); }

}

public
staticreadonly
DependencyPropertySelectionEndProperty =

DependencyProperty.Register("SelectionEnd",
typeof(long),
typeof(RangeSlider),

new
FrameworkPropertyMetadata(10L,OnSelectionEndChanged, CoerceSelectionEnd));

private
staticvoid OnSelectionEndChanged(DependencyObject sender,
DependencyPropertyChangedEventArgse)

{

RangeSlider slider = sender
as RangeSlider;

slider.CoerceValue(SelectionStartProperty);

slider.Relayout();

}

private
staticobject CoerceSelectionEnd(DependencyObject sender,
objectbaseValue)

{

RangeSlider slider = sender
as RangeSlider;

long value = (long)baseValue;

if (slider.SelectionStart >=slider.Minimum && slider.SelectionStart <= slider.Maximum)

{

if(value < slider.SelectionStart)

{

returnslider.SelectionStart;

}

if (value < slider.Minimum)

{

returnslider.Minimum;

}

if (value > slider.Maximum)

{

returnslider.Maximum;

}

returnbaseValue;

}

#endregion

#region Change

public
longChange

{

get {
return(long)GetValue(ChangeProperty); }

set { SetValue(ChangeProperty,
value); }

}

public
staticreadonly
DependencyPropertyChangeProperty =

DependencyProperty.Register("Change",
typeof(long),
typeof(RangeSlider),

new
FrameworkPropertyMetadata(1L),ValidateChange);

private
staticbool ValidateChange(objectvalue)

{

return (long)value!= 0;

}

#endregion

#region RoutedEvents

///<summary>

/// Eventraised whenever the selected range is changed

///</summary>

public
staticreadonly
RoutedEventSelectionChangedEvent = EventManager.RegisterRoutedEvent(

"SelectionChangedEvent",

RoutingStrategy.Bubble,

typeof(EventHandler<RangeSelectionChangedEventArgs>),

typeof(RangeSlider));

///<summary>

/// Eventraised whenever the selected range is changed

///</summary>

public
eventEventHandler<RangeSelectionChangedEventArgs>SelectedRangeChanged

{

add { AddHandler(SelectionChangedEvent,
value); }

remove {RemoveHandler(SelectionChangedEvent,
value); }

}

private
voidOnSelectedRangeChanged(RangeSelectionChangedEventArgse)

{

e.RoutedEvent = SelectionChangedEvent;

RaiseEvent(e);

ExecuteCommand();

}

private
voidExecuteCommand()

{

if (Command !=
null)

{

RoutedCommandcommand = Command
as RoutedCommand;

if(command !=
null)

{

command.Execute(CommandParameter,CommandTarget);

}

else

{

Command.Execute(CommandParameter);

}

#endregion

#regionCommands

#region Commanddeclaration

///<summary>

/// Command tomove back the selection

///</summary>

public
staticRoutedUICommand MoveBackward =

new
RoutedUICommand("Move Backward",
"MoveBackward", typeof(RangeSlider),

new
InputGestureCollection(new
InputGesture[]{ new
KeyGesture(Key.Left,
ModifierKeys.Control)}));

///<summary>

/// Command tomove forward the selection

///</summary>

public
staticRoutedUICommand MoveForward =

new
RoutedUICommand("Move Forward",
"MoveForward",typeof(RangeSlider),

new
InputGestureCollection(new
InputGesture[]{ new
KeyGesture(Key.Right,
ModifierKeys.Control)}));

#endregion

#region CommandHandlers

private
voidMoveBackwardHandler(object sender,
ExecutedRoutedEventArgs e)

{

MoveSelection(-Change);

}

private
voidMoveForwardHandler(object sender,
ExecutedRoutedEventArgs e)

{

MoveSelection(Change);

}

#endregion

#regionConstructor

public RangeSlider()

{

CommandBindings.Add(new
CommandBinding(MoveBackward,MoveBackwardHandler));

CommandBindings.Add(new
CommandBinding(MoveForward, MoveForwardHandler));

}

#endregion

#region Fields

private
Thumb_centerThumb;

private
Thumb_leftThumb;

private
Thumb_rightThumb;

private
Grid_gridContainer;

#endregion

public
overridevoid OnApplyTemplate()

{

base.OnApplyTemplate();

_centerThumb = Template.FindName(CenterThumbName,
this) as Thumb;

_leftThumb = Template.FindName(LeftThumbName,
this)as Thumb;

_rightThumb = Template.FindName(RightThumbName,
this)as Thumb;

_gridContainer = Template.FindName(GridContainerName,
this) as Grid;

_leftThumb.DragDelta += DragSelectionStart;

_centerThumb.DragDelta += DragSelection;

_rightThumb.DragDelta += DragSelectionEnd;

Relayout();

}

private
voidRelayout()

{

if (_gridContainer ==
null || SelectionEnd - SelectionStart < 0)

{

return;

}

double colWidth1 = SelectionStart -Minimum;

double colWidth2 = SelectionEnd -SelectionStart;

double colWidth3 = Maximum -SelectionEnd;

_gridContainer.ColumnDefinitions[0].Width =
newGridLength(colWidth1,
GridUnitType.Star);

_gridContainer.ColumnDefinitions[1].Width =
newGridLength(colWidth2,
GridUnitType.Star);

_gridContainer.ColumnDefinitions[2].Width =
newGridLength(colWidth3,
GridUnitType.Star);

OnSelectedRangeChanged(new
RangeSelectionChangedEventArgs(SelectionStart,SelectionEnd));

}

#regionDragHandlers

private
voidDragSelection(object sender,
DragDeltaEventArgs e)

{

long offsetValue =GetNormalizedValue(e.HorizontalChange);

MoveSelection(offsetValue);

}

private
voidMoveSelection(long offsetValue)

{

if (offsetValue < 0)

{

if(SelectionStart == Minimum)

{

return;

}

longrange = SelectionEnd - SelectionStart;

longnewValue = SelectionStart + offsetValue;

SelectionStart = Math.Max(Minimum, newValue);

SelectionEnd = SelectionStart +range;

}

else
if(offsetValue > 0)

{

if(SelectionEnd == Maximum)

{

return;

}

longrange = SelectionEnd - SelectionStart;

longnewValue = SelectionEnd + offsetValue;

SelectionEnd = Math.Min(Maximum, newValue);

SelectionStart = SelectionEnd -range;

}

private
voidMoveSelectionStart(long offsetValue)

{

if (offsetValue < 0)

{

if(SelectionStart == Minimum)

{

return;

}

longnewValue = SelectionStart + offsetValue;

SelectionStart = Math.Max(Minimum, newValue);

}

else
if(offsetValue > 0)

{

longmax = SelectionEnd - Change;

if(SelectionStart == max)

{

return;

}

longnewValue = SelectionStart + offsetValue;

SelectionStart = Math.Min(max, newValue);

}

private
voidMoveSelectionEnd(long offsetValue)

{

if (offsetValue < 0)

{

longmin = SelectionStart + Change;

if(SelectionEnd == min)

{

return;

}

longnewValue = SelectionEnd + offsetValue;

SelectionEnd = Math.Max(min, newValue);

}

else
if(offsetValue > 0)

{

if(SelectionEnd == Maximum)

{

return;

}

longnewValue = SelectionEnd + offsetValue;

SelectionEnd = Math.Min(Maximum, newValue);

}

private
void DragSelectionEnd(objectsender,
DragDeltaEventArgs e)

{

long offsetValue =GetNormalizedValue(e.HorizontalChange);

MoveSelectionEnd(offsetValue);

}

private
voidDragSelectionStart(object sender,
DragDeltaEventArgs e)

{

long offsetValue =GetNormalizedValue(e.HorizontalChange);

MoveSelectionStart(offsetValue);

}

#endregion

#region HelperMethod

private
longGetNormalizedValue(double pixelLength)

{

long offsetValue = (long)((Maximum - Minimum) * (pixelLength /RenderSize.Width));

long mod = offsetValue % Change;

if (Math.Abs(mod)< Change / 2)

{

offsetValue = Math.Sign(offsetValue) * ((long)(Math.Abs(offsetValue) /Change)) * Change;

}

else

{

offsetValue = Math.Sign(offsetValue) * ((long)(Math.Abs(offsetValue) /Change) + 1) * Change;

}

return offsetValue;

}

#endregion

#regionICommandSource Members

public
staticreadonly
DependencyPropertyCommandProperty =

DependencyProperty.Register("Command",
typeof(ICommand),
typeof(RangeSlider),
new PropertyMetadata(null,OnCommandChanged));

public
staticreadonly
DependencyPropertyCommandParameterProperty =

DependencyProperty.Register("CommandParameter",
typeof(object),
typeof(RangeSlider),new
FrameworkPropertyMetadata(null));

public
staticreadonly
DependencyPropertyCommandTargetProperty =

DependencyProperty.Register("CommandTarget",
typeof(IInputElement),
typeof(RangeSlider),new
FrameworkPropertyMetadata(null));

public
objectCommandParameter

{

get {
return(object)GetValue(CommandParameterProperty); }

set { SetValue(CommandParameterProperty,value); }

}

public
ICommandCommand

{

get {
return(ICommand)GetValue(CommandProperty); }

set { SetValue(CommandProperty,
value); }

}

public
IInputElementCommandTarget

{

get {
return(IInputElement)GetValue(CommandTargetProperty);}

set { SetValue(CommandTargetProperty,
value); }

}

private
staticvoid OnCommandChanged(DependencyObjectsender,
DependencyPropertyChangedEventArgse)

{

RangeSlider slider = sender
as RangeSlider;

slider.OnCommandChanged(e.OldValue
as ICommand, e.NewValue
asICommand);

}

private
voidOnCommandChanged(ICommand oldCommand,
ICommand newCommand)

{

if (oldCommand !=
null)

{

oldCommand.CanExecuteChanged -=CanExecuteChanged;

}

if (newCommand !=
null)

{

newCommand.CanExecuteChanged +=CanExecuteChanged;

}

private
voidCanExecuteChanged(object sender,
EventArgs e)

{

if (Command !=
null)

{

RoutedCommandcommand = Command
as RoutedCommand;

if(command !=
null)

{

IsEnabled = command.CanExecute(CommandParameter,CommandTarget);

}

else

{

IsEnabled =Command.CanExecute(CommandParameter);

}

#endregion

}

数值范围选择控件RangeSlider的更多相关文章

通用数据水平层级选择控件v0.70升级版使其支持jQuery v1.9.1
升级原因:作者原来脚本支持的jquery版本太低了,查找了下资料,使得它能支持最新版本的jquery 备注说明:脚本代码源作者跟源文出处很难找,只能在此特感谢他的分享. 更新部分: 1.新版本不再支持 ...
Windows Phone 8.1 新特性 - 控件之列表选择控件
本篇我们来介绍Windows Phone 8.1 新特性中的列表选择控件. 在Windows Phone 8 时代,大家都会使用 LongListSelector 来实现列表选择控件,对数据进行分组显 ...
SNF开发平台WinForm之三-开发-单表选择控件创建-SNF快速开发平台3.3-Spring.Net.Framework
3.1运行效果: 3.2开发实现: 3.2.1 这个开发与第一个开发操作步骤是一致的,不同之处就是在生成完代码之后,留下如下圈红程序,其它删除. 第一个开发地址:开发-单表表格编辑管理页面 http: ...
用c/c++混合编程方式为ios/android实现一个自绘日期选择控件(一)
本文为原创,如有转载,请注明出处:http://www.cnblogs.com/jackybu 前言章节: 1.需求描述以及c/c++实现日期和月历的基本操作 2.ios实现自绘日期选择控件 3.a ...
js 跨域的问题（同一个主域名不同的二级域名下的跨域问题）解决 WdatePicker.js my97日期选择控件
例如域名是 a.xx.com 和 b.xx.com 如果一个页面中引入多个iframe,要想能够操作所有iframe,必须都得设置相同domain. 如果iframe的时候 a包含b 为 ...
JQuery好用的日期选择控件 DatePicker
近期发现一个很好的基于JQ的前端UI日期选择控件Jquery.DatePicker.js 下载地址:jquery.DatePIcker.js 演示地址:DatePicker - 基于jQuery 1. ...
[Ext JS 4] 实战之带week(星期)的日期选择控件(三)
前言在 [Ext JS 4] 实战之带week(星期)的日期选择控件(二) 的最后,有提到一个解决方案. 不过这方案有一个条件 ==> “2. 每年的周数从(1-52), 如果超过52 周 ...
使用sui实现的选择控件【性别、日期、省市级联】
使用sui mobile做的选择控件,其中sm.js有修改,增加自定义api,详情请看index.html的注释,不多说了,上代码 <!DOCTYPE html> <html> ...
android中选择控件与选择界面自然过度效果的实现--一种新的交互设计
转载请标明出处: http://blog.csdn.net/jianghejie123/article/details/40648931 在安卓中经常遇到须要选择一个东西的功能,比方选择日期.选择文件 ...

随机推荐

编译pano13的一些注意事项
作者:朱金灿来源:error C2037: "jmpbuf"的左侧部分指定未定义的结构/联合"png_struct_def"e:\src\Test\libpa ...
制作Kinect体感控制小车教程 <一>
转载请注明出处:http://blog.csdn.net/lxk7280 Kinect体感控制小车 Kine ...
[Recompose] Compute Expensive Props Lazily using Recompose
Learn how to use the 'withPropsOnChange' higher order component to help ensure that expensive prop c ...
撸代码--类QQ聊天实现(基于linux 管道信号共享内存)
一:任务描写叙述 A,B两个进程通过管道通信,像曾经的互相聊天一样,然后A进程每次接收到的数据通过A1进程显示(一个新进程,用于显示A接收到的信息),A和A1间的数据传递採用共享内存,相应的有一个B1 ...
javascript中0级DOM和2级DOM事件模型浅析分类： C1_HTML/JS/JQUERY 2014-08-06 15:22 253人阅读评论(0) 收藏
Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...
Java NIO学习笔记之基本概念
一.缓冲区操作缓冲区,以及缓冲区如何工作,是所有 I/O 的基础.所谓"输入/输出"讲的无非就是把数据移进或移出缓冲区. 进程使用 read( )系统调用,要求其缓冲区被填满.内 ...
vimrum
# Insert your preferred key mappings here.unmap <a-O>map <a-O> closeOtherTabsmap , previ ...
Android多媒体开发（3）————使用Android NKD编译havlenapetr-FFMpeg-7c27aa2
1. 使用NDK去编译官方的FFmpeg原版的话,还得自己实现JNI层与Java层,工程量比较大.所以移植FFmpeg到Android平台时,可以移植一些已经实现JNI与JAVA层的开源项目,毕竟软件 ...
[React Router v4] Parse Query Parameters
React Router v4 ignores query parameters entirely. That means that it is up to you to parse them so ...
System.getProperty()获取系统的配置信息(系统变量)
原文地址:http://www.jsjtt.com/java/Javajichu/105.html 此处记录备用. 1. 通过System.getProperty()可以获取系统的配置信息,Syste ...

数值范围选择控件RangeSlider

数值范围选择控件RangeSlider的更多相关文章

随机推荐

热门专题