时间戳

首页 > 解决方案 > 在 mvvm 中选择/未选择项目时如何隐藏/显示标签？

c# - 在 mvvm 中选择/未选择项目时如何隐藏/显示标签？

问题描述

我在同一个空间中有三个标签绑定到来自不同页面的选择器。

我想做的是，当Picker 1具有选定的项目时，请确保可见标签1 ，并在Picker 2和3中没有选定的项目时隐藏标签2和3。

任何帮助将不胜感激。

第一页

 <Picker SelectedItem="{Binding PICKER1}"  WidthRequest="120" FontSize="10" TextColor="Black" VerticalOptions="Center" BackgroundColor="WhiteSmoke">
      <Picker.Items>
           <x:String>15 cm</x:String>
           <x:String>30 cm</x:String>
           <x:String>45 cm</x:String>
      </Picker.Items>
 </Picker>

第2页

 <Picker SelectedItem="{Binding PICKER2}"  WidthRequest="120" FontSize="10" TextColor="Black" VerticalOptions="Center" BackgroundColor="WhiteSmoke">
      <Picker.Items>
           <x:String>hello</x:String>
           <x:String>hi</x:String>
           <x:String>ciao</x:String>
       </Picker.Items>
 </Picker>

第 3 页

 <Picker SelectedItem="{Binding PICKER3}"  WidthRequest="120" FontSize="10" TextColor="Black" VerticalOptions="Center" BackgroundColor="WhiteSmoke">
       <Picker.Items>
           <x:String>when</x:String>
           <x:String>how</x:String>
      </Picker.Items>
 </Picker>

第 4 页

 <Label x:Name="lab11" Text="{Binding DisplayPICKER1}"  Margin="10" Grid.Column="1" Grid.Row="0" FontSize="10" HorizontalOptions="StartAndExpand"  VerticalOptions="CenterAndExpand"></Label>
 <Label x:Name="lab2" Text="{Binding DisplayPICKER2}"  Margin="10" Grid.Column="1" Grid.Row="0" FontSize="10" HorizontalOptions="StartAndExpand"  VerticalOptions="CenterAndExpand"></Label>
 <Label x:Name="lab3" Text="{Binding DisplayPICKER3}"  Margin="10" Grid.Column="1" Grid.Row="0" FontSize="10" HorizontalOptions="StartAndExpand"  VerticalOptions="CenterAndExpand"></Label>

主视图模型

 string picker1 = string.Empty;
 public string PICKER1
 {
      get => picker1;
      set
      {
           if (picker1 == value)
                return;
           else
           {
               picker1 = value;
               OnPropertyChanged(nameof(PICKER1));
               OnPropertyChanged(nameof(DisplayPICKER1));
           }
      }
 }
 public string DisplayPICKER1 => $"distance: {PICKER1}";


 string picker2 = string.Empty;
 public string PICKER2
 {
      get => picker2;
      set
      {
           if (picker2 == value)
                return;
           else
           {
                picker2 = value;
                OnPropertyChanged(nameof(PICKER2));
                OnPropertyChanged(nameof(DisplayPICKER2));
           }
      }
 }
 public string DisplayPICKER2 => $"Greet: {PICKER2}";


 string picker3 = string.Empty;
 public string PICKER3
 {
      get => picker3;
      set
      {
           if (picker3 == value)
                return;
           else
           {
                picker3 = value;
                OnPropertyChanged(nameof(PICKER3));
                OnPropertyChanged(nameof(DisplayPICKER3));
           }
      }
 }
 public string DisplayPICKER3 => $"{PICKER3}";

标签： c#mvvmxamarin.formsuwp

解决方案

假设属性Picker1、Picker2和Picker3已按预期选择和取消选择；例如，如果同时选择和，Label1下面将不可见：Picker1Picker2

使用Label IsVisible属性，定义 aIMultiValueConverter并将其与 一起使用MultiBinding：

<ContentPage 
  ...
  xmlns:converters="clr-namespace:Converters">

<ContentPage.Resources>
  <converters:AllTrueMultiConverter x:Key="AllTrueMultiConverter"/>
  <converters:IsSelectedConverter x:Key="IsSelectedConverter"/>
  <converters:NotSelectedConverter x:Key="NotSelectedConverter"/>
</ContentPage.Resources>

<ContentPage.Content>
  ...
  <Label Text="Label1 MultiBinding">
    <Label.IsVisible>
      <MultiBinding Converter="{StaticResource AllTrueMultiConverter}">
        <Binding Path="Picker1" Converter="{StaticResource IsSelectedConverter}" />
        <Binding Path="Picker2" Converter="{StaticResource NotSelectedConverter}" />
        <Binding Path="Picker3" Converter="{StaticResource NotSelectedConverter}" />
      </MultiBinding>
    </Label.IsVisible>
  </Label>

请AllTrueMultiConverter参阅定义 IMultiValueConverter

样品IsSelectedConverter和NotSelectedConverter：

namespace Converters
{
  public class IsSelectedConverter : IValueConverter
  {
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (value != null);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return null;
    }
  }
  ...
  public class NotSelectedConverter : IValueConverter
  {
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (value == null);
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return null;
    }
  }
}

IfLabel1应该是可见的，仅取决于Picker1aBinding可能被使用：

<Label Text="Label1 Binding" IsVisible="{Binding Picker1, Converter={StaticResource IsSelectedConverter}}"/>

推荐阅读