Xamarin.Forms 实现表格显示及分页

Xamarin.Forms 确实呀，好用的控件真的少的可怜，都是些零零散散的原生控件到处拼凑。

有些免费的三方库也感觉没花多大精力去维护好，确实用的人少呀；有些收费的，比如Syncfusion，拿个免费授权费劲的要死。

可怜我们这些C#的开发者，想玩玩安卓系统这么费劲

最近在做表格界面，Xamarin.Forms也没有DataGrid此类的表格控件，那就只能上ListView咯，也做出来，问题不大，分页的话只能自己用按钮去拼凑了；

废话不多说，上源码....

先给大伙看下效果，样子丑丑的莫见怪哈：

首先分页控件 代码:

 <StackLayout
     Grid.Row="1"
     HorizontalOptions="Center"
     Orientation="Horizontal"
     VerticalOptions="Center">
     <StackLayout.Resources>
         <Style x:Key="page_btnImg" TargetType="Image">
             <Setter Property="WidthRequest" Value="45" />
             <Setter Property="HeightRequest" Value="45" />
         </Style>
     </StackLayout.Resources>
     <Image Source="{ex:ImageResource X.APP.Images.Page.first.png}" Style="{StaticResource page_btnImg}">
         <Image.GestureRecognizers>
             <TapGestureRecognizer Command="{Binding PageCommand}" CommandParameter="first" />
         </Image.GestureRecognizers>
     </Image>
     <Image Source="{ex:ImageResource X.APP.Images.Page.prev.png}" Style="{StaticResource page_btnImg}">
         <Image.GestureRecognizers>
             <TapGestureRecognizer Command="{Binding PageCommand}" CommandParameter="prev" />
         </Image.GestureRecognizers>
     </Image>
     <Label
         Margin="20,0"
         FontSize="30"
         HorizontalOptions="Center"
         Text="{Binding PageIndex}"
         TextColor="Cyan"
         VerticalOptions="Center" />
     <Image Source="{ex:ImageResource X.APP.Images.Page.next.png}" Style="{StaticResource page_btnImg}">
         <Image.GestureRecognizers>
             <TapGestureRecognizer Command="{Binding PageCommand}" CommandParameter="next" />
         </Image.GestureRecognizers>
     </Image>
     <Image Source="{ex:ImageResource X.APP.Images.Page.last.png}" Style="{StaticResource page_btnImg}">
         <Image.GestureRecognizers>
             <TapGestureRecognizer Command="{Binding PageCommand}" CommandParameter="last" />
         </Image.GestureRecognizers>
     </Image>
     <Label
         Margin="20,0,0,0"
         FontSize="30"
         HorizontalOptions="Center"
         Text="总页数："
         TextColor="Cyan"
         VerticalOptions="Center" />
     <Label
         Margin="5,0,0,0"
         FontSize="30"
         HorizontalOptions="Center"
         Text="{Binding PageCount}"
         TextColor="Cyan"
         VerticalOptions="Center" />
 </StackLayout>

分页对应的VM属性：

        #region 分页

        public DelegateCommand PageCommand
        {
            get { return new DelegateCommand(PageOp); }
        }

        private void PageOp(object obj)
        {
            try
            {
                if (obj != null)
                {
                    switch (obj.ToString())
                    {
                        case "first":
                            PageIndex = Math.Min(0, PageCount);
                            break;
                        case "last":
                            PageIndex = Math.Max(0, PageCount);
                            break;
                        case "next":
                            PageIndex = Math.Min(PageCount, PageIndex + 1);
                            break;
                        case "prev":
                            PageIndex = Math.Max(0, PageIndex - 1);
                            break;
                    }
                    SearchData();
                }
            }
            catch (Exception ex)
            {
                LogOperate.Error("分页操作发生异常", ex);
            }
        }



        private int _pageSize = 10;
        /// <summary>
        /// 页数
        /// </summary>
        public int PageSize
        {
            get { return _pageSize; }
            set { _pageSize = value; OnPropertyChanged(); }
        }

        private int _pageIndex;
        /// <summary>
        /// 页码
        /// </summary>
        public int PageIndex
        {
            get { return _pageIndex; }
            set { _pageIndex = value; OnPropertyChanged(); }
        }

        private int _pageCount;
        /// <summary>
        /// 分页总数
        /// </summary>
        public int PageCount
        {
            get { return _pageCount; }
            set { _pageCount = value; OnPropertyChanged(); }
        }



        #endregion

接下来就是用ListView实现的表格效果啦；

首先是表头：ListView.Header  我也是直接用Grid进行设计了

接着就是单元格 ListView.ItemTemplate，也是用Grid设计，但记住第一层控件一定是ViewCell，否则就是报错。

