MVVMCross 自定义控件和绑定 [英] MVVMCross Custom Control and Binding

问题描述

我创建了一个自定义控件 (CustomCard)，它是 CardView 控件的子类.我想在我的项目中的不同地方使用这个控件.

I have created a custom control (CustomCard) which is a subclass of the CardView control. I would like to use this control within my project in different places.

例如，我可以手动将 CustomCard 放置在 xml 布局中，或者我可能希望 CustomCard 成为 MvxListView 中的一个项目.关键是我想尽可能多地重用代码，并从对 CustomCard 类的控制中受益.

For example, I may place the CustomCard within an xml layout manually, or I may want the CustomCard to be an item in an MvxListView. The key is that I would like to re-use the code as much as possible and benefit from having control over the CustomCard class.

当 CustomCard 被实例化时，我使用标准布局充气器来充气它的布局，见代码:

When the CustomCard is instantiated, I am inflating it's layout using the standard layout inflater, see code:

using System;
using Android.Animation;
using Android.Content;
using Android.Support.V7.Widget;
using Android.Util;
using Android.Views;
using Android.Widget;
public class Card : CardView
{

    private readonly Context _context;

    public Card(Context context)
        : base(context)
    {
        _context = context;
        Init();
    }

    public Card(Context context, IAttributeSet attrs)
        : base(context, attrs)
    {
        _context = context;
        Init();
    }

    private void Init()
    {
        var inflater = (LayoutInflater) _context.GetSystemService(Context.LayoutInflaterService);
        CardView = inflater.Inflate(Resource.Layout.base_card, this);
    }
}

在布局 base_card.xml 中，我有一些想要使用 MVVMCross 绑定的元素，例如，

Within the layout base_card.xml, I have some elements that I would like to bind using MVVMCross, for example,

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white">
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:local="http://schemas.android.com/apk/res-auto"
  android:id="@+id/basecard_title"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
    <!-- Title Text-->
    <TextView
    android:id="@+id/tv_basecard_header_title"
    style="@style/card.title"
    android:text="title text"
    local:MvxBind="Text Title"
    />
    <!-- ImageView -->
    <MvxImageView
    android:id="@+id/ib_basecard_header_button_expand"
    style="@style/card.image"
    local:MvxBind="Bitmap ImageBytes,Converter=InMemoryImage"/>
  </RelativeLayout>
</FrameLayout>

我实际的 base_card 布局要复杂得多.

My actual base_card layout is much more complex.

如果我尝试在另一个 XML 布局中使用我的 CustomCard，则不会发生任何绑定.我认为这是因为我使用标准布局充气器在我的 CustomCard 中充气我的 base_card 而不是 BindingInflate() 但我不能确定.

If I try to use my CustomCard within another XML Layout, none of the binding takes place. I think this is because I am using the standard layout inflater to inflate my base_card within my CustomCard rather than BindingInflate() but I can't be sure.

我已经在 SO 上和通过论坛进行了搜索，但我找不到任何使用自定义控件的人的引用，该控件在使用 MVVMCross 绑定实例化时会扩展自己的视图.

I have searched on SO and through the forums but I can't find any references to anyone using a custom control that inflates it's own view when instantiated with MVVMCross binding.

有人做过吗，还是我在尝试做一些不可能的事情?

Has anyone done it, or am I trying to do something that isn't possible?

推荐答案

我在使用 CardView 控件时遇到了类似的问题.由于 CardView 直接继承自 FrameLayout，我决定使用与 MvxFrameControl 几乎相同的实现(感谢 Stuart 指出 MvxFrameControl 示例):

I ran into similar issue with CardView control. Since CardView directly inherits from FrameLayout I decided to use implementation almost identical to MvxFrameControl (Thanks Stuart for pointing out MvxFrameControl sample):

public class MvxCardView : CardView, IMvxBindingContextOwner
    {
        private object _cachedDataContext;
        private bool _isAttachedToWindow;
        private readonly int _templateId;
        private readonly IMvxAndroidBindingContext _bindingContext;

        public MvxCardView(Context context, IAttributeSet attrs)
            : this(MvxAttributeHelpers.ReadTemplateId(context, attrs), context, attrs)
        {
        }

        public MvxCardView(int templateId, Context context, IAttributeSet attrs)
            : base(context, attrs)
        {
            _templateId = templateId;

            if (!(context is IMvxLayoutInflater))
            {
                throw Mvx.Exception("The owning Context for a MvxCardView must implement LayoutInflater");
            }

            _bindingContext = new MvxAndroidBindingContext(context, (IMvxLayoutInflater)context);
            this.DelayBind(() =>
            {
                if (Content == null && _templateId != 0)
                {
                    Mvx.Trace("DataContext is {0}", DataContext == null ? "Null" : DataContext.ToString());
                    Content = _bindingContext.BindingInflate(_templateId, this);
                }
            });
        }


        protected MvxCardView(IntPtr javaReference, JniHandleOwnership transfer)
            : base(javaReference, transfer)
        {
        }

        protected IMvxAndroidBindingContext AndroidBindingContext
        {
            get { return _bindingContext; }
        }

        public IMvxBindingContext BindingContext
        {
            get { return _bindingContext; }
            set { throw new NotImplementedException("BindingContext is readonly in the list item"); }
        }

        protected View Content { get; set; }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                this.ClearAllBindings();
                _cachedDataContext = null;
            }

            base.Dispose(disposing);
        }

        protected override void OnAttachedToWindow()
        {
            base.OnAttachedToWindow();
            _isAttachedToWindow = true;
            if (_cachedDataContext != null
                && DataContext == null)
            {
                DataContext = _cachedDataContext;
            }
        }

        protected override void OnDetachedFromWindow()
        {
            _cachedDataContext = DataContext;
            DataContext = null;
            base.OnDetachedFromWindow();
            _isAttachedToWindow = false;
        }

        [MvxSetToNullAfterBinding]
        public object DataContext
        {
            get { return _bindingContext.DataContext; }
            set
            {
                if (_isAttachedToWindow)
                {
                    _bindingContext.DataContext = value;
                }
                else
                {
                    _cachedDataContext = value;
                    if (_bindingContext.DataContext != null)
                    {
                        _bindingContext.DataContext = null;
                    }
                }
            }
        }
    }

用法:

<YourNamespace.MvxCardView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    local:MvxTemplate="@layout/base_card"
    local:MvxBind="DataContext ." />

注意:使用自定义实现还解决了我使用 local:MvxBind="Click MyCommand" 将单击命令绑定到 CardView 控件的问题，这在继承 CardView 之前不起作用.

Note: Using custom implementation also solved my problem with binding click command to CardView control using local:MvxBind="Click MyCommand", which wasn't working until subclassing CardView.

这篇关于MVVMCross 自定义控件和绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！