Project Description


This project just give us a very simple demo that could be used while learning mvvm.

It looks like below...

1.jpg

You could visit here for more detailed description of this demo if you can read in Chinese.



Guide

Step 1. Code preparation

a. Prepare ViewModelBase
public abstract class ViewModelBase : INotifyPropertyChanged{
 
    public event PropertyChangedEventHandler PropertyChanged;
  
    
    //Send a msg to client while the property is changed
    public void RaisePropertyChanged(string propertyName)
    {
        PropertyChangedEventHandler handler = PropertyChanged;
  
        if (handler != null)
        {
            handler(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}



Prepare 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; }
    }
}


Step 2. Create MainWindowViewModel


Let the MainWindowViewModel inherit from 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));
    }
}


Step 3. Create View

Just need three elements.
<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="Submit" 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>


Step 4. Bind ViewModel to View

<Grid>
        <Button Content="Submit" 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>

Last edited Apr 15, 2014 at 2:48 PM by charleycode, version 3