解耦！解耦！漫谈 XAML 应用程序开源框架 Prism（六）MVVM

 

一、MVVM - 视图 与 后台逻辑 的解耦

介绍MVVM是什么的文章很多，这里不再赘述，需要说明的是听到很多这样的说法：Prism就是MVVM框架，我觉得这样的说法是不对的，MVVM只是Prism框架中的一部分，是Prism解耦家族的一员。

这里简单介绍一下在Prism中的一些关于MVVM相关小技巧。

在Visual Studio 中有Prism Template Pack扩展，安装它之后可以更方便的帮助我们创建Prism程序模板，还会提供一些快捷代码段的支持，比如propp快速创建一个带通知的属性，cmd创建一个命令。

Binding是MvvM中最重要的概念，视图元素之间，视图与模型之间简单数据，集合数据，指令，指令参数等等都可以Binding。Binding非常的灵活，但我们必须认真思考它的本质。

在MVVM中最重的事情就是揣度筹划各种任务的执行单元，同样一个功能因为实现的方法太多，反而更容易违背框架的设计初衷。比如视图的外观可以绑定在模型中去控制，这在有些场合是合适的，有些场合更适合在视图中实现。

二、Binding

视图元素之间

<TextBlock Text="{Binding ElementName=SL_Bat1, Path=Value}" />

<Slider Name="SL_Bat1"></Slider>

视图与模型之间简单数据 Binding 并格式化

视图

<TextBlock Text="{Binding SiftContrast, StringFormat={}{0:F3}}" />

模型

        private double _SiftContrast = 0.04;

        public double SiftContrast
        {
            get { return _SiftContrast; }
            set { SetProperty(ref _SiftContrast, value); }
        }

集合数据Binding

效果：

 视图

            <DataGrid
                Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}, AncestorLevel=1}, Path=ActualWidth}"
                Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Grid}, AncestorLevel=1}, Path=ActualHeight}"
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                AutoGenerateColumns="False"
                CanUserAddRows="False"
                ItemsSource="{Binding Model.UserList}"
                ScrollViewer.VerticalScrollBarVisibility="Auto">
                <DataGrid.Columns>
                    <DataGridTextColumn
                        Width="200"
                        Binding="{Binding Name}"
                        Header="用户"
                        IsReadOnly="True" />
                    <DataGridTextColumn
                        Width="200"
                        Binding="{Binding Authority}"
                        Header="权限"
                        IsReadOnly="True" />
                    <DataGridTemplateColumn>
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <Button Command="{Binding Delete}" Content="删 除" />
                                </StackPanel>
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>
                    <DataGridTemplateColumn>
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <Button Command="{Binding ChangePassword}" Content="修改密码" />
                                </StackPanel>
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                    </DataGridTemplateColumn>
                </DataGrid.Columns>
            </DataGrid>

 模型

        private BindingList<User> _UserList = new();

        public BindingList<User> UserList
        {
            get { return _UserList; }
            set { SetProperty(ref _UserList, value); }
        }



    public class User
    {
        public User(string name, string password, Authority authority)
        {
            Name = name;
            Password = password;
            Authority = authority;
        }
        public string Name { get; set; }
        public string Password { get; set; }

        public Authority Authority { get; set; }

        private DelegateCommand _Delete;
        public DelegateCommand Delete =>
             _Delete ??= new DelegateCommand(ExecuteDelete);

        void ExecuteDelete()
        {
            DeleteMe?.Invoke(Name);
        }

        public event Action<string> DeleteMe;

        private DelegateCommand _ChangePassword;
        public DelegateCommand ChangePassword =>
             _ChangePassword ??= new DelegateCommand(ExecuteChangePassword);

        void ExecuteChangePassword()
        {
            ChangeMyPassword?.Invoke(Name);
        }

        public event Action<string> ChangeMyPassword;

        public override string ToString()
        {
            return $"{Name}";
        }

    }

命令Binding

这里把一个控件做为参数传给模型

            <Button
                Width="80"
                Height="28"
                HorizontalAlignment="Center"
                Background="#5cb85c"
                Command="{Binding LoginCommand}"
                CommandParameter="{Binding ElementName=passwordBox}"
                Content="登录"
                FontSize="12"
                Foreground="White" Cursor="Hand" />

 模型获得参数

        public DelegateCommand<PasswordBox> LoginCommand =>
             _LoginCommand ??= new DelegateCommand<PasswordBox>(ExecuteLoginCommand);

        private async void ExecuteLoginCommand(PasswordBox passwordBox)
        {
            var password = passwordBox.Password;
            ...
        }

示例就不放更多了，弄清楚wpf Binding相关的一些概念比如DataContext、依赖属性、ItemsSource是学习使用MvvM框架的关键。