(WPF, MVVM) Event 處理

WPF的有些UI元素有Command屬性可以直接實現綁定，如Button

但是很多Event的觸發如何綁定到ViewModel中的Command呢？

答案就是使用EventTrigger可以實現。

繼續上一篇對Slider的研究，在View中修改Interaction.

            <i:Interaction.Triggers>
                <i:EventTrigger EventName="ValueChanged">
                    <i:InvokeCommandAction Command="{Binding ValueChangedCommand}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>

那么如果將EventName修改為Thumb.DragCompleted 后發現這個事件並不會被觸發
原因是：Because the command is hooked up to the Slider, but the event is fired on the Thumb。

（參考：http://stackoverflow.com/questions/14331272/issue-with-thumb-dragstarted-event-with-mvvmlight）

參考上述鏈接中Tom Allen的方法后可以實現, 但是這個方法並沒有很好的遵守MVVM模式。

於是接着研究，既然DragCompleted是掛在Thumb上面的，那么為何不直接和Thumb 綁定呢？

 

修改Slider的ControlTemplate, 在Track控件中的Thumb中綁定Event 成功！

 

    <UserControl.Resources>
        <ControlTemplate x:Key="trackThumb" TargetType="{x:Type Slider}">
            <Border Background="{TemplateBinding Background}"
                    BorderBrush="{TemplateBinding BorderBrush}"
                    BorderThickness="{TemplateBinding BorderThickness}">
                <Grid>
                    <Track x:Name="PART_Track">
                        <Track.Thumb>
                            <Thumb Width="10">
                                <i:Interaction.Triggers>
                                    <i:EventTrigger EventName="DragCompleted">
                                        <i:InvokeCommandAction Command="{Binding ValueChangedCommand}" />
                                    </i:EventTrigger>
                                </i:Interaction.Triggers>
                            </Thumb>
                        </Track.Thumb>
                    </Track>
                </Grid>
            </Border>
        </ControlTemplate>
    </UserControl.Resources>

 

 

 

 

 

參考：

http://social.technet.microsoft.com/wiki/contents/articles/18199.event-handling-in-an-mvvm-wpf-application.aspx

http://www.codeproject.com/Articles/274982/Commands-in-MVVM#example9