Question

如何用WPF实现一个最简单的Mvvm示例

Answer 1

创建一个 ViewModelBase

public abstract class ViewModelBase : INotifyPropertyChanged{
//属性改变事件
public event PropertyChangedEventHandler PropertyChanged;

//当属性改变的时候，调用该方法来发起一个消息，通知View中绑定了propertyName的元素做出调整
public void RaisePropertyChanged(string propertyName)
{
PropertyChangedEventHandler handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
}

2创建一个DelegateCommand

public class DelegateCommand : ICommand{
readonly Action<object> _execute;
readonly Predicate<object> _canExecute;

public DelegateCommand(Action<object> execute)
: this(execute, null)
{
}
public DelegateCommand(Action<object> execute, Predicate<object> canExecute)
{
if (execute == null)
throw new ArgumentNullException("execute");
_execute = execute;
_canExecute = canExecute;
}
public void Execute(object parameter)
{
_execute(parameter);
}
public bool CanExecute(object parameter)
{
return _canExecute == null ? true : _canExecute(parameter);
}
public event EventHandler CanExecuteChanged
{
add { CommandManager.RequerySuggested += value; }
remove { CommandManager.RequerySuggested -= value; }
}
}

3创建示例用 ViewModel
让 ViewModel 继承自 ViewModelBase。

public class MainWindowViewModel : ViewModelBase{
private string _input;
public string Input
{
get
{
return _input;
}
set
{
_input = value;
RaisePropertyChanged("Input");
}
}

private string _display;
public string Display
{
get
{
return _display;
}
set
{
_display = value;
RaisePropertyChanged("Display");
}
}

public DelegateCommand SetTextCommand { get; set; }

private void SetText(object obj)
{
Display = Input;
}
public MainWindowViewModel()
{
SetTextCommand = new DelegateCommand(new Action<object>(SetText));
}
}

4创建 View
最少只需要三个控件：一个textbox拿来做输入，一个label拿来做输出，一个button拿来提交数据。

<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1.ViewModel"
Title="MainWindow" Height="237" Width="215">
<Grid>
<Button Content="提 交" HorizontalAlignment="Left" Margin="37,137,0,0" VerticalAlignment="Top" Width="75"/>
<TextBox x:Name="tb" HorizontalAlignment="Left" Height="23" Margin="37,30,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120"/>
<Label HorizontalAlignment="Left" Margin="37,76,0,0" VerticalAlignment="Top" />
</Grid>
</Window>

5绑定 View 和 ViewModel
当 View 和 ViewModel 都已经创建完之后，最后一步就是把它哥俩绑定在一起了。这样，当 View 改变的时候，ViewModel 就会发生相应的改变，反之亦然。
<Grid>
<Button Content="提 交" HorizontalAlignment="Left" Margin="37,137,0,0" VerticalAlignment="Top" Width="75" Command="{Binding SetTextCommand}"/>
<TextBox x:Name="tb" HorizontalAlignment="Left" Height="23" Margin="37,30,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="120" Text="{Binding Input}" />
<Label HorizontalAlignment="Left" Margin="37,76,0,0" VerticalAlignment="Top" Content="{Binding Display}" />
</Grid>