时间戳

首页 > 解决方案 > 在 Xamarin 表单中使用 MVVM 切换图像可见性

c# - 在 Xamarin 表单中使用 MVVM 切换图像可见性

问题描述

我在 Xamarin 表单中使用 MVVM 有 2 个图像可见性。1 个图像表示未选择任何内容，另一个应在表单上进行选择时关闭第一个图像并打开第二个图像。

XAML：

<Image x:Name="greenCheckImage" BackgroundColor="#F5E9E9" Source="GreenCheckmark.gif" Grid.Row="4" Grid.Column="2" HeightRequest="50" WidthRequest="50" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand" IsVisible="{Binding GreenCheck}"></Image>
<Image x:Name="grayCheckImage" BackgroundColor="#F5E9E9" Source="GrayCheckmark.gif" Grid.Row="4" Grid.Column="2" HeightRequest="50" WidthRequest="50" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand" IsVisible="{Binding GrayCheck}"></Image>

模型：

public bool GrayCheck { get; set; }
public bool GreenCheck { get; set; }

查看型号：

    private bool grayCheck;
    
    public bool GrayCheck
    {
      get
      {
         return grayCheck;
      }
    
      set
      {
         if (grayCheck != value)
         {
            grayCheck = value;
            OnPropertyChanged();
         }
      }
    }

private bool greenCheck;

public bool GreenCheck
{
  get
  {
     return greenCheck;
  }

  set
  {
     if (greenCheck!= value)
     {
        greenCheck= value;
        OnPropertyChanged();
     }
  }
}

这是我的 INotifyPropertyChanged 实现，它应该处理页面更新吗？

public class BaseViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    public void OnPropertyChanged([CallerMemberName] string name = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    }
}

页面加载时一切都设置正确，单击选择也正确触发，并且 IsVisible 上的真/假也设置正确；但是，未选择的图像仍然保留在 graycheck 上，而不是应该显示的是 greencheck，graycheck 应该不再可见。

我在这里想念什么？蒂亚！瑞克...

标签： c#xamarin.formsmvvm

解决方案

如果绑定工作正常，请不要使用/维护两个布尔变量灰色和绿色。如果一次只能看到一个。

按原样使用 greenCheckImage Xaml 并Data Trigger用于 grayCheckImage

<Image x:Name="grayCheckImage" BackgroundColor="#F5E9E9" Source="GrayCheckmark.gif" Grid.Row="4" Grid.Column="2" HeightRequest="50" WidthRequest="50" HorizontalOptions="StartAndExpand" VerticalOptions="CenterAndExpand">
    <DataTrigger TargetType="Image" Binding="{Binding GreenCheck}" Value="False">
        <Setter Property="IsVisible" Value="True"/>
    </DataTrigger>
    <DataTrigger TargetType="Image" Binding="{Binding GreenCheck}" Value="True">
        <Setter Property="IsVisible" Value="False"/>
    </DataTrigger>
</Image>

你也可以converter在多个地方写一个 if 。

推荐阅读