WPF 事件实现MVVM中的Command绑定

Posted 2020-12-21 runningrain

1. 在ViewModel中弹出消息提示框，需要添加下面的代码块：

    <dxmvvm:Interaction.Behaviors>
        <dx:DXMessageBoxService />
    </dxmvvm:Interaction.Behaviors>

在ViewModel中的调用方式是：

        public virtual void ShowRowDetails(SampleData obj)
        {
            MessageBoxService.Show(obj.ToString(), "Row Details");
        }

2. 将鼠标双击事件绑定到ViewModel中的 ShowRowDetails 的方式是：

<dxmvvm:Interaction.Behaviors>
    <dxmvvm:EventToCommand EventName="MouseDoubleClick"
                   Command="{Binding ShowRowDetailsCommand}"
                   PassEventArgsToCommand="True">
        <dxmvvm:EventToCommand.EventArgsConverter>
            <dx:EventArgsToDataRowConverter/>
        </dxmvvm:EventToCommand.EventArgsConverter>
    </dxmvvm:EventToCommand>
</dxmvvm:Interaction.Behaviors>

注意: 在xaml 代码中的命令带Command后缀，在ViewModel中不需要。

<UserControl x:Class="EventToCommandExample.Views.MainView"
             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:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
             xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
              xmlns:dxb="http://schemas.devexpress.com/winfx/2008/xaml/bars"
             xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm"
             xmlns:ViewModels="clr-namespace:EventToCommandExample.ViewModels"  
             xmlns:localConverters="clr-namespace:EventToCommandExample.Converters"
             mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="600"
             DataContext="{dxmvvm:ViewModelSource Type={x:Type ViewModels:MainViewModel}}">
    <dxmvvm:Interaction.Behaviors>
        <dx:DXMessageBoxService />
    </dxmvvm:Interaction.Behaviors>
    <Grid>
        <Grid.Resources>
            <localConverters:ReviewResultRowBackColorConverter x:Key="reviewResultRowBackColorConverter"></localConverters:ReviewResultRowBackColorConverter>
            <localConverters:String2BoolConverter x:Key="string2BoolConverter"></localConverters:String2BoolConverter>
            <Style x:Key="optimizedRowStyle" TargetType="{x:Type dxg:RowControl}">
                <Setter Property="Background" Value="{Binding Row.Mandatory, Converter={StaticResource reviewResultRowBackColorConverter}}"/>
            </Style>
            <Style x:Key="barButtonItemStyle" TargetType="dxb:BarButtonItem">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Row.Row.Mandatory,Converter={StaticResource string2BoolConverter}}" Value="false">
                        <Setter Property="IsVisible" Value="False"/>
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <dx:DXTabControl>
            <dxmvvm:Interaction.Behaviors>
                <dxmvvm:EventToCommand EventName="SelectionChanged"
                                           Command="{Binding SelectedTabIndexChangedCommand}"
                                           PassEventArgsToCommand="True">
                </dxmvvm:EventToCommand>
            </dxmvvm:Interaction.Behaviors>
            <dx:DXTabItem Header="Test">
                <dxg:GridControl ItemsSource="{Binding GridData}" AutoGenerateColumns="AddNew">
                    <dxg:GridControl.Columns>
                        <dxg:GridColumn Header="ID" FieldName="ID"></dxg:GridColumn>
                        <dxg:GridColumn Header="Text" FieldName="Text"></dxg:GridColumn>
                        <dxg:GridColumn Header="Value" FieldName="Value"></dxg:GridColumn>
                        <dxg:GridColumn Header="Mandatory" FieldName="Mandatory"></dxg:GridColumn>
                    </dxg:GridControl.Columns>
                    <dxg:GridControl.View>
                        <dxg:TableView x:Name="tvTable" RowStyle="{StaticResource optimizedRowStyle}">
                            <dxg:TableView.RowCellMenuCustomizations>
                                <dxb:BarButtonItem Content="DB Owner"
                                                   Command="{Binding Path=(dxg:DataControlBase.ActiveView).DataContext.SetTableDataHeaderCommand, RelativeSource={RelativeSource Self}}"
                                           CommandParameter="{Binding ElementName=tvTable, Path=FocusedRowHandle}"
                                                   dxb:BarManager.ShowGlyphsInPopupMenus="False"
                                                   Style="{StaticResource barButtonItemStyle}">
                                </dxb:BarButtonItem>
                                <dxb:BarButtonItem Content="Table Name" IsVisible="{Binding Row.Row.Mandatory,Converter={StaticResource string2BoolConverter}}"
                                                   Command="{Binding Path=(dxg:DataControlBase.ActiveView).DataContext.SetTableDataHeaderCommand, RelativeSource={RelativeSource Self}}"
                                           CommandParameter="{Binding ElementName=tvTable, Path=FocusedRowHandle}">
                                </dxb:BarButtonItem>
                                <dxb:BarButtonItem Content="DataHeader"
                                                   Command="{Binding Path=(dxg:DataControlBase.ActiveView).DataContext.SetTableDataHeaderCommand, RelativeSource={RelativeSource Self}}"
                                           CommandParameter="{Binding ElementName=tvTable, Path=FocusedRowHandle}">
                                </dxb:BarButtonItem>
                                <dxb:BarButtonItem Content="DataBegin"
                                                        Command="{Binding Path=(dxg:DataControlBase.ActiveView).DataContext.SetTableDataBeginCommand, RelativeSource={RelativeSource Self}}"
                                           CommandParameter="{Binding ElementName=tvTable, Path=FocusedRowHandle}">
                                </dxb:BarButtonItem>
                            </dxg:TableView.RowCellMenuCustomizations>
                            <dxmvvm:Interaction.Behaviors>
                                <dxmvvm:EventToCommand EventName="MouseDoubleClick"
                                               Command="{Binding ShowRowDetailsCommand}"
                                               PassEventArgsToCommand="True">
                                    <dxmvvm:EventToCommand.EventArgsConverter>
                                        <dx:EventArgsToDataRowConverter/>
                                    </dxmvvm:EventToCommand.EventArgsConverter>
                                </dxmvvm:EventToCommand>
                            </dxmvvm:Interaction.Behaviors>
                        </dxg:TableView>
                    </dxg:GridControl.View>
                </dxg:GridControl>
            </dx:DXTabItem>
            <dx:DXTabItem Header="Testtab">
                <dxg:GridControl ItemsSource="{Binding GridData}" AutoGenerateColumns="AddNew">
                        <dxg:GridControl.View>
                        <dxg:TableView>
                            <dxmvvm:Interaction.Behaviors>
                                <dxmvvm:EventToCommand EventName="MouseDoubleClick"
                                               Command="{Binding ShowRowDetailsCommand}"
                                               PassEventArgsToCommand="True">
                                    <dxmvvm:EventToCommand.EventArgsConverter>
                                        <dx:EventArgsToDataRowConverter/>
                                    </dxmvvm:EventToCommand.EventArgsConverter>
                                </dxmvvm:EventToCommand>
                            </dxmvvm:Interaction.Behaviors>
                        </dxg:TableView>
                    </dxg:GridControl.View>
                </dxg:GridControl>
            </dx:DXTabItem>
        </dx:DXTabControl>
    </Grid>
</UserControl>

完整实例下载