MVVM --- Command 綁定

（一）簡單綁定

    

網上有很多關於MVVM的Command綁定，我這裏介紹一種藉助Prism的非常方便的綁定方式。 

1.項目中添加Prism.dll引用

2.創建ViewModel，定義ICommand命令和委託方法，注意DelegateCommand是Prism中的類

public class Window1ViewModel {

    public ICommand ButtonCommand {
        get {
            return new DelegateCommand(() => {
                MessageBox.Show("Button");
            });
        }
    }
}

 

3.xaml中綁定，先指定DataContext，然後在Button的Command中指定綁定ButtonCommand命令

<Window x:Class="WpfApplication1.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:WpfApplication1"
        Title="Window1" Height="193" Width="190">
    <Window.DataContext>
        <vm:Window1ViewModel />
    </Window.DataContext>
    <Grid>
        <Button Content="Button" Height="33" HorizontalAlignment="Left" Margin="34,20,0,0" Name="button1" VerticalAlignment="Top" Width="109"
        Command="{Binding ButtonCommand}"/>
    </Grid>
</Window>

點擊按鈕後，顯示了對話框。成功！

（二）傳遞Command參數

我們如果需要在Command中傳遞參數，實現也很簡單。DelegateCommand還有一個DelegateCommand<T>版本，可以傳遞一個T類型的參數。

1.View的Button綁定，其中CommandParameter定義了一個“20”的參數

<Window x:Class="WpfApplication1.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:WpfApplication1"
        Title="Window1" Height="193" Width="190">
    <Window.DataContext>
        <vm:Window1ViewModel />
    </Window.DataContext>
    <Grid>
        <Button Content="Button" Height="33" HorizontalAlignment="Left" Margin="34,20,0,0" Name="button1" VerticalAlignment="Top" Width="109"
                Command="{Binding ButtonCommand}"
                CommandParameter="20"/>
    </Grid>
</Window>

2.ViewModel定義命令，注意委託參數

namespace WpfApplication1 {
    public class Window1ViewModel {

        public ICommand ButtonCommand {
            get {
                return new DelegateCommand<string>((str) => {
                    MessageBox.Show("Button's parameter:"+str);
                });
            }
        }

    }
}

並且，特殊情況下，我們可以將控件對象作爲參數傳遞給ViewModel，注意{Binding RelativeSource={x:Static RelativeSource.Self}}是綁定自己（Button）的意思。

<Window x:Class="WpfApplication1.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:WpfApplication1"
        Title="Window1" Height="193" Width="190">
    <Window.DataContext>
        <vm:Window1ViewModel />
    </Window.DataContext>
    <Grid>
        <Button Content="Button" Height="33" HorizontalAlignment="Left" Margin="34,20,0,0" Name="button1" VerticalAlignment="Top" Width="109"
                Command="{Binding ButtonCommand}"
                CommandParameter="20"/>
        <Button Content="Button" Height="33" HorizontalAlignment="Left" Margin="34,85,0,0" Name="button2" VerticalAlignment="Top" Width="109"
                Command="{Binding ButtonCommand2}"
                CommandParameter="{Binding RelativeSource={x:Static RelativeSource.Self}}"/>
    </Grid>
</Window>

再看ViewModel

namespace WpfApplication1 {
    public class Window1ViewModel {

        public ICommand ButtonCommand {
            get {
                return new DelegateCommand<string>((str) => {
                    MessageBox.Show("Button's parameter:"+str);
                });
            }
        }

        public ICommand ButtonCommand2 {
            get {
                return new DelegateCommand<Button>((button) => {
                    button.Content = "Clicked";
                    MessageBox.Show("Button");
                });
            }
        }
    }
}

這樣就可以在委託中獲取Button對象了。但是MVVM本身比建議ViewModel操作View。

下面介紹一種更強大的命令綁定，可以用於各種事件的ViewModel觸發。

（三）任意事件的Command

WPF中不是所有的控件都有Command屬性的，如果窗體我需要在ViewModel中處理Loaded事件命令，或者其他事件的命令時，很難都過綁定Command完成，必須要註冊依賴屬性或事件等，太麻煩了。我喜歡簡約、有效的方式，現在我和大家一起分享一下。

場景，我需要處理Button的Click和MouseMove事件，但又避免用後置代碼，儘量要在ViewModel中獲取。單獨一個Click可以通過Button的Command來完成，在前兩篇文章中我已介紹過，現在就來處理MouseMove事件，這是需要一個System.Windows.Interactivity.dll，該dll是安裝Blend後纔有的，在C:\Program Files\Microsoft SDKs\Expression\Blend\.NETFramework\v4.0\Libraries目錄中，然後我們仍需要Prism.dll。

xaml：

<Window x:Class="WpfApplication1.Window2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
        xmlns:vm="clr-namespace:WpfApplication1"
        Title="Window2" Height="124" Width="214">
    <Window.DataContext>
        <vm:Window2ViewModel />
    </Window.DataContext>
    <Grid>
        <Button Name="btn" Content="Button" Height="33" HorizontalAlignment="Left" Margin="40,24,0,0" VerticalAlignment="Top" Width="109">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <i:InvokeCommandAction Command="{Binding Command1}" CommandParameter="10" />
                </i:EventTrigger>
                <i:EventTrigger EventName="MouseMove">
                    <i:InvokeCommandAction Command="{Binding Command2}" CommandParameter="{Binding ElementName=btn}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
    </Grid>
</Window>

注意；xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"就是導入Blend的dll，然後在控件內部用<i:Interaction.Triggers/>即可，其它應該一看就知道，我通過事件觸發器，來引發ViewModel中兩個Command，第二個Command的參數是Button對象，通過ElementName=btn來指定。

ViewModel：

namespace WpfApplication1 {
    public class Window2ViewModel {

        public ICommand Command1 {
            get {
                return new DelegateCommand<string>((str) => {
                    MessageBox.Show("Command1 with parameter:"+str);
                });
            }
        }

        public ICommand Command2 {
            get {
                return new DelegateCommand<Button>((button) => {
                    Point p = Mouse.GetPosition(button);
                    button.Content = string.Format("{0},{1}", p.X, p.Y);
                });
            }
        }
    }
}

這部分內容和上一章內容基本相同。

好了，測試一下，實現起來是不是非常簡潔！（我以前是做Java的，所以代碼簡潔明瞭是一貫作風，生活也是如此！）

 

代碼下載：http://qing2005.download.csdn.net/

轉自：http://blog.csdn.net/qing2005/article/details/6601475