如何使用具有反应性UI的Xamarin

如何使用具有反应性UI的Xamarin

本文介绍了如何使用具有反应性UI的Xamarin Android将数据绑定到自定义ListView的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

限时删除!!

我正在使用具有响应式UI的Xamarin Android,而不是使用Xamarin Forms.我有一个自定义ListView(我已将其布局定义为xaml).我不知道如何使用活动类中的 OneWayBind 方法将此控件绑定到ViewModel中的observableCollection中.

I am using Xamarin Android with Reactive UI and Not using Xamarin Forms. I have a Custom ListView(I have defined it's layout as xaml). I have no idea how to bind this control into a observableCollection in ViewModel using OneWayBind method in the activity class.

我将其写为

this.OneWayBind(ViewModel, x => x.OutletListing, x => x.List).DisposeWith(SubscriptionDisposables);

但是给,

我在教程 Xamarin 中看到Forms为此使用了 ItemSource 属性.

I saw in tutorials Xamarin Forms has used ItemSource property for this.

任何人都可以为此提供解决方案.预先感谢.

Could anyone please give a solution for this .thanks in advance.

更新我不知道如何继续给出的答案.我想更多地解决这个问题.

UpdateI have no idea how to go ahead with the given answer. I want to figure this out more.

这是我的ViewModel类.

here is my ViewModel class.

using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using System.Diagnostics;
    using Android.App;
    using Android.Content;
    using Android.OS;
    using Android.Runtime;
    using Android.Views;
    using Android.Widget;
    using ReactiveUI;
    using System.Collections.ObjectModel;
    using System.Reactive.Linq;
    using Splat;
    using System.Reactive.Disposables;
    using System.Threading.Tasks;

    namespace DistributrIII.Mobile.Droid.ViewModels
    {
        public class StockTakeVM : ReactiveObject
        {
            protected Lazy<CompositeDisposable> ViewModelBindings = new Lazy<CompositeDisposable>(() => new CompositeDisposable());
            public void RegisterObservables()
            {
                StockItemListing = new ReactiveList<StockItemListingResult>();

                this.LoadStockItems = ReactiveCommand.CreateFromTask<FilterParams, List<StockItemListingResult>>(
                    async filter =>
                    {
                        System.Diagnostics.Debug.WriteLine("Load StockItemListing #1");
                        var r = await GetStockItemListing(filter);
                        return r;
                    },
                        Observable.Return(true))
                    .DisposeWith(ViewModelBindings.Value);

                this.LoadStockItems.ThrownExceptions
                    .Subscribe(ex =>
                    {
                        System.Diagnostics.Debug.WriteLine("Load StockItemListing Failed");
                    });

                this.LoadStockItems
                   .ObserveOn(RxApp.MainThreadScheduler)
                   .Subscribe(result =>
                   {

                       StockItemListing.Clear();
                       foreach (var item in result)
                           StockItemListing.Add(item);

                   });

            }

            async Task<List<StockItemListingResult>> GetStockItemListing(FilterParams filter)
            {
                List<StockItemListingResult> items = new List<StockItemListingResult>() {

                new StockItemListingResult
                {
                    StockItemName = "PORK SAUSAGES (ECONOMY) 500G",
                    StockItemCode = "CODE: J3103386",
                    StockItemAmt = "150"
                },

                new StockItemListingResult
                {
                    StockItemName = "COLLAR BACON  500G",
                    StockItemCode = "CODE: J3155667",
                    StockItemAmt = "152"
                },

                new StockItemListingResult
                {
                    StockItemName = "COLLAR BACON 1KG",
                    StockItemCode = "CODE: J2344545",
                    StockItemAmt = "200"
                },

                new StockItemListingResult
                {
                    StockItemName = "PORK CHIPPOLATAS 1KG",
                    StockItemCode = "CODE: J31038779",
                    StockItemAmt = "378"
                },

                new StockItemListingResult
                {
                    StockItemName = "PORK SAUSAGES (ECONOMY) 500G",
                    StockItemCode = "CODE: J3103386",
                    StockItemAmt = "23"
                },
                new StockItemListingResult
                {
                    StockItemName = "PORK SAUSAGES (ECONOMY) 500G",
                    StockItemCode = "CODE: J3103386",
                    StockItemAmt = "454"
                },

                new StockItemListingResult
                {
                    StockItemName = "COLLAR BACON  500G",
                    StockItemCode = "CODE: J3155667",
                    StockItemAmt = "123"
                },

                new StockItemListingResult
                {
                    StockItemName = "COLLAR BACON 1KG",
                    StockItemCode = "CODE: J2344545",
                    StockItemAmt = "675"
                },

                new StockItemListingResult
                {
                    StockItemName = "PORK CHIPPOLATAS 1KG",
                    StockItemCode = "CODE: J31038779",
                    StockItemAmt = "11"
                },

                new StockItemListingResult
                {
                    StockItemName = "PORK SAUSAGES (ECONOMY) 500G",
                    StockItemCode = "CODE: J3103386",
                    StockItemAmt = "34"
                }


            };
                return items;
            }


            // Observable Properties
            ReactiveList<StockItemListingResult> _stockItemListing;
            public ReactiveList<StockItemListingResult> StockItemListing
            {
                get { return _stockItemListing; }
                private set { this.RaiseAndSetIfChanged(ref _stockItemListing, value); }
            }

            ReactiveCommand<FilterParams, List<StockItemListingResult>> _loadStockItems;
            public ReactiveCommand<FilterParams, List<StockItemListingResult>> LoadStockItems
            {
                get { return _loadStockItems; }
                private set { this.RaiseAndSetIfChanged(ref _loadStockItems, value); }
            }
            public StockTakeVM()
            {
                RegisterObservables();
            }

        }

        public class StockItemListingResult : ReactiveObject
        {
            Guid _stockItemId;
            public Guid Id
            {
                get { return _stockItemId; }
                set { this.RaiseAndSetIfChanged(ref _stockItemId, value); }
            }

            string _stockItemName;
            public string StockItemName
            {
                get { return _stockItemName; }
                set { this.RaiseAndSetIfChanged(ref _stockItemName, value); }
            }

            string _stockItemCode;
            public string StockItemCode
            {
                get { return _stockItemCode; }
                set { this.RaiseAndSetIfChanged(ref _stockItemCode, value); }
            }
            string _stockItemAmt;
            public string StockItemAmt
            {
                get { return _stockItemAmt; }
                set { this.RaiseAndSetIfChanged(ref _stockItemAmt, value); }
            }

        }


    }

我的活动班级如下

   using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using ReactiveUI;
using Android.Support.V4.Widget;
using Android.Support.Design.Widget;
using DistributrIII.Mobile.Droid.ViewModels;
using DistributrIII.Mobile.Droid.Util;
using System.Reactive.Disposables;
using DistributrIII.Mobile.Droid.Models;
using Android.Support.V7.Widget;
using Android.Support.V7.App;
using Splat;
using Android.Support.V4.View;
using System.Reactive.Linq;

namespace DistributrIII.Mobile.Droid.Views.StockTake
{
    [Activity(Label = "StockTakeActivity", MainLauncher = true, Theme = "@style/MainTheme")]
    public class StockTakeActivity : DistributrBaseActivity<StockTakeVM>
    {
        private Android.Support.V7.Widget.SearchView _searchView;
        public ListView List { get; private set; }
        ReactiveList<StockItemListingResult> StockListItems;
        StockTakeScreenAdapter osadapter;
        List<StockItemModel> items = new List<StockItemModel>();

        public StockTakeActivity()
        {
            this.ViewModel = new StockTakeVM();
            this.StockListItems = new ReactiveList<StockItemListingResult>();
        }

        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            SetContentView(Resource.Layout.Activity_StockTake);


            this.Bind(ViewModel, x => x.StockItemListing, x => x.StockListItems);

            //checking whether change happens
            //        StockListItems.ItemChanged
            //        .Where(x => x.PropertyName == "StockItemAmt" && x.Sender.StockItemAmt)
            //        .Select(x => x.Sender)
            //        .Subscribe(x => {
            //            Console.WriteLine("Make sure to save {0}!", x.DocumentName);
            //});
            this.WhenAnyValue(view => view.ViewModel.StockItemListing)
            .Where(listing => listing != null)
            .Select(listing => new DistributrIII.Mobile.Droid.Util.ReactiveListAdapter<StockTakeVM>(listing, Resource.Layout.Activity_StockTake))
            .BindTo(this, view => view.List.Adapter);

            this.ViewModel.LoadStockItems.Execute(new FilterParams
            {
                NameFilter = "",

                Status = "All"
            }).Subscribe();

            //List = FindViewById<ListView>(Resource.Id.List);

            SetupReactiveLists(this);
            var toolbarST = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbarST);
            toolbarST.InflateMenu(Resource.Menu.StockTakeSearch);
            toolbarST.Title = "Stock Take";




        }
        public void SetupReactiveLists(Activity context)
        {
            List = FindViewById<ListView>(Resource.Id.List);

            foreach (var item in StockListItems)
            {
                StockItemModel stockitem = new StockItemModel
                {
                    StockItemName = item.StockItemName,
                    StockItemCode = item.StockItemCode
                };

                items.Add(stockitem);
            }
            osadapter = new StockTakeScreenAdapter(this, items);
            List.Adapter = osadapter;

            List.ItemClick += OnListItemClick;

        }




}

