MVVM模式是把表现层和业务层完全分离,所以这里就使用MVVM制作一个极其简单的WPF的例子:
先看看最终图:
aaarticlea/png;base64,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" alt="" />
上图,需要实现的是,界面两个按钮,一个是生成随机两个数,一个是对两个数比较,把大的数显示出来。所以需要三个属性,两个事件。
由于逻辑比较简单,不用写model等类,实现如下:
1、创建基类NotifictionObject.cs,实现接口INotifyPropertyChanged
class NotifictionObject : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged; public void RaisePropertyChanged(string str)
{
if (this.PropertyChanged != null)
this.PropertyChanged(this, new PropertyChangedEventArgs(str));
} }
2、创建DelegateCommand.cs,继承ICommand
class DelegateCommand : ICommand
{
public Func<object,bool> CanExecuteFunc { get; set; } public Action<object> ExecuteAction { get; set; } public event EventHandler CanExecuteChanged; public bool CanExecute(object parameter)
{
if (CanExecuteFunc == null)
return true;
return CanExecuteFunc(parameter);
} public void Execute(object parameter)
{
if (ExecuteAction == null)
return;
ExecuteAction(parameter);
}
}
3、再创建类MainWindowViewModel.cs,继承NotifictionObject基类
class MainWindowViewModel : NotifictionObject
{
private int a; public int RndA
{
get { return a; }
set
{
a = value;
RaisePropertyChanged("RndA");
}
}
private int b; public int RndB
{
get { return b; }
set
{
b = value;
RaisePropertyChanged("RndB");
}
}
private int result; public int Result
{
get { return result; }
set
{
result = value;
RaisePropertyChanged("Result");
}
} public DelegateCommand CompareCommand { get; set; }
public DelegateCommand ReNewRndNumCommand { get; set; } Random rnd = new Random();
public MainWindowViewModel()
{
LoadData(); CompareCommand = new DelegateCommand();
CompareCommand.ExecuteAction = (para) =>
{
Result = RndA >= RndB ? RndA : RndB;
}; ReNewRndNumCommand = new DelegateCommand();
ReNewRndNumCommand.ExecuteAction = (para) =>
{
LoadData();
};
} public void LoadData()
{
RndA = rnd.Next(, );
RndB = rnd.Next(, );
}
}
4、类都实现了,现在实现界面部分
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Margin="" x:Name="textBlock" TextWrapping="Wrap" Text="数字1:"/>
<TextBlock Margin="" x:Name="textBlock1" Grid.Column="" TextWrapping="Wrap" Text="{Binding RndA}"/>
<TextBlock Margin="" x:Name="textBlock2" Grid.Column="" TextWrapping="Wrap" Text="数字2:"/>
<TextBlock Margin="" x:Name="textBlock3" Grid.Column="" TextWrapping="Wrap" Text="{Binding RndB}"/> <Button Grid.Row="" Command="{Binding ReNewRndNumCommand}" Grid.ColumnSpan="" Width="" Margin="">重新生成数</Button>
<Button x:Name="button" Command="{Binding CompareCommand}" Margin="" Content="比较大小" Grid.ColumnSpan="" Grid.Row="" Grid.Column="" Width=""/> <TextBlock x:Name="textBlock4" Margin="" HorizontalAlignment="Center" Grid.Column="" Grid.Row="" Grid.ColumnSpan="" TextWrapping="Wrap" Text="{Binding Result}"/> </Grid>
5.在主界面的C#初始化时添加上下文:
public MainWindow()
{
InitializeComponent(); this.DataContext = new MainWindowViewModel();
}
代码就不详细介绍了,自己慢慢看,不是太难,多多练习。