对于Button的Command的绑定可以通过实现ICommand接口来进行,但是Slider并没有Command属性。

另外如果要实现MVVM模式的话,需要将一些Method和Slider的Event进行绑定,如何进行呢?

(对于UIElement的一些Event进行绑定一定有一些通用的方法,目前还没有深入研究。)

首先,Slider Value的绑定是很简单的, 绑定Slider的Value属性即可。

(1)ViewModel

    public class SliderViewModel : ViewModelBase
{
private string selectedValue; public SliderViewModel()
{ } public string SelectedValue
{
get
{
return this.selectedValue;
}
set
{
if (this.selectedValue != value)
{
this.selectedValue = value;
base.OnPropertyChanged("SelectedValue");
}
}
}
}

(2) View, 设定 DataContext 为ViewModel, 绑定SelectValue到 Slider的Value 和TextBlock的Text属性上。

这样当拖动Slider时,Slider的值会传给SelectedValue, 然后SelectValue会传给TexBlock上。

 x:Class="WpfApplication2.View.SliderView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:vm="clr-namespace:WpfApplication2.ViewModel"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.DataContext>
<vm:SliderViewModel />
</UserControl.DataContext>
<Grid>
<Slider HorizontalAlignment="Left"
Margin="28,102,0,0"
VerticalAlignment="Top"
Width="158"
Minimum="0"
Maximum="100"
Value="{Binding SelectedValue}"/>
<TextBlock HorizontalAlignment="Left"
Margin="203,102,0,0"
TextWrapping="Wrap"
Text="{Binding SelectedValue}"
VerticalAlignment="Top" /> </Grid>
</UserControl>

效果如下:

如果不想显示double值,可以设定Slider的属性。

                TickFrequency="1"
IsSnapToTickEnabled="True"
TickPlacement="None" />

其次, 当用鼠标或者键盘移动滑块结束的时候,需要进行一些处理。如果不用MVVM的方式的话,可以在Slider的Event里面增加处理。

用MVVM的话,就稍微麻烦一些。

(1)下载或者复制C:\Program Files (x86)\Microsoft SDKs\Expression\Blend\.NETFramework\v4.0\Libraries\System.Windows.Interactivity.dll

在工程中Reference 这个dll,命名空间里面增加:using System.Windows.Interactivity

(2)新写个SliderValueChangedBehavior 继承Behavior<Slider>

    /// <summary>
/// Helps find the user-selected value of a slider only when the keyboard/mouse gesture has ended.
/// </summary>
public class SliderValueChangedBehavior : Behavior<Slider>
{
/// <summary>
/// Keys down.
/// </summary>
private int keysDown; /// <summary>
/// Indicate whether to capture the value on latest key up.
/// </summary>
private bool applyKeyUpValue; #region Dependency property Value /// <summary>
/// DataBindable value.
/// </summary>
public double Value
{
get { return (double)GetValue(ValueProperty); }
set { SetValue(ValueProperty, value); }
} public static readonly DependencyProperty ValueProperty = DependencyProperty.Register(
"Value",
typeof(double),
typeof(SliderValueChangedBehavior),
new PropertyMetadata(default(double), OnValuePropertyChanged)); #endregion #region Dependency property Value /// <summary>
/// DataBindable Command
/// </summary>
public ICommand Command
{
get { return (ICommand)GetValue(CommandProperty); }
set { SetValue(CommandProperty, value); }
} public static readonly DependencyProperty CommandProperty = DependencyProperty.Register(
"Command",
typeof(ICommand),
typeof(SliderValueChangedBehavior),
new PropertyMetadata(null)); #endregion /// <summary>
/// On behavior attached.
/// </summary>
protected override void OnAttached()
{
this.AssociatedObject.KeyUp += this.OnKeyUp;
this.AssociatedObject.KeyDown += this.OnKeyDown;
this.AssociatedObject.ValueChanged += this.OnValueChanged; base.OnAttached();
} /// <summary>
/// On behavior detaching.
/// </summary>
protected override void OnDetaching()
{
base.OnDetaching(); this.AssociatedObject.KeyUp -= this.OnKeyUp;
this.AssociatedObject.KeyDown -= this.OnKeyDown;
this.AssociatedObject.ValueChanged -= this.OnValueChanged;
} /// <summary>
/// On Value dependency property change.
/// </summary>
private static void OnValuePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var me = (SliderValueChangedBehavior)d;
if (me.AssociatedObject != null)
me.Value = (double)e.NewValue;
} /// <summary>
/// Occurs when the slider's value change.
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void OnValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
if (Mouse.Captured != null)
{
this.AssociatedObject.LostMouseCapture += this.OnLostMouseCapture;
}
else if (this.keysDown != 0)
{
this.applyKeyUpValue = true;
}
else
{
this.ApplyValue();
}
} private void OnLostMouseCapture(object sender, MouseEventArgs e)
{
this.AssociatedObject.LostMouseCapture -= this.OnLostMouseCapture;
this.ApplyValue();
} private void OnKeyUp(object sender, KeyEventArgs e)
{
if (this.keysDown-- != 0)
{
this.ApplyValue();
}
} private void OnKeyDown(object sender, KeyEventArgs e)
{
this.keysDown++;
} /// <summary>
/// Applies the current value in the Value dependency property and raises the command.
/// </summary>
private void ApplyValue()
{
this.Value = this.AssociatedObject.Value; if (this.Command != null)
this.Command.Execute(this.Value);
}
}

(3) 在View中为Slider的行为添加Command

            <i:Interaction.Behaviors>
<helper:SliderValueChangedBehavior Command="{Binding ValueChangedCommand}"
/>
</i:Interaction.Behaviors>