这是我的Listadapter类.

here is my Listadapter class.

public class StockTakeScreenAdapter : BaseAdapter<StockItemModel>
    {
        List<StockItemModel> items;
        Activity context;
        public StockTakeScreenAdapter(Activity context, List<StockItemModel> items) : base()
        {
            this.context = context;
            this.items = items;
        }
        public override long GetItemId(int position)
        {
            return position;
        }
        public override StockItemModel this[int position]
        {
            get { return items[position]; }
        }
        public override int Count
        {
            get { return items.Count; }
        }
        public override View GetView(int position, View convertView, ViewGroup parent)
        {
            var item = items[position];
            View view = convertView;
            if (view == null)
                view = context.LayoutInflater.Inflate(Resource.Layout.ViewCell_StockTake, null);
            view.FindViewById<TextView>(Resource.Id.stockitem_name).Text = item.StockItemName;
            view.FindViewById<TextView>(Resource.Id.stockitem_code).Text = item.StockItemCode;
            view.FindViewById<TextView>(Resource.Id.stockitem_amt).Text = item.StockItemAmt;
            return view;

} }

  1. 我是否要在Activity类中创建另一个反应性列表以进行绑定.
  2. 如果我更改了列表项的值,它是否会更新列表(我希望使用另一个片段类来更新列表项的值.)

