c# - 我正在 Xamarin 中寻找更可靠的选择

Question

我不知道它是怎么称呼的。我需要创建以这种方式工作的东西：执行按钮，当您单击按钮下的按钮时，您有列表，您可以选择一个选项。列表应该是按钮的宽度。

您可以在应用程序中找到它来选择例如国家/地区的语言。

Xamarin 是否内置了一些东西来创建它？或者有人可以告诉我如何实现这个吗？

标签： c#xamarin

Answer 1

或者您可以在 Forms 中创建自己的内容，例如：

ImagePickerDropDown.xaml：

<?xml version="1.0" encoding="UTF-8"?>
<ContentView
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="ImagePickerDropdownSample.ImagePickerDropdown"
    x:Name="imagePickerDropDown" >
    <ContentView.Content>
        <StackLayout>
            <ImageButton x:Name="mainButton"
                Source="{Binding Source={x:Reference imagePickerDropDown}, Path=SelectedImage}"
                Clicked="ImageClicked" />
            <StackLayout x:Name="stackView"
                BindableLayout.ItemsSource="{Binding Source={x:Reference imagePickerDropDown}, Path=Images}"
                IsVisible="False">
                <BindableLayout.ItemTemplate>
                    <DataTemplate>
                        <StackLayout>
                            <ImageButton Source="{Binding .}" Clicked="ImageSelected"/>
                        </StackLayout>
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </StackLayout>
        </StackLayout>
    </ContentView.Content>
</ContentView>

ImagePickerDropDown.xaml.cs：

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using Xamarin.Forms;

namespace ImagePickerDropdownSample
{
    public partial class ImagePickerDropdown : ContentView
    {
        public ImagePickerDropdown()
        {
            InitializeComponent();
        }

        private void ImageSelected(object sender, EventArgs e)
        {
            var imageSource = (sender as ImageButton).Source;
            SelectedImage = imageSource;
            mainButton.IsEnabled = true;
            stackView.IsVisible = false;
        }

        private void ImageClicked(object sender, EventArgs e)
        {
            mainButton.IsEnabled = false;
            stackView.IsVisible = true;
        }

        public static readonly BindableProperty SelectedImageProperty =
  BindableProperty.Create(nameof(SelectedImage), typeof(ImageSource), typeof(ImagePickerDropdown), null);

        public ImageSource SelectedImage
        {
            get
            {
                return (ImageSource)GetValue(SelectedImageProperty);
            }
            set
            {
                SetValue(SelectedImageProperty, value);
            }
        }

        public static readonly BindableProperty ImagesProperty =
  BindableProperty.Create(nameof(Images), typeof(ObservableCollection<ImageSource>), typeof(ImagePickerDropdown), null);

        public ObservableCollection<ImageSource> Images
        {
            get
            {
                return (ObservableCollection<ImageSource>)GetValue(ImagesProperty);
            }
            set
            {
                SetValue(ImagesProperty, value);
            }
        }
    }
}

使用它 XAML：

<?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:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="ImagePickerDropdownSample.MainPage"
             xmlns:local="clr-namespace:ImagePickerDropdownSample"
             Padding="0,50,0,0"
             BackgroundColor="Black">
        <StackLayout
            x:Name="mainLayout">
            <Label Text="Welcome to Xamarin.Forms!"
                   HorizontalOptions="Center"
                   VerticalOptions="Start"
                   TextColor="White"/>
            <local:ImagePickerDropdown SelectedImage="{Binding SelectedImage}"
                                       Images="{Binding Images}"
                                       WidthRequest="50"
                                       HorizontalOptions="Center"
                                       BackgroundColor="Black"/>

        </StackLayout>
</ContentPage>

在后面使用它的代码：

using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace ImagePickerDropdownSample
{
    // Learn more about making custom code visible in the Xamarin.Forms previewer
    // by visiting https://aka.ms/xamarinforms-previewer
    [DesignTimeVisible(false)]
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            Images = new ObservableCollection<ImageSource>();
            Images.Add(new FileImageSource() { File = "image1.png" });
            Images.Add(new FileImageSource() { File = "image2.png" });
            Images.Add(new FileImageSource() { File = "image3.png" });
            SelectedImage = Images[0];
            BindingContext = this;
        }

        ImageSource _selectedImage;
        public ImageSource SelectedImage
        {
            get
            {
                return _selectedImage;
            }
            set
            {
                if (_selectedImage != value)
                {
                    _selectedImage = value;
                    OnPropertyChanged(nameof(SelectedImage));
                }
            }
        }

        ObservableCollection<ImageSource> _images;
        public ObservableCollection<ImageSource> Images
        {
            get
            {
                return _images;
            }
            set
            {
                if (_images != value)
                {
                    _images = value;
                    OnPropertyChanged(nameof(Images));
                }
            }
        }
    }
}