本文假設(shè)你已經(jīng)知道MVVM設(shè)計模式是什么，所以直接進(jìn)入正題，今天我們就用Prism來實現(xiàn)WPF的MVVM設(shè)計模式，百度上關(guān)于Prism的教程少之又少，僅有的幾個教程也是使用的很古老的版本，反正也是看不懂寫的啥玩意，下面以最簡潔明了的代碼來演示事件綁定和數(shù)據(jù)綁定。
1. 準(zhǔn)備
使用上一節(jié)的Demo，來繼續(xù)完成本節(jié)教程WPF系列教程——(一)仿TIM QQ界面
-
Prism
Prism是一個MVVM框架，它包括，依賴注入(通過Unity或MEF)、Commands, EventAggregator。
在NuGet包管理器中搜索Prism，找到Prism.WPF并添加到項目
Prism -
interactivity
每一個控件都會有很多不一樣的事件，這里使用interactivity來綁定控件的事件， 在程序集中搜索interactivity，并添加引用。
命名空間xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
interactivity 創(chuàng)建一個
ViewModels文件夾,并創(chuàng)建MainWindowViewModel.cs，視圖模型的命名統(tǒng)一使用視圖名+"ViewModel"，并繼承BindableBase。
2.開始
- 在ViewModel中添加窗口關(guān)閉事件委托
public DelegateCommand CloseCommand { get; set; }
在構(gòu)造函數(shù)中實例化
CloseCommand = new DelegateCommand(()=> {
Application.Current.Shutdown();
});
在關(guān)閉按鈕中綁定
Command="{Binding CloseCommand}"
- ListView中Item的點擊事件
我們要實現(xiàn)的是點擊Item，名片就會顯示對應(yīng)的頭像和昵稱。
在ViewModel中創(chuàng)建Friend類
public class Friend
{
public string Nickname { get; set; } //昵稱
public BitmapImage Head { get; set; } //頭像
}
ListView數(shù)據(jù)源
private ObservableCollection<Friend> friends;
public ObservableCollection<Friend> Friends
{
get { return friends; }
set { friends = value; }
}
添加測試數(shù)據(jù)
friends = new ObservableCollection<Friend>();
friends.Add(new Friend() {Nickname="Go to hell",Head= new BitmapImage(new Uri("pack://application:,,,/Images/head1.jpg")) });
friends.Add(new Friend() { Nickname = "糖寶", Head = new BitmapImage(new Uri("pack://application:,,,/Images/head2.jpg")) });
friends.Add(new Friend() { Nickname = "胖虎", Head = new BitmapImage(new Uri("pack://application:,,,/Images/head3.jpg")) });
friends.Add(new Friend() { Nickname = "小花", Head = new BitmapImage(new Uri("pack://application:,,,/Images/head4.jpg")) });
friends.Add(new Friend() { Nickname = "隔壁老王", Head = new BitmapImage(new Uri("pack://application:,,,/Images/head5.jpg")) });
friends.Add(new Friend() { Nickname = "狗子", Head = new BitmapImage(new Uri("pack://application:,,,/Images/head6.jpg"))});
ListView綁定數(shù)據(jù)源
ItemsSource="{Binding Friends}"
ListView數(shù)據(jù)模板
把數(shù)據(jù)模板中昵稱和網(wǎng)名換成Friend中對應(yīng)的屬性，完成數(shù)據(jù)綁定。
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal"
Height="50"
>
<Ellipse Cursor="Hand"
Width="50"
Height="50">
<Ellipse.Fill>
<ImageBrush ImageSource="{Binding Head}" />
</Ellipse.Fill>
</Ellipse>
<StackPanel
Orientation="Vertical"
VerticalAlignment="Center"
Margin="5 0">
<TextBlock
FontSize="15"
Foreground="Black"
Text="{Binding Nickname}" />
<TextBlock
Margin="0 2 0 0"
FontSize="12"
Text="這家伙很懶,什么也沒留下" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
Item點擊事件
在后臺定義點擊事件委托
public DelegateCommand<object> SelectItemChangedCommand { get; set; }
在視圖中添加點擊事件
EventName指定綁定的事件名稱，Command綁定ViewModel中之前定義好的委托，CommandParameter傳遞至ViewModel的參數(shù)，這里傳的值就是當(dāng)前ListView對象。
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding SelectItemChangedCommand}"
CommandParameter="{Binding ElementName=FriendList}" />
</i:EventTrigger>
</i:Interaction.Triggers>
在構(gòu)造函數(shù)中實例化SelectItemChangedCommand
參數(shù)P就是當(dāng)前的ListView對象他的SelectedItem屬性就是選中的Item，將SelectedItem轉(zhuǎn)換為Friend對象，并賦值給名片中頭像和昵稱的數(shù)據(jù)源。
SelectItemChangedCommand = new DelegateCommand<object>((p)=>{
ListView lv = p as ListView;
Friend friend = lv.SelectedItem as Friend;
Head= friend.Head;
Nickname = friend.Nickname;
});
- 名片中的頭像和昵稱數(shù)據(jù)源
private BitmapImage head;
public BitmapImage Head
{
get { return head; }
set { SetProperty(ref head, value); }
}
private string nickname;
public string Nickname
{
get { return nickname; }
set { SetProperty(ref nickname, value); }
}
在視圖中綁定
頭像Source="{Binding Head}"
昵稱Text="{Binding Nickname}"
演示
歡迎Star https://github.com/vaemc/WpfTimQQ
如果本教程對你有所幫助歡迎持續(xù)關(guān)注~~
