Xamarin.Forms自定義GridView

在開發中，我們經常用到以格子的形式來展示我們的數據，在很多平臺的控件中我們叫做GridView，

在Xamarin.Forms中沒有原生的GridView，這裏簡單介紹一種利用Xamarin.Forms中的Grid來實現

GridView的方法。

原理就是對Grid動態添加RowDefinition和ColumnDefinition。

代碼如下：

  1 using System;
  2 using System.Collections;
  3 using System.Collections.Generic;
  4 using System.Diagnostics;
 
  5 using System.Linq;
  6 using System.Text;
  7 using System.Threading.Tasks;
  8 using System.Windows.Input;
  9 using Xamarin.Forms;
 10 using Xamarin.Forms.Xaml;
 11 
 12 namespace XFPractice.CustomView
 13 {
 14     [XamlCompilation(XamlCompilationOptions.Compile)]
 15     public partial class GridView : Grid
 
 16     {
 17         
 18         public static readonly BindableProperty CommandParameterProperty = BindableProperty.Create(nameof(CommandParameter), typeof(object), typeof(GridView));
 19         public static readonly BindableProperty CommandProperty = BindableProperty.Create(nameof(Command),typeof
 
(ICommand), typeof(GridView));
 20         public static readonly BindableProperty ItemTemplateProperty = BindableProperty.Create(nameof(ItemTemplate),typeof(DataTemplate),typeof(GridView),null);
 21         
 22         public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create(nameof(ItemsSource), typeof(IEnumerable), typeof(GridView), default(IEnumerable<object>), propertyChanged: OnItemsSourcePropertyChanged);
 23         
 24 
 25         private int _maxColumns = 2;
 26         private float _tileHeight = 100;
 27 
 28         public GridView()
 29         {
 30             InitializeComponent();
 31             for (var i = 0; i < MaxColumns; i++)
 32             {
 33                 ColumnDefinitions.Add(new ColumnDefinition());
 34             }
 35         }
 36 
 37 
 38 
 39         public static void OnItemsSourcePropertyChanged(BindableObject bindable, object oldValue, object newValue)
 40         {
 41             ((GridView)bindable).UpdateTiles();
 42         }
 43 
 44 
 45 
 46         public DataTemplate ItemTemplate
 47         {
 48             get { return (DataTemplate)GetValue(ItemTemplateProperty); }
 49             set { SetValue(ItemTemplateProperty, value); }
 50         }
 51         
 52         public IEnumerable ItemsSource
 53         {
 54             get { return (IEnumerable)GetValue(ItemsSourceProperty); }
 55             set {SetValue(ItemsSourceProperty, value);}
 56         }
 57 
 58         public int MaxColumns
 59         {
 60             get { return _maxColumns; }
 61             set { _maxColumns = value; }
 62         }
 63         
 64         public float TileHeight
 65         {
 66             get { return _tileHeight; }
 67             set { _tileHeight = value; }
 68         }
 69 
 70         public object CommandParameter
 71         {
 72             get { return GetValue(CommandParameterProperty); }
 73             set { SetValue(CommandParameterProperty, value); }
 74         }
 75         
 76         public ICommand Command
 77         {
 78             get { return (ICommand)GetValue(CommandProperty); }
 79             set { SetValue(CommandProperty, value); }
 80         }
 81         
 82         public async Task BuildTiles(IEnumerable tiles)
 83         {
 84             // Wipe out the previous row definitions if they‘re there.
 85             if (RowDefinitions.Any())
 86             {
 87                 RowDefinitions.Clear();
 88             }
 89             Children.Clear();
 90             if (tiles == null)
 91             {
 92                 return;
 93             }
 94             var enumerable = tiles as IList ?? tiles.Cast<object>().ToArray();
 95             var numberOfRows = Math.Ceiling(enumerable.Count / (float)MaxColumns);
 96             HeightRequest = TileHeight * numberOfRows;
 97             InvalidateLayout();
 98             for (var i = 0; i < numberOfRows; i++)
 99             {
100                 RowDefinitions.Add(new RowDefinition { Height = TileHeight });
101             }
102             int ItemCount = enumerable.Count;
103             int size = (int)numberOfRows * MaxColumns;
104             
105             for (var index = 0; index < size; index++)
106             {
107                 var column = index % MaxColumns;
108                 var row = (int)Math.Floor(index / (float)MaxColumns);
109                 if (index  < ItemCount)
110                 {
111                     var tile = await BuildTile(enumerable[index]);
112                     Children.Add(tile, column, row);
113                 }
114                 else
115                 {
116                     var tile = await BuildEmptyTile();
117                     Children.Add(tile, column,row);
118                 }
119             }
120         }
121         
122         public async void UpdateTiles()
123         {
124             await BuildTiles(ItemsSource);
125         }
126 
127         private async Task<Xamarin.Forms.View> BuildEmptyTile()
128         {
129             return await Task.Run(() =>
130             {
131                 var content = ItemTemplate?.CreateContent();
132                 if (!(content is Xamarin.Forms.View) && !(content is ViewCell)) throw new Exception(content.GetType().ToString());
133                 var buildTile = (content is Xamarin.Forms.View) ? content as Xamarin.Forms.View : ((ViewCell)content).View;
134                 return buildTile;
135             });
136 
137         }
138 
139         private async Task<Xamarin.Forms.View> BuildTile(object item)
140         {
141             return await Task.Run(() =>
142             {
143                 var content = ItemTemplate?.CreateContent();
144                 if (!(content is Xamarin.Forms.View) && !(content is ViewCell)) throw new Exception(content.GetType().ToString());
145                 var buildTile = (content is Xamarin.Forms.View) ? content as Xamarin.Forms.View : ((ViewCell)content).View;
146                 buildTile.BindingContext = item;
147                 var tapGestureRecognizer = new TapGestureRecognizer
148                 {
149                     Command = Command,
150                     CommandParameter = item
151                 };
152                 buildTile.GestureRecognizers.Add(tapGestureRecognizer);
153                 return buildTile;
154             });
155 
156         }
157 
158     }
159 }

使用如下：

<controls:GridView
                        x:Name="mGridView"
                        HorizontalOptions="FillAndExpand"
                        VerticalOptions="FillAndExpand"
                        TileHeight="48"
                        MaxColumns ="5"
                        ItemsSource="{Binding UserInfoList,Mode=TwoWay}">
                        <controls:GridView.ItemTemplate>
                            <DataTemplate>
                                <Grid Padding="8" HeightRequest="48" WidthRequest="48" HorizontalOptions="Center">
                                    <Image Source="{Binding HeadImage}" HeightRequest="32" WidthRequest="32" Aspect="AspectFill"/>
                                </Grid>
                            </DataTemplate>
                        </controls:GridView.ItemTemplate>
                    </controls:GridView>

這段代碼有一個問題，ItemsSource綁定ListSource後，當ListSource發生增加減少不會觸發GridView的刷新，

之後將ListSource重新new一個對象後，才會觸發propertyChanged從而刷新GridView。

Xamarin.Forms自定義GridView