自定义选择器Xamarin

Question

我正在尝试搜索如何在Xamarin上创建自定义选择器，但我不知道该怎么做。

这是我想做的

我什至不知道我是否需要安装nuget软件包。请帮忙，谢谢。

Answer 1

如 @skalpel02所述，您需要在每个平台中在 picker class class class renderer s。在那里，您有能力与平台的本机API进行互动。

Answer 2

这可以通过。

首先，可以通过子类别来创建自定义选择器控件，如以下代码所示：

    public class BorderlessPicker : Picker
    {
        public BorderlessPicker() : base()
        {
        }
    }

second ：在每个平台上创建自定义渲染器，覆盖 onelementChanged 方法并编写逻辑以自定义控件，然后将 exportrenderer 属性添加到自定义渲染器类中，以指定将使用它。

在Android中：

[assembly: ExportRenderer(typeof(BorderlessPicker), typeof(BordlessPickerRenderer))]
 namespace AppPicker01.Droid
{
public class BordlessPickerRenderer : PickerRenderer
{
    public BordlessPickerRenderer(Context context) : base(context)
    {
    }
    protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
    {
        base.OnElementChanged(e);

        if (e.OldElement == null)
        {
            Control.Background = null;
        }
    }
}

}

在iOS中：

[assembly: ExportRenderer(typeof(BorderlessPicker), typeof(BorderlessPickerRenderer))]
namespace AppPicker01.iOS
   {
         public class BorderlessPickerRenderer : PickerRenderer
        {
            protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
        {
            base.OnElementChanged(e);

            if (Control == null)
            {
                return;
            }

            Control.Layer.BorderWidth = 0;
            Control.BorderStyle = UITextBorderStyle.None;
        }
    }
}

最后但并非最不重要的一点是，在XAML中使用自定义选择器控制：

  <apppicker01:BorderlessPicker Title="Select a color" ItemsSource="{Binding ColorNames}" SelectedItem="{Binding SelectedColorName, Mode=TwoWay}" />

屏幕截图：

女士官方文档链接：

Answer 3

您可以轻松地创建不需要渲染器并在iOS，Android和UWP上使用的控件。这是我的解决方案。
和一个视图“ pickerCustomList”为“ pickerCustom”创建一个视图

<?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="___YOURCLASS"
             xmlns:xmleditor="clr-namespace:XmlEditor" HorizontalOptions="FillAndExpand" BackgroundColor="#ddd">
    <StackLayout x:Name="stack" Orientation="Horizontal" HorizontalOptions="FillAndExpand" Margin="1" BackgroundColor="#fff" Padding="5">
        <Label Text="{Binding TextValue}" Margin="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
        <ImageButton BackgroundColor="#ffffff" Source="dropdown.png" x:Name="img" WidthRequest="20"></ImageButton>
        <Entry WidthRequest="0"></Entry>
    </StackLayout>
</ContentView>

您必须使用此代码在后面的该代码

public partial class PickerCustom : ContentView
    {
        public PickerCustom()
        {
            InitializeComponent();
            Items = new ObservableCollection<CustomItem>();
            SelectedIndex = -1;
            BindingContext = this;

            TapGestureRecognizer tap0 = new TapGestureRecognizer();
            tap0.Tapped +=  (sender, e) =>
            {
                img.Focus();

                PickerCustomList pcl = new PickerCustomList();
                pcl.Items = this.Items;
                App.Current.MainPage.Navigation.PushModalAsync(pcl);
                MessagingCenter.Subscribe<PickerCustomList>(this, "finish", (sender1) =>
                {
                    MessagingCenter.Unsubscribe<PickerCustomList>(this, "finish");
                    img.Focus();
                    if(((PickerCustomList)sender1).SelectedIndex != -1)
                    {
                        SelectedIndex = ((PickerCustomList)sender1).SelectedIndex;
                    }
                });
            };
            GestureManager.AddGesture(stack, tap0);
        }

        string _textvalue = "";
        public string TextValue
        {
            get
            {
                return _textvalue;
            }
            set
            {
                _textvalue = value;
                OnPropertyChanged();
            }
        }

        public ObservableCollection<CustomItem> Items { get; set; }

        int _selectedIndex = 0;
        public int SelectedIndex
        {
            get
            {
                return _selectedIndex;
            }
            set
            {
                _selectedIndex = value;
                if(_selectedIndex>= Items.Count)
                {
                    _selectedIndex = -1;
                } else if (_selectedIndex != -1)
                {
                    TextValue = Items[SelectedIndex].Name;
                }
                else
                {
                    TextValue = "";
                }
                OnPropertyChanged();
            }
        }  
    }

    public class CustomItem
    {
        public CustomItem(string _name)
        {
            name = _name;
        }

        private string name;

        public string Name
        {
            get { return name; }
            set { name = value; }
        }
    }

为选择的视图“ pickerCustomList”

    <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="___YOURCLASS" BackgroundColor="#66aaaaaa"
             x:Name="ContentPage1" Padding="30,100,30,100" >
    <ListView x:Name="ContactsList" ItemsSource="{Binding Items}" IsVisible="True"
                VerticalOptions="Start" HorizontalOptions="Center"
                BackgroundColor="Transparent" HasUnevenRows="True">
        <ListView.Header  HorizontalOptions="FillAndExpand">
            <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" BackgroundColor="#f0f0f0" >
                <ImageButton Source="close.png" WidthRequest="20"  Clicked="Button_Clicked" Margin="10,5,10,5" BackgroundColor="Transparent"></ImageButton>
            </StackLayout>
        </ListView.Header>
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell Tapped="ViewCell_Tapped" >
                    <StackLayout BackgroundColor="#ffffff">
                        <Label Text="{Binding Name}" Padding="10"></Label>
                        <ContentView HeightRequest="1" BackgroundColor="#666"></ContentView>
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>

“ pickerCustom”，并在

public partial class PickerCustomList : ContentPage
    {
        public int SelectedIndex = -1;
        ObservableCollection<CustomItem> myItems= new ObservableCollection<CustomItem>();
        public ObservableCollection<CustomItem> Items
        {
            get { return myItems; }
            set { 
                myItems = value;
                OnPropertyChanged();
            }
        }

        public PickerCustomList()
        {
            InitializeComponent();
            BindingContext = this;
        }

        private void Button_Clicked(object sender, EventArgs e)
        {
            SelectedIndex = -1;
            App.Current.MainPage.Navigation.PopModalAsync();
            MessagingCenter.Send<PickerCustomList>(this, "finish");
        }

        private void ViewCell_Tapped(object sender, EventArgs e)
        {
            SelectedIndex = Items.IndexOf(((CustomItem)((ViewCell)sender).BindingContext));
            App.Current.MainPage.Navigation.PopModalAsync();
            MessagingCenter.Send<PickerCustomList>(this, "finish");
        }
    }

创建“ pickerCustomList” 。 “ nofollow noreferrer”>