手把手教你搭WPF架构之Command的使用

arriettyandray
344 阅读2分钟

1 前言

在前面学习了RadioButton的使用，可以按下后高亮等显示。同时，前面也完成简单的用户页面默认绑定。但是RadioButton 没有与页面切换绑定起来，仅仅在运行后界面默认加载。为了实现不同的RadioButton按下后显示不同的界面的换，今天在RadioButton的使用基础上介绍Command 的使用！

2 Command

Command 是一种用于处理用户操作（如按钮点击、菜单项选择等）的机制。WPF 提供了一套丰富的命令系统，允许开发者以声明方式处理用户界面上的交互操作。 在这里介绍Command ，我们将和XAML结合使用。在 XAML 中，将命令绑定到 UI 元素（如按钮、菜单项）。

除了Command，我们还要了解CommandParameter，通过 CommandParameter 属性为命令绑定提供参数。这个参数可以是静态值，也可以是数据上下文中的动态值。

3 具体使用

代码部分：

<RadioButton Grid.Row="1"  GroupName="1" Content="1" Style="{StaticResource CustomRadioButtonStyle}"
Command="{Binding MenuItemCommand}"
CommandParameter="InterfacialDesign.Views.DataModelViews"/>

我们定义了一个简单的按钮，同时使用Command绑定MenuItemCommand属性，同时采用CommandParameter输入对应的UI用户界面名称，简单的前端设置就完成了！ 我们在后台定义一个MenuItemCommand属性，与前端Command绑定的属性需要一致，绑定MenuItemCommand后，然后设置对应的UI绑定的参数"InterfacialDesign.Views.DataModelViews"，就是我们对应要显示界面的名称，后台代码会根据名称同步显示到我们搭建的WPF网格中。在这里绑定的属性还需要使用继承ICommand，这里我们已经封装到CommandBase中，直接使用就好了，后期可详细介绍该部分的具体实现！ 我们在MainViewModel.cs中定义一个动态绑定，读到对应界面名称就切换对应名称。

private CommandBase _menuItemCommand;
public CommandBase MenuItemCommand
{
    get
    {
        if (_menuItemCommand == null)
        {
            _menuItemCommand = new CommandBase();
            _menuItemCommand.DoExecute = new Action<object>(obj =>
            {
                NavPage(obj.ToString());
            });
        }
        return _menuItemCommand;
    }
}

4 显示效果

界面会根据我按钮按的不同而发生变化。这也是因为后台与前端界面的绑定，将按钮绑定不同的用户界面名称，根据这些名称而调动对应的UI界面，从而达到这种显示效果。

image.png

image.png 可以看到按下1按钮，界面出现橘色的框框，而按下2按钮，界面一片空白！

总结

本文解决了上次按钮与界面的不联动问题，介绍了RadioButton与UI用户界面的绑定操作，后续可在用户界面下进一步进行设计！

avatar
文章
阅读
粉丝