如何在 Xamarin Forms MVVM Prism 的選擇器中隱藏單個元素？

Question

我正在使用 MVVM 棱鏡。 我想在我的選擇器中隱藏一個元素，但是。 我嘗試使用 IsVisible 屬性，但它不起作用。

這是我的 XAML

                               <Picker
                                    HorizontalOptions="End"
                                    WidthRequest="180"
                                    HeightRequest="40"
                                    IsVisible="{Binding IsDeductibleVisible, Mode=TwoWay}"
                                    ItemsSource="{Binding Deductibles}"
                                    ItemDisplayBinding="{Binding DisplayName}"
                                    FontSize="14"
                                    SelectedItem="{Binding SelectedDeductible}">
                              <Picker.Behaviors>
                                    <behavior:EventToCommandBehavior
                                       Command="{Binding Path=BindingContext.SelectDeductibleCommand, Source={x:Reference Name=CustomizePage}}"
                                       EventName="SelectedIndexChanged"/>
                                    </Picker.Behaviors>
                                </Picker>

這是我的觀點 MODEL。 第一條記錄是我要隱藏的記錄。 刪除不是一個選項，因為 DeductiblesEnum.Zero 正在計算中使用。

Deductibles = new List<Deductible>
        {
            new Deductible{ Id = (int)DeductiblesEnum.Zero, Amount = 0, DisplayName = "NIL", IsDeductibleVisible = false },
            new Deductible{ Id = (int)DeductiblesEnum.Thousand_100, Amount = 100000, DisplayName = "100,000 per insured" },
            new Deductible{ Id = (int)DeductiblesEnum.Thousand_150, Amount = 150000, DisplayName = "150,000 per insured" },
            new Deductible{ Id = (int)DeductiblesEnum.Thousand_200, Amount = 200000, DisplayName = "200,000 per insured" }
        };

Answer 1

您的場景是從 ViewModel 的列表中刪除一個項目，並且您正在使用 MVVM 設計模式。 Prism 是一個框架，不會對這段代碼產生任何影響。 IsVisible屬性不起作用的原因是因為它不是正確的屬性。 IsVisible是Picker的一個屬性，將確定Picker是否可見。

您需要做的是更改您的Picker.ItemSource以刪除您不想要的值。 有幾種方法可以解決這個問題，但我將向您展示我推薦的最 Xamarin 方法：

使用值轉換器

值轉換器是一個強大的工具，可以將 ViewModel 中的對象映射到 UI，而無需在 ViewModel 中編寫大量代碼。 畢竟，您的 ViewModel 應該不知道它所連接的任何視圖。 在這里閱讀它們。

您的 ViewModel 看起來像這樣，我已將您的列表轉換為ObservableCollection ，因為這是最佳實踐

// BaseViewModel comes from Refractored.MVVMHelpers
public class DeductiblesViewModel : BaseViewModel
{
    public ObservableCollection<Deductible> Deductibles { get; }

    public DeductiblesViewModel()
    {
        Title = "Deductibles";

        var deductibles = new List<Deductible>
        {
            new Deductible{ Id = (int)DeductiblesEnum.Zero, Amount = 0, DisplayName = "NIL", IsDeductibleVisible = false },
            new Deductible{ Id = (int)DeductiblesEnum.Thousand_100, Amount = 100000, DisplayName = "100,000 per insured", IsDeductibleVisible = true },
            new Deductible{ Id = (int)DeductiblesEnum.Thousand_150, Amount = 150000, DisplayName = "150,000 per insured", IsDeductibleVisible = true },
            new Deductible{ Id = (int)DeductiblesEnum.Thousand_200, Amount = 200000, DisplayName = "200,000 per insured", IsDeductibleVisible = true }
        };

        Deductibles = new ObservableCollection<Deductible>(deductibles);
    }
}

然后，您將創建一個新的ValueConverter ：

public class DeductibleVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value.GetType() != typeof(ObservableCollection<Deductible>))
        {
            throw new NotSupportedException($"Object must be of type: {typeof(ObservableCollection<Deductible>)}");
        }

        var deductibles = (ObservableCollection<Deductible>)value;

        return deductibles.Where(d => d.IsDeductibleVisible).ToList();
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException("We won't be using this method");
    }
}

並將其添加到您的 XAML 中：

<ContentPage
    ...
    /* Reference the xml namespace for your converter */
    xmlns:converters="clr-namespace:YourNamespace.Converters"
    ...>

    /* Add the converter as a resource to your page (or wherever you keep your resources) */
    <ContentPage.Resources>
        <ResourceDictionary>
            <converters:DeductibleVisibilityConverter x:Key="deductibleVisibilityConverter"/>
        </ResourceDictionary>
    </ContentPage.Resources>

    <ContentPage.Content>
        <StackLayout Padding="20">
            <Label Text="Select your deductibles"/>

            /* Add the converter to your item source */
            <Picker ItemsSource="{Binding Deductibles, Converter={StaticResource deductibleVisibilityConverter}}"
                    ItemDisplayBinding="{Binding DisplayName}"/>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

現在您可以隱藏任何您不想在 UI 上顯示的免賠額，但保留它們以供您計算！