MVVM开发模式简单实例MVVM Demo【续】

本文将接着上篇文章，介绍一下三点：(Universal App)

1.将添加Product集合，绑定到列表

2.给点击ListBox的添加选项改变时的事件（要附加依赖属性，和Button点击事件不同）

3.通过自定义类以JSON获取保存数据到存储空间

-------------------------------------------------

1.添加集合，绑定列表，支持可操作

在ProductViewModel中添加字段、属性：

private ObservableCollection<ProductModel> _products;

public ObservableCollection<ProductModel> Product　　//产品集合
{

　　get { return _products; }

　　set

　　{

　　　　SetProperty(ref this._products, value);

　　}

}

并在构造函数中添加实例化语句

public ProductViewModel()

{

　　Products = new ObservableCollection<ProductModel>();

}

前台ListBox代码

<在View后台，this.DataContext = product;   也就是说ListBox.dataContext也是一样的>

<ListBox ItemsSource="{Binding Products}">

　　<ListBox.ItemTemplate>

　　　　<DataTemplate>

　　　　　　<StackPanel>

　　　　　　　　<TextBlock Text="{Binding ProductId}"/>

　　　　　　　　<TextBlock Text="{Binding ProductName}"/>

　　　　　　　　<TextBlock Text="{Binding UnitPrice}"/>

　　　　　　</StackPanel>

　　　　</DataTemplate>

　　</ListBox.ItemTemplate>

</ListBox>

将保存数据的事件改写为

public void SaveProduct()

{

　　//await new MessageDialog("保存").ShowAsync();

　　Products.Add(CurrentProduct);　　//添加数据到集合中

}

每一次输入数字后，保存，ListBox数据将会增加。（你们可以自己试着实现删除。）

2.给ListBox添加事件（相当于SelectedChanged）   我们要使用依赖属性

新增一个SelectionChangedBehavior类

public static class SelectionChangedBehavior

    {

        public static readonly DependencyProperty SelectionChangedCommandProperty =

            DependencyProperty.RegisterAttached(

                "SelectionChangedCommand",

                typeof(ICommand),

                typeof(SelectionChangedBehavior),

                new PropertyMetadata(null, new PropertyChangedCallback(SeletionChangedPropertyChangedCallback)));



        public static ICommand GetSelectionChangedCommand(DependencyObject d)

        {

            return (ICommand)d.GetValue(SelectionChangedCommandProperty);

        }



        public static void SetSelectionChangedCommand(DependencyObject d, ICommand value)

        {

            d.SetValue(SelectionChangedCommandProperty, value);

        }



        public static void SeletionChangedPropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)

        {

            ((ListBox)d).SelectionChanged += (ss, ee) => 

            {

                ListBox lv = ss as ListBox;

                GetSelectionChangedCommand(lv).Execute(lv.SelectedItem);

            };

        }

    }

在View.xaml中

添加引用 xmlns:behavior="using:SimpleMVVMExample.Common"     位置为上述类所在位置

给ListBox添加属性

<ListBox ItemsSource="{Binding Products}" 

                          behavior:SelectionChangedBehavior.SelectionChangedCommand="{Binding SelectionChangedCommand}"  >

现在去ProductViewModel实现SelectionChangedCommand；

private ICommand _selectionChangedCommand;

public ICommand SelectionChangedCommand

        {

            get

            {

                if (_selectionChangedCommand == null)

                    _selectionChangedCommand = new RelayCommand(SelectionChanged);

                return _selectionChangedCommand;

            }

        }



public void SelectionChanged(object parameter)

        {

            ProductModel productModel = parameter as ProductModel;

            //这已经获取到了

            //具体要做些什么事情 自己处理  

        }    

3.利用生命周期来向设置中保存、提取数据

A.自定义类转换为JSON

ProductViewModel.cs

　　　　 public void SaveData()

        {

            var settings = ApplicationData.Current.LocalSettings;

            string json = this.Stringify();

            settings.Values["ViewModel"] = json;

        }

        private string Stringify()

        {

            JsonObject jsonObject = new JsonObject();

            JsonArray jsonArray = new JsonArray();



            foreach (ProductModel item in Products)

            {

                jsonArray.Add(item.ToJsonObject());

            }



            JsonObject products = new JsonObject();

            products.SetNamedValue("ProductsKey", jsonArray);

            products.SetNamedValue("NewId", JsonValue.CreateNumberValue(_productId));

            jsonObject.SetNamedValue("SaveKey", products);

return jsonObject.Stringify();　　

        }

ProductModel.cs

public JsonObject ToJsonObject()

        {

            JsonObject jsonObject = new JsonObject();

            jsonObject.SetNamedValue("NameKey", JsonValue.CreateStringValue(ProductName));

            jsonObject.SetNamedValue("IdKey", JsonValue.CreateNumberValue(ProductId));

            jsonObject.SetNamedValue("PriceKey", JsonValue.CreateNumberValue((double)UnitPrice));



            JsonObject product = new JsonObject();

            product.SetNamedValue("ProductKey", jsonObject);

            return product;

        }

自己画的结构示意图。。。

B.JSON转换为自定义类

ProductViewModel.cs：

　　　　 public void GetData()

        {

            string setting = ApplicationData.Current.LocalSettings.Values["ViewModel"].ToString();

            ProductViewModel productViewModel = new ProductViewModel(setting);

            this._productId = productViewModel._productId;

            this._products = productViewModel.Products;

        }



        public ProductViewModel(string jsonString)

        {
            this.Products = new ObservableCollection<ProductModel>();


            JsonObject jsonOject = JsonObject.Parse(jsonString);

            this.ProductId = (int)jsonOject.GetNamedObject("SaveKey").GetNamedNumber("NewId");

            foreach (var item in jsonOject.GetNamedObject("SaveKey").GetNamedArray("ProductsKey", new JsonArray()))

            {

                if (item.ValueType == JsonValueType.Object)

                {

                    this.Products.Add(new ProductModel(item.GetObject()));

                }

            }

        }     

ProductModel.cs

　　　　　public ProductModel(JsonObject jsonObject)

        {

            JsonObject productObject = jsonObject.GetNamedObject("ProductKey");

            if (productObject != null)

            {

                this.ProductId = (int)productObject.GetNamedNumber("IdKey");

                this.ProductName = (string)productObject.GetNamedString("NameKey");

                this.UnitPrice = (decimal)productObject.GetNamedNumber("PriceKey");

            }

        }

C.View生命周期

　　　　 private void NavigationHelper_LoadState(object sender, LoadStateEventArgs e)

        {

            if (ApplicationData.Current.LocalSettings.Values.ContainsKey("ViewModel"))

            {

                product.GetData();

            }

        }

        private void NavigationHelper_SaveState(object sender, SaveStateEventArgs e)

        {

            product.SaveData();

        }

注: 上一篇文章里说了，MVVM下，在Model里不能包括任何方法，而此处转换JSON时，在Model里面的方法应该不规范。
可以在ProductViewModel里面实现。  这里只是给出进行转换的方法。写在ViewModel的保存、取出设置内容也是一样。

 

下面给出Demo:  为Universal App

SimpleMVVMExample Demo下载