自定义选择器Xamarin

bvjveswy  于 2022-12-16  发布在  其他
关注(0)|答案(3)|浏览(196)

我试图搜索如何创建一个自定义的Xamarin选择器,但我不知道如何做到这一点。
这是我想做的

我甚至不知道我是否需要安装一个nuget软件包。请帮助和感谢。

mnemlml8

mnemlml81#

正如@Skalpel02所提到的,您需要对Picker类进行子类化,并在每个平台中实现相应的Renderer。在那里,您可以与平台的本地API进行交互。

g6baxovj

g6baxovj2#

这可以通过custom renderer来实现。

首先,可以通过对Picker控件进行子类化来创建自定义Picker控件,如以下代码所示:

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

第二个:在每个平台上创建自定义呈现器,重写OnElementChanged方法并编写逻辑以自定义控件,然后将ExportRenderer属性添加到自定义呈现器类以指定将使用它。
在安卓系统中:

[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}" />

截图:

MS官方文档链接:https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/

bihw5rsg

bihw5rsg3#

你可以很容易地创建自己的控件,不需要渲染器,可以在iOS、Android和UWP上工作。这是我的解决方案。你必须为控件创建一个视图“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>

后面有这段代码

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

第一节第一节第一节第一节第一次

相关问题