WPF 命令(Command)使用探究

本文参考微软文档,但是他写得太乱了,不便于模仿学习。重新整理了一下。

创建标准 UI 命令

标准命令(StandardUICommand,如删除、编辑等),操作系统会自动帮我们完成翻译、图标设置等。使用方法:

1            <muxcontrols:MenuBarItem Title="Edit">
2                <MenuFlyoutItem x:Name="DeleteFlyoutItem"/>
3            </muxcontrols:MenuBarItem>
1            // Create the standard Delete command.
2            var deleteCommand = new StandardUICommand(StandardUICommandKind.Delete);
3            deleteCommand.ExecuteRequested += DeleteCommand_ExecuteRequested;
4
5            DeleteFlyoutItem.Command = deleteCommand;

其中 DeleteCommand_ExecuteRequested 是具体的执行逻辑,签名:

1        private void DeleteCommand_ExecuteRequested(
2            XamlUICommand sender, ExecuteRequestedEventArgs args)

需要我们自己实现。args.Parameter 中是执行的参数。

创建自定义 UI 命令

这种方法通过 XAML 定义命令,包括名称、图标,可以顺带设置快捷键:

1        <XamlUICommand x:Name="CustomXamlUICommand" ExecuteRequested="DeleteCommand_ExecuteRequested" Description="Custom XamlUICommand" Label="Custom XamlUICommand">
2            <XamlUICommand.IconSource>
3                <FontIconSource FontFamily="Wingdings" Glyph="&#x4D;"/>
4            </XamlUICommand.IconSource>
5            <XamlUICommand.KeyboardAccelerators>
6                <KeyboardAccelerator Key="D" Modifiers="Control"/>
7            </XamlUICommand.KeyboardAccelerators>
8        </XamlUICommand>

注意此处绑定了 DeleteCommand_ExecuteRequested 事件,需要在逻辑代码进行实现。

批量操作:

1            <muxcontrols:MenuBarItem Title="Edit">
2                <MenuFlyoutItem x:Name="DeleteFlyoutItem" Command="{StaticResource CustomXamlUICommand}"/>
3            </muxcontrols:MenuBarItem>

单独操作:

1                                        <SwipeItem x:Name="DeleteSwipeItem"
2                                                   Background="Red" 
3                                                   Command="{x:Bind Command}" 
4                                                   CommandParameter="{x:Bind Text}"/>

然后在添加列表项的时候绑定 Command:

1                collection.Add(new ListItemData { Text = "List item " + i.ToString(), Command = CustomXamlUICommand });

当然,这个列表项的模型需要我们定义:

1    public class ListItemData
2    {
3        public String Text { get; set; }
4        public ICommand Command { get; set; }
5    }

通过实现 ICommand 接口创建命令

这个例子,推荐在你的项目里参考使用。它更规范地实现了 ViewModel。并且,在这里例子中会看到著名的 RelayCommand 类。

让我康康

我们先看看 VM:

 1
 2namespace UICommand1.ViewModel
 3{
 4    public class ListItemData
 5    {
 6        public string ListItemText { get; set; }
 7        public Symbol ListItemIcon { get; set; }
 8    }
 9
10    public class UICommand1ViewModel
11    {
12        public RelayCommand MoveLeftCommand { get; private set; }
13        public RelayCommand MoveRightCommand { get; private set; }
14
15        public ObservableCollection<ListItemData> ListItemLeft { get; } = new ObservableCollection<ListItemData>();
16        public ObservableCollection<ListItemData> ListItemRight { get; } = new ObservableCollection<ListItemData>();
17
18        public ListItemData listItem;
19        
20        public UICommand1ViewModel()
21        {
22            MoveLeftCommand = new RelayCommand(new Action(MoveLeft), CanExecuteMoveLeftCommand);
23            MoveRightCommand = new RelayCommand(new Action(MoveRight), CanExecuteMoveRightCommand);
24
25            LoadItems();
26        }
27
28        public void LoadItems()
29
30        private bool CanExecuteMoveLeftCommand()
31        private bool CanExecuteMoveRightCommand()
32        public void MoveRight()
33        public void MoveLeft()
34        public event PropertyChangedEventHandler PropertyChanged;
35        protected void NotifyPropertyChanged(string propertyName)
36        {
37            PropertyChangedEventHandler handler = this.PropertyChanged;
38            if (handler != null)
39            {
40                PropertyChangedEventArgs args = new PropertyChangedEventArgs(propertyName);
41                handler(this, args);
42            }
43        }
44    }
45    
46    public class OpacityConverter : IValueConverter
47}

