使用自定义渲染器,开发人员可以自定义Xamarin.Forms每个平台上控件的外观和行为。开发人员可以使用本机控件的功能。
例如,我们需要禁用滚动ListView。在iOSListView上,即使所有项目都放置在屏幕上,用户也无法滚动列表,它还是可以滚动的。Xamarin.Forms.ListView不管理此类设置。在这种情况下,渲染器将为您提供帮助。
首先,我们应该在PCL项目中创建自定义控件,该控件将声明一些必需的可绑定属性:
public class SuperListView : ListView { public static readonly BindableProperty IsScrollingEnableProperty = BindableProperty.Create(nameof(IsScrollingEnable), typeof(bool), typeof(SuperListView), true); public bool IsScrollingEnable { get { return (bool)GetValue(IsScrollingEnableProperty); } set { SetValue(IsScrollingEnableProperty, value); } } }
下一步将为每个平台创建一个渲染器。
iOS:
[assembly: ExportRenderer(typeof(SuperListView), typeof(SuperListViewRenderer))] namespace SuperForms.iOS.Renderers { public class SuperListViewRenderer : ListViewRenderer { protected override void OnElementChanged(ElementChangedEventArgs<ListView> e) { base.OnElementChanged(e); var superListView = Element as SuperListView; if (superListView == null) return; Control.ScrollEnabled= superListView.IsScrollingEnable; } } }
和Android(如果所有项目都放在屏幕上,Android的列表将不会滚动,因此我们不会禁用滚动,但仍然能够使用本机属性):
[assembly: ExportRenderer(typeof(SuperListView), typeof(SuperListViewRenderer))] namespace SuperForms.Droid.Renderers { public class SuperListViewRenderer : ListViewRenderer { protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ListView> e) { base.OnElementChanged(e); var superListView = Element as SuperListView; if (superListView == null) return; } } }
Element渲染器的属性是我SuperListView从PCL项目控制的。
Control渲染器的属性是本机控件。Android.Widget.ListView适用于Android和UIKit.UITableViewiOS。
以及我们将如何使用它XAML:
<ContentPage x:Name="Page" xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:controls="clr-namespace:SuperForms.Controls;assembly=SuperForms.Controls" x:Class="SuperForms.Samples.SuperListViewPage"> <controls:SuperListView ItemsSource="{Binding Items, Source={x:Reference Page}}" IsScrollingEnable="false" Margin="20"> <controls:SuperListView.ItemTemplate> <DataTemplate> <ViewCell> <Label Text="{Binding .}"/> </ViewCell> </DataTemplate> </controls:SuperListView.ItemTemplate> </controls:SuperListView> </ContentPage>
.cs 页面文件:
public partial class SuperListViewPage : ContentPage { private ObservableCollection<string> _items; public ObservableCollection<string> Items { get { return _items; } set { _items = value; OnPropertyChanged(); } } public SuperListViewPage() { var list = new SuperListView(); InitializeComponent(); var items = new List<string>(10); for (int i = 1; i <= 10; i++) { items.Add($"Item {i}"); } Items = new ObservableCollection<string>(items); } }