WPF MVVM基础教程（三）命令/事件的绑定_wpf 命令绑定

命令/事件的绑定

除了数据绑定，mvvm中更重要的另一块就是命令和事件的绑定，wpf中关于按钮Button、菜单项MenuItem等关于点击交互的事件，可以通过命令Command在ViewModel 中实现。

基本的命令绑定

示例：在Button上绑定命令

在ViewModel中添加命令和具体执行的内容

public CommandBase UpdateCommand
 {
     get
     {
         return new CommandBase(obj =>
         {
             Name = NewName;
         });
     }
 }
1
2
3
4
5
6
7
8
9
10
11

在Button上进行绑定

<Button
            Command="{Binding UpdateCommand}"
            Content="更新" />
1
2
3

运行：

执行后：

命令绑定传入参数

在Button上定义CommandParameter属性

 <Button
         
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Command="{Binding UpdateCommand}"
            CommandParameter="我是参数"
            Content="更新" />
1
2
3
4
5
6
7

在ViewModel的命令中，通过obj接收传入的参数

 public CommandBase UpdateCommand
        {
            get
            {
                return new CommandBase(obj =>
                {
                    Name = obj.ToString()+"---"+NewName;
                });
            }
        }
1
2
3
4
5
6
7
8
9
10

执行后的效果：

传入控件的属性参数

将控件属性或者控件本身（如果传入控件本身在Path后面填.—Path=.）当做参数传入在CommandParameter中绑定ElementName对应控件的name，和属性名称

格式：

CommandParameter="{Binding ElementName=ControlName(控件name), Path=PorpertyName(控件属性名)}"

        <Button
            Width="62"
            Height="22"
            Margin="104,182,0,0"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Command="{Binding UpdateCommand}"
            CommandParameter="{Binding ElementName=TestTxt, Path=Text}"
            Content="更新" />
        <TextBox
            Name="TestTxt"
            Width="120"
            Margin="76,280,0,0"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"
            Text="TextBox参数"
            TextWrapping="Wrap" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

运行效果：

其他事件绑定

除了点击事件通过Command绑定之外，想要绑定其他命令如MouseEnter、SelectionChanged等事件，则需要导入专门的nuget包

安装Nuget包

安装Microsoft.Xaml.Behaviors.Wpf包
支持net framework4.5以上和Net core包括net5，6，7
如果使用旧版本net framework则需要安装System.Windows.Interactivity.WPF

使用

引入命名空间

 xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
1

在控件上添加触发器

 <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseEnter">
                    <i:InvokeCommandAction Command="{Binding StatusCommand}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
1
2
3
4
5

命令跟之前一样定义

public CommandBase StatusCommand
{
    get
    {
        return new CommandBase(obj =>
        {
            Status = "鼠标进入";
        });
    }
}
1
2
3
4
5
6
7
8
9
10

效果：在鼠标进入时，右侧TextBlock显示鼠标进入

其他的如ComboBox选择事件

 <i:Interaction.Triggers>
                <i:EventTrigger EventName="SelectionChanged">
                    <i:InvokeCommandAction Command="{Binding ChangedCommand}" CommandParameter="{Binding ElementName=Cbox, Path=SelectedItem}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
1
2
3
4
5

效果：选项变化，Text跟随变化

特殊事件

如要绑定Button的鼠标按下和抬起，不能绑定MouseDown和MouseUp,而是要绑定PreviewMouseDown和PreviewMouseUp

命令绑定示例-源码下载