c# - 需要从 Xamarin 中的选取器中选择至少一项

Question

在我的应用程序中，有一个选择器和按钮。我想要两件事。

1. 需要从选择器中选择至少一项，否则将无法点击按钮。例如就像 HTML 中的必需属性

2. 如果值为 Provider 1，则导航至此页面，否则如果值为 Provider 2，则导航至此页面。

View 中选择器和按钮的代码

<Picker x:Name="picker_provider" 
        Title="Select a Provider">
        <Picker.ItemsSource>
            <x:Array Type="{x:Type x:String}">
                <x:String>Provider 1</x:String>
                <x:String>Provider 2</x:String>
            </x:Array>
        </Picker.ItemsSource>
</Picker>

<Button
    Text="Next"
    Command="{Binding NextPageCommand}"/>

ViewModel.cs 中的按钮绑定(bind)代码

public async Task NextPage(RegisterViewModel nextpage) => await NavigationService.NavigateToAsync(nextpage, null, NavigationType.Modal);

#region Bindable Command
public ICommand NextPageCommand => new Command<RegisterViewModel>(async (nextpage) =>
    {
        await NextPage(nextpage);
    });
#endregion

Answer 1

您可以在按钮中使用多数据触发器来根据选择器选择属性的状态启用或禁用它。

因为你绑定(bind)的是字符串，所以你需要添加一个转换器来测试它们是null还是空，例如:

namespace Osma.Mobile.App.Converters
{
    public class StringNullOrEmptyValueBoolConverter: IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            if (value is string str && !string.IsNullOrEmpty(str))
            {
                // String is not null or empty
                return false;
            }
            
            // String is null or empty
            return true;
        }
    
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

将所需的属性添加到您的 ViewModel:

public class ProviderViewModel : ABaseViewModel
{
    public ProviderViewModel(
        IUserDialogs userDialogs,
        INavigationService navigationService
        ) : base(
            nameof(ProviderViewModel),
            userDialogs,
            navigationService)
    {
    }

    public override async Task InitializeAsync(object navigationData)
    {
        await base.InitializeAsync(navigationData);
    }

   private string _selectedProvider;
   public string SelectedProvider {
       get { return _selectedProvider; }
       set 
       { 
            this.RaiseAndSetIfChanged(ref _selectedProvider, value) }
       }
  }

   private string _selectedCountry;
   public string SelectedCountry {
       get { return _selectedCountry; }
       set 
       { 
           this.RaiseAndSetIfChanged(ref _selectedCountry, value) }
       }
  }

    public async Task RegistrationPage(RegisterViewModel registration) => await NavigationService.NavigateToAsync(registration, null, NavigationType.Modal);

    public ICommand RegistrationPageCommand => new Command<RegisterViewModel>(async (registration) =>
    {
        await RegistrationPage(registration);
    }, (x) => false);
}

将转换器命名空间和资源添加到您的页面并实现多触发器和绑定(bind):

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:converters="clr-namespace:Osma.Mobile.App.Converters"
             x:Class="Osma.Mobile.App.Views.ProviderPage"
             NavigationPage.HasNavigationBar="False"
             BackgroundColor="#004B86">

   <ContentPage.Resources>
    <ResourceDictionary>
        <converters:StringNullOrEmptyValueBoolConverter x:Key="stringNullOrEmptyValueBoolConverter" />
    </ResourceDictionary>
   </ContentPage.Resources>


    <ContentPage.Content>
        <StackLayout
            Spacing="30">

            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="70" />
                    <RowDefinition Height="70" />
                </Grid.RowDefinitions>
                
                <Grid Grid.Row="0">
                    <Picker 
                        x:Name="picker_country" 
                        Title="Select a Country" 
                        TextColor="Silver" 
                        TitleColor="Silver" 
                        HorizontalOptions="Start" 
                        WidthRequest = "200" 
                        VerticalOptions="Start" 
                        Margin="130,0,0,0"
                        SelectedItem="{Binding SelectedCountry}">
                        <Picker.ItemsSource>
                            <x:Array Type="{x:Type x:String}">
                                <x:String>Sweden</x:String>
                            </x:Array>
                        </Picker.ItemsSource>
                    </Picker>
                </Grid>

                <Grid Grid.Row="1">
                    <Picker 
                        x:Name="picker_provider" 
                        Title="Select a Provider" 
                        TextColor="Silver" 
                        TitleColor="Silver" 
                        HorizontalOptions="Start" 
                        WidthRequest = "200" 
                        VerticalOptions="Start" 
                        Margin="130,0,0,0"
                        SelectedItem="{Binding SelectedProvider}">
                        <Picker.ItemsSource>
                            <x:Array Type="{x:Type x:String}">
                                <x:String>Provider 1</x:String>
                            </x:Array>
                        </Picker.ItemsSource>
                    </Picker>
                </Grid>
            </Grid>

        <Button 
            BackgroundColor="#2194EF"
            TextColor="White" 
            Text="Next" 
            HeightRequest="60"
            MinimumHeightRequest="60"
            IsEnabled="False"
            Command="{Binding RegistrationPageCommand}">
            <Button.Triggers>
                <MultiTrigger TargetType="Button">
                    <MultiTrigger.Conditions>
                        <BindingCondition Binding="{Binding SelectedCountry,
                                                       Converter={StaticResource stringNullOrEmptyValueBoolConverter }}" Value="false" />
                        <BindingCondition Binding="{Binding SelectedProvider,
                                                       Converter={StaticResource stringNullOrEmptyValueBoolConverter }}" Value="false" />
                    </MultiTrigger.Conditions>
        
                    <Setter Property="IsEnabled" Value="True" />
                </MultiTrigger>
            </Button.Triggers>
        </Button>

        </StackLayout>
    </ContentPage.Content>
</ContentPage>

正如您在代码中看到的，多重触发条件是两个属性都不为 null 或为空，在这种情况下按钮将被启用。