I'm looking for a more reliable option in Xamarin

Question

I dont know how is it called. I need to create something that works this way: Do button, when you click button under button you have list and you can choos one option. List should be button's width.

You can find it in aplication to choose for example language of country.

Do Xamarin built-in something to create this? Or can someone show me how implement this?

Answer 1

Or you could roll your own in Forms, something like:

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);
            }
        }
    }
}

Using it 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 it code behind:

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));
                }
            }
        }
    }
}

Answer 2

Use a Spinner .. basically you need to first create an ArrayAdapter then attach the ArrayAdapter to a Spinner :

//we need a List of some type because the ArrayAdapter takes one as param
var items = new List<string>() {"one", "two", "three"};
//instantiate the ArrayAdapter with context, your Resource is a layout, items is the List
var adapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleSpinnerItem, items);
//then instantiate your spinner
var spinner = FindViewById<Spinner>(Resource.Id.spinner);
//and attach the adapter to the spinner like this
spinner.Adapter = adapter;

from @Aaron He

Create android spinner dynamically in Xamarin