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