机遇屋-WPF简单MVVM

WPF简单MVVM

作者：ych

### 1.MVVM介绍：
MVVM就是: Model -- 模型（现实中对象的抽象）
View -- UI（用户界面）
ViewModel -- UI界面的抽象（给View提供数据，并响应View的操作）

### 2.关键是要能准确的进行ViewModel的建模,处理好View与ViewModel之间的关系
2.1. 只有2种关系：
>数据传递 --- 双向，使用Binding实现；
操作传递 --- 单向（只从View传递给ViewModel），使用命令Command实现；

### 3.开始
#### 3.1. 创建ViewModelBase

它是所以ViewModel的基类
因为要使用Binding，而ViewModel就充当数据源的角色，而要实现当值有变化时会自动响应，就必须实现INotifyPropertyChanged接口
有人喜欢命名为`ViewModelBase`、`NotificationObject`等等，怎么喜欢怎么来就行。

代码如下：
ViewModelBase.cs
```
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));
            }
        }
    }
```
#### 3.2.创建DelegateCommand
实现了ICommand接口，用来处理View发送到ViewModel的命令，代码如下：
```
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.3.ViewModel
ViewModel是充当View的数据源的，所以只需要考虑View需要什么数据、含有哪些操作，创建MainWindow的ViewModel，MainWindowViewModel,代码如下：
```
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));
        }
    }
```

#### 3.4.将ViewModel作为数据源赋值给View的DataContext
```
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new MainWindowViewModel();
        }
    }
```
#### 3.5.在View中绑定数据
```
    <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>
```

### 其它
#### 自定义一个代码块
为了方便开发，这里推荐自定义一个code snippet(代码块)：
放到此目录下`C:\Program Files (x86)\Microsoft Visual Studio 12.0\VC#\Snippets\1033\Visual C#`
```
<?xml version="1.0" encoding="utf-8" ?>
<CodeSnippets  xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
    <CodeSnippet Format="1.0.0">
        <Header>
            <Title>propn</Title>
            <Shortcut>propn</Shortcut>
            <Description>Code snippet for NotificationObject property and backing field</Description>
            <Author>Microsoft Corporation</Author>
            <SnippetTypes>
                <SnippetType>Expansion</SnippetType>
            </SnippetTypes>
        </Header>
        <Snippet>
            <Declarations>
                <Literal>
                    <ID>type</ID>
                    <ToolTip>Property type</ToolTip>
                    <Default>int</Default>
                </Literal>
                <Literal>
                    <ID>property</ID>
                    <ToolTip>Property name</ToolTip>
                    <Default>MyProperty</Default>
                </Literal>
                <Literal>
                    <ID>field</ID>
                    <ToolTip>The variable backing this property</ToolTip>
                    <Default>myVar</Default>
                </Literal>
            </Declarations>
            <Code Language="csharp"><![CDATA[private $type$ $field$;

public $type$ $property$
    {
        get { return $field$;}
        set {
            $field$ = value;
            this.RaisePropertyChanged("$property$");
        }
    }
    $end$]]>
            </Code>
        </Snippet>
    </CodeSnippet>
</CodeSnippets>
```

评论区

先去登录

WPF简单MVVM

相关推荐

评论区