Xamarin.Forms DataGrid

控件出处

https://components.xamarin.com/

https://components.xamarin.com/gettingstarted/ZumeroDataGrid/true

效果图

 
 

上正文

Xamarin.forms项目右键->管理NUGET

Android、ios项目依次添加。

注册控件

Ios：

    AppDelegate.cs

    public
override
bool FinishedLaunching(UIApplication app, NSDictionary options)

{

global::Xamarin.Forms.Forms.Init();

 
 

Zumero.DataGridComponent.Init();

     ……

Android:

    MainActivity.cs

    protected
override
void OnCreate(Bundle bundle)

{

base.OnCreate(bundle);

 
 

global::Xamarin.Forms.Forms.Init(this, bundle);

Zumero.DataGridComponent.Init();

     ……

Forms 应用

Xaml：

    xmlns:d="clr-namespace:Zumero;assembly=Zumero.DataGrid"
//声明

    应用如下：

<d:DataGrid
x:Name="datagrid"
Rows="{Binding DataRows}"
BackgroundColor="Black"
RowHeight="40"
HeaderHeight="40"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">

<d:DataGrid.FrozenColumn>

<d:Column
Width="40">

<d:Column.HeaderView>

<Label
Text="姓名"
BackgroundColor="Gray"
TextColor="Black"
XAlign="Center"
YAlign="Center"></Label>

</d:Column.HeaderView>

<d:Column.Template>

<DataTemplate>

<Label
Text="{Binding SampleName}"
BackgroundColor="White"
TextColor="Black"
XAlign="Center"
YAlign="Center"></Label>

</DataTemplate>

</d:Column.Template>

</d:Column>

</d:DataGrid.FrozenColumn>

<d:DataGrid.Columns>

<d:DataGrid.Columns>

<d:Column
Width="150">

<d:Column.HeaderView>

<Label
Text="文本"
BackgroundColor="Gray"
TextColor="Black"
XAlign="Center"
YAlign="Center"></Label>

</d:Column.HeaderView>

<d:Column.Template>

<DataTemplate>

<Label
Text="{Binding SampleDescription}"
BackgroundColor="White"
TextColor="Black"
XAlign="Center"
YAlign="Center"></Label>

</DataTemplate>

</d:Column.Template>

</d:Column>

</d:DataGrid.Columns>

</d:DataGrid>

属性说明

        DataGrid

            Rows="{Binding DataRows}"     //数据源
固定写法对应后端代码
datagrid.Rows = new
ObservableCollection<object>

            RowHeight="40"         //行高

            HeaderHeight="40"        //表头高度

        d:DataGrid.FrozenColumn        //
Fxed列，固定不会随拖拽变动 同columns类似

        d:DataGrid.Columns            //列，格式同上文中内容

        d:Column.HeaderView            //列表头布局

        d:Column.Template            //列模板

        DataTemplate                //数据模板

        d:DataGrid.Columns-》d:Column-》d:Column.HeaderView-》Label

d:Column.Template-》DataTemplate-》Label

事件绑定

        <Button
Text="详细"
Clicked="OnCodeButtonClicked"
BorderWidth="0"
BackgroundColor="Green"
TextColor="White"></Button>

        通过Clicked事件进行回调处理

CS代码：

    初始化数据绑定:

    OpenCode、OpenXaml 参数类型对应 Func<Page>

    用于数据绑定按钮点击弹出对应上文中的 《详细》 Button

        protected
override
void OnAppearing()

        {

            base.OnAppearing();

 
 

            datagrid.Rows = new
ObservableCollection<object>

            {

                new
SampleObject

                {

                    SampleName = "Presidents",

                    SampleDescription = "Shows images, dates. Includes headers and a frozen column.",

                    OpenCode = () => { return
new
PresidentsCode(); },

                    OpenXaml = () => { return
new
PresidentsXaml(); },

                },

                new
SampleObject

                {

                    SampleName = "Countries",

                    SampleDescription = "Lots of rows. Unicode text.",

                    OpenCode = () => { return
new
CountriesCode(); },

                    OpenXaml = () => { return
new
CountriesXaml(); },

                },

                new
SampleObject

                {

                    SampleName = "Dynamic",

                    SampleDescription = "Dynamic generation of one million 'virtual' rows.",

                    OpenCode = () => { return
new
DynamicCode(); },

                    OpenXaml = () => { return
new
DynamicXaml(); },

                },

                new
SampleObject

                {

                    SampleName = "XSquared",

                    SampleDescription = "Includes slider controls with two way binding.",

                    OpenCode = () => { return
new
XSquaredCode(); },

                    OpenXaml = () => { return
new
XSquaredXaml(); },

                },

            };

        }

    事件弹窗：

        void OnCodeButtonClicked(object sender, EventArgs args)

        {

            Button button = (Button)sender;

            this.Navigation.PushAsync(((SampleObject)button.BindingContext).OpenCode());

        }