(4)在ViewModel中实现当Slider值个改变的时候进行一些处理。

        public ICommand ValueChangedCommand
{
get
{
if (this.valueChangedCommmand == null)
{
this.valueChangedCommmand = new RelayCommand(
param => this.PopValue(),
null);
} return this.valueChangedCommmand;
}
} private void PopValue()
{
MessageBox.Show(String.Format("Selected value is {0}", this.selectedValue));
}

最后,进行调试,发现ValueChangedCommand当每次Silder值变更的时候都会被执行

那么如何实现最后一次值变更时,才执行Command呢?

 

WPF中 MVVM模式的Slider Binding.的更多相关文章

  1. WPF中MVVM模式的 Event 处理

    WPF的有些UI元素有Command属性可以直接实现绑定,如Button 但是很多Event的触发如何绑定到ViewModel中的Command呢? 答案就是使用EventTrigger可以实现. 继 ...

  2. WPF中MVVM模式下控件自有的事件绑定

    1.原因 在WPF中单纯的命令绑定往往不能满足覆盖所有的事件,例如ComboBox的SelectionChanged事件,DataGrid的SelectionChanged事件等等,这时就可以用事件绑 ...

  3. CleanAOP实战系列--WPF中MVVM自动更新

    CleanAOP实战系列--WPF中MVVM自动更新 作者: 立地 邮箱: jarvin_g@126.com QQ: 511363759 CleanAOP介绍:https://github.com/J ...

  4. 【WPF】MVVM模式的3种command

    原文:[WPF]MVVM模式的3种command 1.DelegateCommand 2.RelayCommand 3.AttachbehaviorCommand 因为MVVM模式适合于WPF和SL, ...

  5. WPF之MVVM模式讲解

    WPF技术的主要特点是数据驱动UI,所以在使用WPF技术开发的过程中是以数据为核心的,WPF提供了数据绑定机制,当数据发生变化时,WPF会自动发出通知去更新UI. 恰当的模式可以让我们轻松达到“高内聚 ...

  6. 【转】【WPF】MVVM模式的3种command

    1.DelegateCommand 2.RelayCommand 3.AttachbehaviorCommand 因为MVVM模式适合于WPF和SL,所以这3种模式中也有一些小差异,比如RelayCo ...

  7. WPF之MVVM模式(1)

    MVVM模式 一.MVVM模式概述 MVVM Pattern : Model\View\ViewModel View:视图.UI界面 ViewModel:ViewModel是对Model的封装,通过一 ...

  8. 由项目浅谈JS中MVVM模式

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.    背景 最近项目原因使用了durandal.js和knock ...

  9. js架构设计模式——由项目浅谈JS中MVVM模式

    1.    背景 最近项目原因使用了durandal.js和knockout.js,颇有受益.决定写一个比较浅显的总结. 之前一直在用SpringMVC框架写后台,前台是用JSP+JS+标签库,算是很 ...

随机推荐

  1. java程序猿经常使用的工具名称--知道中文意思吗

    在学习java的时候常常会碰到一些单词,可是一般的时候也不是非常在意这个单词的意思,而是能够了解到这个工具或者框架能够做什么就能够了.偶尔总结了一下还蛮有意思的.例如以下, 假设有遗漏,各位能够帮忙补 ...

  2. java.lang.IllegalArgumentException: org.hibernate.hql.internal.ast.QuerySyntaxException: student is not mapped

    Spring 5.0 +Jpa,使用@Query实现 自定义查询报错: java.lang.IllegalArgumentException: org.hibernate.hql.internal.a ...

  3. 9.12 Binder系统_Java实现_内部机制_Client端

    Java实现中client端的RPC层(java实现)如何通过JNI来调用IPC层(C++实现)发送数据 TestServer通过addService向Service_manager注册的时候Test ...

  4. OAM配置代理手冊

     创建webgate与ohs共享实例,copy文件到ohs实例文件夹. 1)进入webgage部署工具文件夹       Cd  /%webgate_home%/webgate/ohs/tools ...

  5. 组合搜索(combinatorial search)在算法求解中的应用

    1. 分治.动态规划的局限性 没有合适的分割方式时,就不能使用分治法: 没有合适的子问题或占用内存空间太大时,就不能用动态规划: 此时还需要回到最基本的穷举搜索算法. 穷举搜索(exhaustive ...

  6. spring项目启动后,获取bean的方法总结

    如果在web项目中,用到定时器的朋友可能会遇到使用spring注解的方式获取bean的时候报空指针的异常.这是就可以使用手工的方法获取spring容器中的bean了. 下面是具体的方法: 1.先说一个 ...

  7. Android入门——Bitmap和BitmapFactory

    我们都知道一个App的成败,首先取决于是否具有优秀的UI,而除了交互功能之外还需要丰富的图片背景和动画去支撑.在开发中我们应用到的图片不仅仅包括.png..gif..9.png..jpg和各种Draw ...

  8. js进阶 12-3 如何实现元素跟随鼠标移动

    js进阶 12-3 如何实现元素跟随鼠标移动 一.总结 一句话总结:获取鼠标位置,将鼠标位置设置为元素偏移即可. 1.用什么事件获取鼠标位置? 用mousemove可以获取鼠标移动的时候的位置 $(d ...

  9. pppoe-环境下的mtu和mss

    路由器上在宽带拨号高级设置页面会有设置数据包MTU的页面 数据包MTU(字节):1480 (默认是1480,如非必要,请勿修改) PPPoE/ADSL:1492 ,可以尝试修改为1492 MTU: M ...

  10. js javascript正则

    var re = new RegExp("^[0-9]$"); 或者 var re2 = /^\d$/;//这个好像兼容性更好,比如你在上面的语句里面写\d,就总是返回false, ...