xamarin怎么实现类似C#datagridview控件的效果

Question

数据想用表格展示出来，xamarin如何实现

Answer 1

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());

        }

好文要顶 关注我 收藏该文