MVVMCross binding - 如何更改对象的可见性

时间:2018-01-21 19:18:50

标签: android binding xamarin.android mvvmcross

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

我应该通过点击按钮

来更改元素的可见性

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>

我已经安装了Visibility Plugin:

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;
        });
    }
}

但我仍有问题 - 所有元素在开头都是可见的,按钮不起作用。

UPD。 我的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);
        }
    }
}

请帮助我学习它!

2 个答案:

答案 0 :(得分:2)

正如@ c.lamont.dev所说,可见性是作为MvvmCross的插件(另一个包)进行管理的,你必须在PCL和你想要使用它的每个平台中添加它。{/ p >

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

它还可以从属性的任何类型进行预转换到可见性:所以让我们说一个bool而不是一个像Client这样的对象,然后如果你直接将该转换器绑定到该属性,它将返回{ {1}}如果客户端不是ViewStatesVisible则是其他情况(它适用于iOS,nullCollapsed属于false属性。< / p>

绑定示例:

true

要通过点击按钮更改您的可见性,您必须更改您的属性(如@miechooy所述)并命令:

Hidden

现在,让我们假设您拥有自己的转换器,因为您有一个更复杂的逻辑,然后您可以从<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> 继承,您可以在其中返回private bool _myProperty; public bool MyProperty { get { return _myProperty; } set { _myProperty = value; RaisePropertyChanged(); } } public ICommand ClickToToggleMyPropertyVisibilityCommand => new MvxCommand(() => { MyProperty = !MyProperty; }); 这是对象MvxBaseVisibilityValueConverter<T>用来作为平台管理可见性的抽象,因此可以直接从PCL管理它,在平台之间共享更多代码。

让我们跳一个例子:MvxVisibility MvvmCross ViewModel属性类型MyClient

Client

您希望在您的视图中仅显示客户端是否处于活动状态且其名称不是&#34;管理员&#34;所以你需要一个自定义可见性转换器:

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);
       }
    }

    ...
}

最后在你的视图中:

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;
    }
}

HIH

答案 1 :(得分:0)

如评论中所述。 MvvmCross已经创建了Visibility绑定。有一个例子:

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

只需在您查看模型中声明属性

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

最后疯狂的BooleanToVisiblityConverter:

 public class BooleanToVisibiltyValueConverter : MvxValueConverter<bool, ViewStates>
    {
        protected override ViewStates Convert(bool value, Type targetType, object parameter, CultureInfo culture)
        {
            return value ? ViewStates.Visible : ViewStates.Gone;
        }
    }