看代码示例就行了

MaterialList 就是表格的数据源

单元格中的字段就是列表明细的字段  Text="{Binding MaterialSpec}"

还有要说一下的就是 表格中的按钮绑定的Command， 

Command="{Binding Path=BindingContext.EditCommand, Source={x:Reference mPage}}"

EditCommand是页面绑定的VM中的对象， mPage我是偷懒直接给Page定了这个名字，反正它也是能通过名称去往上层去寻找控价，然后取控件的BindingContext

         <ScrollView
             Grid.Row="0"
             HorizontalOptions="Fill"
             HorizontalScrollBarVisibility="Never"
             VerticalOptions="Fill"
             VerticalScrollBarVisibility="Never">
             <ListView
                 x:Name="materialTable"
                 HorizontalOptions="Fill"
                 ItemsSource="{Binding MaterialList, Mode=TwoWay}"
                 VerticalOptions="Fill">
                 <ListView.Header>
                     <Grid>
                         <Grid.Resources>
                             <Style x:Key="cellHeader" TargetType="Label">
                                 <Setter Property="HorizontalOptions" Value="Center" />
                                 <Setter Property="VerticalOptions" Value="Center" />
                                 <Setter Property="FontSize" Value="23" />
                                 <Setter Property="TextColor" Value="Black" />
                                 <Setter Property="FontAttributes" Value="Bold" />
                             </Style>
                         </Grid.Resources>
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="*" />
                             <ColumnDefinition Width="*" />
                             <ColumnDefinition Width="*" />
                             <ColumnDefinition Width="*" />
                             <ColumnDefinition Width="*" />
                         </Grid.ColumnDefinitions>
                         <Label
                             Grid.Column="0"
                             Style="{StaticResource cellHeader}"
                             Text="物料分类" />
                         <Label
                             Grid.Column="1"
                             Style="{StaticResource cellHeader}"
                             Text="物料编号" />
                         <Label
                             Grid.Column="2"
                             Style="{StaticResource cellHeader}"
                             Text="物料名称" />
                         <Label
                             Grid.Column="3"
                             Style="{StaticResource cellHeader}"
                             Text="物料规格" />
                         <Label
                             Grid.Column="4"
                             Style="{StaticResource cellHeader}"
                             Text="操作" />
                     </Grid>
                 </ListView.Header>
                 <ListView.ItemTemplate>
                     <DataTemplate>
                         <ViewCell>
                             <Grid>
                                 <Grid.Resources>
                                     <Style x:Key="cellStyle" TargetType="Label">
                                         <Setter Property="HorizontalOptions" Value="Center" />
                                         <Setter Property="VerticalOptions" Value="Center" />
                                         <Setter Property="FontSize" Value="20" />
                                         <Setter Property="TextColor" Value="White" />
                                         <Setter Property="FontAttributes" Value="None" />
                                     </Style>
                                 </Grid.Resources>
                                 <Grid.ColumnDefinitions>
                                     <ColumnDefinition Width="*" />
                                     <ColumnDefinition Width="*" />
                                     <ColumnDefinition Width="*" />
                                     <ColumnDefinition Width="*" />
                                     <ColumnDefinition Width="*" />
                                 </Grid.ColumnDefinitions>
                                 <Label
                                     Grid.Column="0"
                                     Style="{StaticResource cellStyle}"
                                     Text="{Binding CategoryName}" />
                                 <Label
                                     Grid.Column="1"
                                     Style="{StaticResource cellStyle}"
                                     Text="{Binding MaterialCode}" />
                                 <Label
                                     Grid.Column="2"
                                     Style="{StaticResource cellStyle}"
                                     Text="{Binding MaterialName}" />
                                 <Label
                                     Grid.Column="3"
                                     Style="{StaticResource cellStyle}"
                                     Text="{Binding MaterialSpec}" />
                                 <Button
                                     Grid.Column="4"
                                     Command="{Binding Path=BindingContext.EditCommand, Source={x:Reference mPage}}"
                                     CommandParameter="{Binding MaterialCode}"
                                     FontAttributes="Bold"
                                     FontSize="20"
                                     HeightRequest="45"
                                     Text="编 辑"
                                     TextColor="Black"
                                     WidthRequest="200">
                                     <Button.Background>
                                         <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                                             <GradientStop Offset="0" Color="WhiteSmoke" />
                                             <GradientStop Offset="0.4" Color="#E1FFFF" />
                                             <GradientStop Offset="0.8" Color="#AFEEEE" />
                                         </LinearGradientBrush>
                                     </Button.Background>
                                 </Button>
                             </Grid>
                         </ViewCell>
                     </DataTemplate>
                 </ListView.ItemTemplate>
             </ListView>
         </ScrollView>