我试图搜索如何创建一个自定义的Xamarin选择器,但我不知道如何做到这一点。这是我想做的
我甚至不知道我是否需要安装一个nuget软件包。请帮助和感谢。
mnemlml81#
正如@Skalpel02所提到的,您需要对Picker类进行子类化,并在每个平台中实现相应的Renderer。在那里,您可以与平台的本地API进行交互。
Picker
Renderer
g6baxovj2#
这可以通过custom renderer来实现。
首先,可以通过对Picker控件进行子类化来创建自定义Picker控件,如以下代码所示:
public class BorderlessPicker : Picker { public BorderlessPicker() : base() { } }
第二个:在每个平台上创建自定义呈现器,重写OnElementChanged方法并编写逻辑以自定义控件,然后将ExportRenderer属性添加到自定义呈现器类以指定将使用它。在安卓系统中:
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/
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"); } }
第一节第一节第一节第一节第一次
3条答案
按热度按时间mnemlml81#
正如@Skalpel02所提到的,您需要对
Picker
类进行子类化,并在每个平台中实现相应的Renderer
。在那里,您可以与平台的本地API进行交互。g6baxovj2#
这可以通过custom renderer来实现。
首先,可以通过对Picker控件进行子类化来创建自定义Picker控件,如以下代码所示:
第二个:在每个平台上创建自定义呈现器,重写
OnElementChanged
方法并编写逻辑以自定义控件,然后将ExportRenderer
属性添加到自定义呈现器类以指定将使用它。在安卓系统中:
}
在iOS中:
最后但并非最不重要的是,使用Xaml中的自定义选择器控件:
截图:
MS官方文档链接:https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/
bihw5rsg3#
你可以很容易地创建自己的控件,不需要渲染器,可以在iOS、Android和UWP上工作。这是我的解决方案。你必须为控件创建一个视图“PickerCustom
后面有这段代码
以及用于选择的视图“PickerCustomList”
后面有这段代码
第一节第一节第一节第一节第一次