在本文中将演示如何在Windows 8进行MVVM开发，首先我们准备两个辅助类如下：
ViewModeBase类：
public class ViewModeBase : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; /// <summary> /// 属性变化时触发事件 /// </summary> /// <param name="propertyName"></param> protected void OnPropertyChanged( string propertyName ) { var handler = this.PropertyChanged; if ( handler != null ) { handler( this, new PropertyChangedEventArgs( propertyName ) ); } } }
DelegateCommand类：
public class DelegateCommand : ICommand { private readonly Action m_exeAction; private readonly Func<bool> m_canExeAction; /// <summary> /// 构造函数 /// </summary> /// <param name="executeAction"></param> /// <param name="canExecuteAction"></param> public DelegateCommand(Action executeAction, Func<bool> canExecuteAction) { m_exeAction = executeAction; m_canExeAction = canExecuteAction; } /// <summary> /// 构造函数 /// </summary> /// <param name="executeAction"></param> /// <param name="canExecuteAction"></param> public DelegateCommand(Action executeAction) : this(executeAction, null) { } /// <summary> /// 判断是否执行操作 /// </summary> /// <param name="parameter"></param> /// <returns></returns> public bool CanExecute(object parameter) { if (m_canExeAction != null) { return m_canExeAction(); } return true; } /// <summary> /// 是否执行操作的变更发生时 /// </summary> public event EventHandler CanExecuteChanged; /// <summary> /// 执行操作的内容，可以变为Action行为 /// </summary> /// <param name="parameter"></param> public void Execute(object parameter) { if (CanExecute(parameter)) { m_exeAction(); } } protected void OnCanExecuteChanged(object sender, EventArgs args) { var handler = CanExecuteChanged; if ( handler != null ) { handler( this, EventArgs.Empty ); } } public void RaiseCanExecuteChanged() { OnCanExecuteChanged(this, EventArgs.Empty); } }
Model层如下：
/// <summary> /// 图片Model /// </summary> public class BookModel : ViewModeBase { private string txtTitle; private string txtContent; private string imageUrl; private bool isSelect; /// <summary> /// 标题 /// </summary> public string TxtTitle { get { return txtTitle; } set { txtTitle = value; OnPropertyChanged("TxtTitle"); } } /// <summary> /// 内容 /// </summary> public string TxtContent { get { return txtContent; } set { txtContent = value; OnPropertyChanged("TxtContent"); } } /// <summary> /// 图片URL地址 /// </summary> public string ImageUrl { get { return imageUrl; } set { imageUrl = value; OnPropertyChanged("ImageUrl"); } } }
ViewModel层代码如下：
public class MainPageViewModel:ViewModeBase { private ICommand getTextCommand; private ICommand btnCommand; private string showText; private string getText; ObservableCollection<BookModel> books = new ObservableCollection<BookModel>(){ new BookModel(){ TxtTitle="盘龙",TxtContent="大小的血睛鬃毛狮，力大无穷的紫睛金毛猿，毁天灭地的九头蛇皇，携带着毁灭雷电的恐怖雷龙这里无奇不有，这是一个广博的魔幻世界。", ImageUrl="http://image.qidian.com/books/1017141/1017141.jpg" }, new BookModel(){ TxtTitle="纵横轮回",TxtContent="李沐然，本为身怀诸子百家所长的大神通者，在收取世间最后一颗神雷珠之时和神雷珠一道重生异世神雷之力，刑罚天下", ImageUrl="http://image.qidian.com/books/1.jpg" }, new BookModel(){ TxtTitle="巫师世界",TxtContent="穿越到异世界成为普通的小家族子弟，带着具有分析能力的生物芯片开始强大之旅..... ", ImageUrl="http://image.qidian.com/books/2443169/2443169.jpg" }, new BookModel(){ TxtTitle="杀神",TxtContent="在这个人吃人的疯狂世界，神已无力回天，就让我踏着漫天诸神的累累尸骨来普渡这芸芸众生……", ImageUrl="http://image.qidian.com/books/1911245/1911245.jpg" } }; public ICommand GetTextCommand { get { return getTextCommand; } set { getTextCommand = value; } } public ICommand BtnCommand { get { return btnCommand; } set { btnCommand = value; } } public string ShowText { get { return showText; } set { showText = value; OnPropertyChanged("ShowText"); } } public string GetText { get { return getText; } set { getText = value; OnPropertyChanged("GetText"); } } public MainPageViewModel() { BtnCommand = new DelegateCommand(Btn_Executed); GetTextCommand = new DelegateCommand(GetText_Executed); } private void GetText_Executed() { GetText = "'" + ShowText + "'是我获取到的值"; } private void Btn_Executed() { ShowText = "您已经点击了按钮，请在这里输入值"; } public ObservableCollection<BookModel> Books { get { return books; } } }
最后View层代码如下：
<Page.DataContext>
<local:MainPageViewModel />
</Page.DataContext>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<Button Command="{Binding BtnCommand}" Content="点击我" Padding="8"
Margin="72,138,0,494" Height="60" Width="100" Grid.Row="0"/>
<TextBox Name="tbshow" Height="60" Text="{Binding ShowText,Mode=TwoWay}" Margin="230,176,744,532"/>
<GridView x:Name="mainGridView" ItemsSource="{Binding Books}" VerticalAlignment="Center" Grid.Row="1">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Grid Width="250" Height="200" Background="#33CCCCCC">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="110"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Margin="5,0,0,0" Source="{Binding ImageUrl}" Stretch="None"></Image>
<TextBlock Grid.Column="1" Margin="15,15,0,0" Foreground="White" Text="{Binding TxtTitle}"
FontWeight="Bold" FontSize="18" TextWrapping="Wrap"/>
<TextBlock Grid.Column="1" Margin="15,40,0,0" Foreground="White" Text="{Binding TxtContent}"
FontWeight="Light" FontSize="13" TextWrapping="Wrap"/>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
<Button Command="{Binding GetTextCommand}" Content="点击我获取值" Padding="8"
Margin="667,176,0,532" Height="60" Width="123" Grid.Row="0"/>
<TextBlock HorizontalAlignment="Left" Margin="795,198,0,0" TextWrapping="Wrap"
Text="{Binding GetText,Mode=TwoWay}" VerticalAlignment="Top"
Height="22" Width="379"/>
</Grid>
</Page>