我是使用RX进行Android开发的新手.如果我搞砸了,请原谅我.再次感谢.

I am new to android development with RX. Pardon me if I mess up the things. Thanks again.

推荐答案

您将使用适配器在Android上完成此操作,就像没有Reactive Extensions一样.

You would use an adapter to accomplish this on Android, just like you would without Reactive Extensions.

如果您想将ListView与RxUI一起使用,则可以使用ReactiveListAdapter.不幸的是,这还没有真正记录下来,因此您可能想看一下源代码: https://github.com/reactiveui/ReactiveUI/blob/develop/src/ReactiveUI/Platforms/android/ReactiveListAdapter.cs

In case you want to use a ListView with RxUI, you'd use a ReactiveListAdapter. Unfortunately this isn't really documented yet, so you might want to take a look at the source code: https://github.com/reactiveui/ReactiveUI/blob/develop/src/ReactiveUI/Platforms/android/ReactiveListAdapter.cs

要点是您使用提供数据的ReactiveList创建一个实例.然后,适配器会监视此列表中的更改,以了解何时需要更新.

The gist is you create an instance with the ReactiveList supplying the data. The adapter then watches for changes in this list to know when it needs to be updated.

示例:

this.WhenAnyValue (view => view.ViewModel.OutletListing)
    .Where (listing => listing != null)
    .Select (listing => new ReactiveListAdapter (listing, MyViewCreator))
    .BindTo (this, view => view.List.Adapter);

MyViewCreator是一个委托,该委托从您的列表和父ViewGroup接受初始ViewModel,因此您可以使用初始数据对行进行膨胀并返回结果View.

MyViewCreator is a delegate which accepts the initial ViewModel from your list and the parent ViewGroup so you can inflate the row with initial data and return the resulting View.

这篇关于如何使用具有反应性UI的Xamarin Android将数据绑定到自定义ListView的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

1403页,肝出来的..

09-06 18:15