android - MVVMCross 绑定(bind) - 如何更改对象的可见性

Question

我需要学习如何绑定(bind)和更改元素的属性。

我应该通过点击按钮改变元素的可见性

我有包含不同元素的 Hello.axml。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="match_parent">
<TextView
    android:textSize="16sp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    local:MvxBind="Text Strings[VerificationPhoneText]" />
<TextView
    android:textSize="16sp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    local:MvxBind="Text Variable01" />
<Button
    android:id="@+id/enterButton"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    local:MvxBind="Text Strings[EnterButton]; Click ClickCommand" />
<GestureOverlayView
    android:layout_height="284dp"
    android:layout_width="280dp"
    android:background="#FAFAFA"
    android:layout_marginLeft="40dp"
    android:layout_marginRight="40dp"
    android:layout_marginTop="114dp"
    local:MvxBind="Visibility Visibility(MyProperty)">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Hello World" />
    <ImageView
        android:src="@mipmap/ic_check_circle_black_48dp"
        android:layout_marginLeft="95dp"
        android:layout_marginRight="95dp"
        android:layout_marginTop="103dp" />
</GestureOverlayView>

我已经安装了可见性插件:

PM> Install-Package MvvmCross.Plugin.Visibility -Version 5.6.3

并编辑了我的 HelloViewModel.cs:

     using MvvmCross.Core.ViewModels;
     using System.Windows.Input;

namespace My.Project.Core.ViewModels
{
    public class HelloViewModel : BaseViewModel
    {
        private bool _myProperty;

        public bool MyProperty
        {
        get
        {
           return _myProperty;
        }
        set
        {
           _myProperty = value;
           RaisePropertyChanged();
      }
  }

        public ICommand ClickCommand => new MvxCommand(() =>
        {
            MyProperty = !MyProperty;
        });
    }
}

但我仍然有一个问题 - 所有元素在开始时都是可见的，但按钮不起作用。

更新。 我的 HelloView.cs:

using Android.App;

    namespace My.Project.Droid.Views
{
    [Activity]
    public class HelloView:BaseView
    {
        protected override int LayoutResource => Resource.Layout.HelloView;

        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
        }
    }
}

请帮我学习一下!

Answer 1

正如@c.lamont.dev 所说，Visibility 是作为 MvvmCross 的插件(另一个包)进行管理的:MvvmCross.Plugin.Visibility您必须将其添加到 PCL 以及您要使用它的每个平台中。

即使 @miechooy 有效，也可以通过直接使用 Visbiility converters 在评论中作为 @c.lamont.dev 首先改进它由插件提供，即 MvxVisibilityValueConverter和 MvxInvertedVisibilityValueConverter ;它们允许我们使用该转换器直接绑定(bind)到 ViewModel 属性，并在内部将 ViewModel 属性的值转换为正确的值 Visibility在我们的平台View ，例如在 Android 中，它将 ViewModel 的属性值转换为 ViewStates .

它还会从属性的任何类型到可见性进行预转换:所以假设您有一个像 Client 这样的对象而不是 bool，那么如果您直接将该转换器绑定(bind)到该属性，它将返回 Visible如果客户不是 null和 Collapsed否则(它也适用于 iOS，为 false 属性返回 true 或 Hidden)。

绑定(bind)示例:

<android.support.v7.widget.CardView
        android:layout_margin="5dp"
        style="@style/Widget.CardContent"
        local:MvxBind="Visibility Visibility(MyProperty)"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    ...
</android.support.v7.widget.CardView>

要通过单击按钮更改您的可见性，您必须更改您的属性(如@miechooy 所述)并执行一些命令:

private bool _myProperty;
public bool MyProperty
{
    get
    {
       return _myProperty;
    }
    set
    {
       _myProperty = value;
       RaisePropertyChanged();
    }
}

public ICommand ClickToToggleMyPropertyVisibilityCommand => new MvxCommand(() =>
{
    MyProperty = !MyProperty;
});

---

现在，假设你想拥有自己的转换器，因为你有更复杂的逻辑，那么你可以继承自 MvxBaseVisibilityValueConverter<T>您可以在哪里返回 MvxVisibility这是 MvvmCross 的对象用作平台如何管理可见性的抽象，因此它可以直接从 PCL 管理可见性，从而在平台之间共享更多代码。

让我们跳到一个例子:有一个 ViewModel用MyClient类型属性 Client :

public class Client
{
     public string Name { get; set;}
     public bool IsActive { get; set; }
}

public class MyVM : MvxViewModel
{
    ...
    private Client _myClient;
    public Client MyClient
    {
       get
       {
           return _myClient;
       }
       set
       {
           _myClient = value;
           RaisePropertyChanged(() => MyClient);
       }
    }

    ...
}

您希望仅在客户端处于 Activity 状态且其名称不是“Admin”时在您的 View 中显示，因此您需要一个自定义可见性转换器:

public class MyOwnVisibilityConverter : MvxBaseVisibilityValueConverter<Client>
{
    protected override MvxVisibility Convert(Client value, object parameter, CultureInfo culture)
    {
        return value.IsActive && value.Name != "Admin" ? MvxVisibility.Visible : MvxVisibility.Collapsed;
    }
}

终于在您的 View 中:

<android.support.v7.widget.CardView
        android:layout_margin="5dp"
        style="@style/Widget.CardContent"
        local:MvxBind="Visibility MyOwnVisibility(MyClient)"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

高