可见在 UICommand1ViewModel 中定义了相关的:

  1. 数据

  2. 命令的声明

  3. 命令的实现

而主类非常简单:

 1public sealed partial class MainPage : Page
 2    {
 3        public UICommand1ViewModel ViewModel { get; set; }
 4
 5        public MainPage()
 6        {
 7            this.InitializeComponent();
 8            ViewModel = new UICommand1ViewModel();
 9        }
10    
11        private void Page_PointerWheelChanged(object sender, PointerRoutedEventArgs e)
12        {
13            var props = e.GetCurrentPoint(sender as UIElement).Properties;
14
15            if ((Window.Current.CoreWindow.GetKeyState(VirtualKey.Control) != 
16                CoreVirtualKeyStates.None) && !props.IsHorizontalMouseWheel)
17            {
18                bool delta = props.MouseWheelDelta < 0 ? true : false;
19
20                switch (delta)
21                {
22                    case true:
23                        ViewModel.MoveRight();
24                        break;
25                    case false:
26                        ViewModel.MoveLeft();
27                        break;
28                    default:
29                        break;
30                }
31            }
32        }
33    }

并且我们注意到 UICommand1ViewModel 下实际上有两个命令,可以学习这种封装方式。

从 UI 是如何触发命令的呢

1<Page
2    x:Class="UICommand1.View.MainPage"
3    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5    xmlns:vm="using:UICommand1.ViewModel"

此处进行了 vm 绑定,这是为了便于设计 ListView 的模板:

 1            <ListView.ItemTemplate>
 2                <DataTemplate x:DataType="vm:ListItemData">
 3                    <Grid VerticalAlignment="Center">
 4                        <AppBarButton Label="{x:Bind ListItemText}">
 5                            <AppBarButton.Icon>
 6                                <SymbolIcon Symbol="{x:Bind ListItemIcon}"/>
 7                            </AppBarButton.Icon>
 8                        </AppBarButton>
 9                    </Grid>
10                </DataTemplate>
11            </ListView.ItemTemplate>

另外在 MainPage 类中,已经创建了 ViewModel 的实例,因此可以通过这个实例引发命令:

1                <Button Name="MoveItemLeftButton" 
2                            Margin="0,10,0,10" Width="120" HorizontalAlignment="Center"
3                            Command="{x:Bind Path=ViewModel.MoveLeftCommand}">

我们自己的例子

让我们用最近简单的代码实现一个 Command:

UI:

<AppBarButton Icon="Upload" Label="Upload"  Command="{x:Bind Path=ViewModel.UploadCommand}"  /> 

Logic:

1        public MainPageViewModel ViewModel { get; set; }
2        public MainPage()
3        {
4            // ...
5            ViewModel = new MainPageViewModel();            
6        }

VM:

 1    public class MainPageViewModel
 2    {
 3        public RelayCommand UploadCommand {get;private set;}
 4        public MainPageViewModel()
 5        {
 6            UploadCommand = new RelayCommand(Upload);
 7        }
 8        public async void Upload()
 9        {
10            var messageDialog = new MessageDialog("Hi!");
11            await messageDialog.ShowAsync();
12        }
13    }

题外话

尴尬的是命令模式确实比事件 Handler 费精力(对于简单项目)。所以连官方自己都用古法写代码:PowerToys/MainWindow.xaml.cs at master · microsoft/PowerToys (github.com)

最近发布

要查看全部文章,请点击右上角“归档”,下面是最近发布的几篇日志