控件出处
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());
}