WPF使用MVVM（三）-事件轉命令

醜萌氣質狗發表於2022-03-03
MVVM事件

WPF使用MVVM（三）-事件轉命令

上一節介紹了WPF中的命令，可是僅僅介紹的是WPF框架給我們提供的點選命令，也就是用Command屬性來繫結一個命令，用來響應按鈕的點選行為！顯然這是不夠的，介面中除了點選行為以外，還有很多其他行為，諸如滑鼠移入，滑鼠移出。。。

下面我們就將介紹一下，如何為這些行為繫結命令。

為其他行為繫結命令

在為其他行為繫結命令的時候呢，我們需要引入一個外部的dll檔案，叫做System.Windows.Interactivity.dll，直接開啟NuGet包管理器，搜尋、安裝到專案中即可：

nuget

nuget1

在安裝包的過程中可以看到，此包已經不受維護了，但是不影響我們此次的演示。

下面我們就將演示滑鼠移入行為，實現滑鼠移入按鈕，按鈕字型顏色改變的效果

首先需要為Xaml介面中引入一下上面安裝包的名稱空間：

image-20220303081040541

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

接下來，我們去到之前Button按鈕的位置，改成如下結構：

        <Button
            x:Name="btnUpdate"
            Grid.Row="3"
            Grid.ColumnSpan="2"
            Margin="20"
            Command="{Binding ClickAction}"
            CommandParameter="{Binding RelativeSource={RelativeSource Mode=Self}}"
            Content="更新一下資訊"
            FontSize="30"
            FontWeight="Bold">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseEnter">
                    <i:InvokeCommandAction
                        Command="{Binding MouseEnterAction}"
                        CommandParameter="{Binding ElementName=btnUpdate}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>

這裡演示的是將MouseEnter事件繫結到命令MouseEnterAction上

注意，這裡給Button按鈕新增了一個Name屬性，叫做btnUpdate，是為了方便傳參的時候，繫結此按鈕，將此按鈕當作引數傳入到後臺！

然後我們去到MainWindowVM（ViewModel）中，實現好我們的命令，這裡實現的跟之前一樣，是一個帶引數的命令：

        /// <summary>
        /// 命令要執行的方法
        /// </summary>
        void UpdateColorExecute(object sender)
        {
            Button button =sender as Button;
            button.Foreground = Brushes.Red;
        }

        /// <summary>
        /// 命令是否可以執行
        /// </summary>
        /// <returns></returns>
        bool CanUpdateColorExecute()
        {
            return true;
        }
        /// <summary>
        /// 建立新命令
        /// </summary>
        public ICommand MouseEnterAction
        {
            get
            {
                return new RelayCommand<object>(UpdateColorExecute, CanUpdateColorExecute);
            }
        }

接下來就看演示看到，滑鼠移入的時候，按鈕字型顏色被修改了！

動畫1

結語

到這裡MVVM系列的說明就結束了，這幾篇文章舉例的部分可能過於簡單，甚至有些包都停止維護了，針對你日常的工作可能並沒有太大的幫助，重點還是瞭解一下MVVM以及如何使用他們。

後續可能會介紹一種特定的MVVM框架，儘量描述出工作中可能出現的情況或存在的問題！

見解

雖然MVVM能夠方便的實現資料的繫結，但是在前期的構建過程中也算是比較麻煩的，至於是否一定要使用MVVM，以及在任何地方都採用MVVM，還是自己決定，不過有些情況下采用MVVM模式反而會顯得更加複雜，此時採用傳統方案也是非常不錯的！

感謝你看到這裡！

相關文章