![](/img/trans.png)
[英]Xamarin forms: Display and bind data for list/grid with multiple rows and columns
[英]Xamarin Forms display data grid
我是 xamarin forms 的初学者,我必须以网格形式显示动态数据。 我的数据有多个列和行,并不总是适合屏幕大小。 所以我必须水平和垂直滚动。 第一列是数据的描述,我称之为行 header。 我的目标是移动/滚动数据“下”列和“下”行 header。 列和行 header 必须始终可见。
也许有人有同样的问题/解决方案并指出我正确的方向? 还是样品?
附加信息:
要更清楚。 如果用户向左滚动数据区域,则 header 列必须向左滚动。 因为并非所有列都可以显示在屏幕上。 与行 header 相同。 如果用户向下滚动数据区域,它必须向下滚动。
在 excel 中,function 被命名为“冻结窗格”: 我丑陋的简报:
谢谢
您可以使用Grid作为根布局并使用ScrollView来显示数据。
当数据超出屏幕时,ScrollView 将可滚动。
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<!--Columns-->
<Label Text="title0" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="LightPink" Grid.Row="0" Grid.Column="1" />
<Label Text="title1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="LightBlue" Grid.Row="0" Grid.Column="2" />
<Label Text="title2" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="LightPink" Grid.Row="0" Grid.Column="3" />
<Label Text="title3" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="LightBlue" Grid.Row="0" Grid.Column="4" />
<!--Row Header-->
<Label Text="title0" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="LightPink" Grid.Row="1" Grid.Column="0" />
<Label Text="title1" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="LightBlue" Grid.Row="2" Grid.Column="0" />
<Label Text="title2" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="LightPink" Grid.Row="3" Grid.Column="0" />
<Label Text="title3" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="LightBlue" Grid.Row="4" Grid.Column="0" />
<Label Text="title4" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="LightPink" Grid.Row="5" Grid.Column="0" />
<Label Text="title5" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="LightBlue" Grid.Row="6" Grid.Column="0" />
<Label Text="title6" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="LightPink" Grid.Row="7" Grid.Column="0" />
<Label Text="title7" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" BackgroundColor="LightBlue" Grid.Row="8" Grid.Column="0" />
<!--Data-->
</Grid>
</ScrollView>
如果您使用 xamarin.forms syncfusion datagrid (SfDataGrid),您有两个选项可以解决此问题:
1)-第一个使用 SfDataGrid 的未绑定行和未绑定列功能。
2)-第二次使用 SfDataGrid 的冻结窗格(也称为冻结视图)功能。
如果是对我来说,我会 go 作为第二个选项,即冻结窗格,这是它的样子:
syncfusion 有一个免费的社区许可证,您可以使用,一旦您在该页面打开一个免费帐户,就可以生成社区许可证密钥。
一旦您有了密钥,请按照有关如何设置 SfDataGrid 的设置说明进行操作,SfDataGrid 只是一个小的 NuGet package。
然后在您的应用程序 class 中,将密钥作为 RegisterLicense 方法的参数。
public App()
{
//Register Syncfusion license
Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR LICENSE KEY");
InitializeComponent();
MainPage = new App1.MainPage();
}
有关许可的更多信息。
这适用于 Android 和 iOS。 在 UWP 上滚动不顺畅。 但这对我来说并不重要:
<Grid BackgroundColor="Black">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="80" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="Empty" Grid.Row="0" Grid.Column="0" />
<AbsoluteLayout Grid.Column="1"
Grid.Row="0"
VerticalOptions="FillAndExpand" >
<ScrollView x:Name="colScrollView"
Orientation="Horizontal"
VerticalScrollBarVisibility="Never"
HorizontalScrollBarVisibility="Never"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
<Grid BackgroundColor="LightGoldenrodYellow">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Text="Column" Grid.Row="0" Grid.Column="0" />
<Label Text="Column" Grid.Row="0" Grid.Column="1" />
<Label Text="Column" Grid.Row="0" Grid.Column="2" />
<Label Text="Column" Grid.Row="0" Grid.Column="3" />
<Label Text="Column" Grid.Row="0" Grid.Column="4" />
</Grid>
</ScrollView>
<BoxView AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
BackgroundColor="Transparent"></BoxView>
</AbsoluteLayout>
<AbsoluteLayout Grid.Column="0"
Grid.Row="1"
VerticalOptions="FillAndExpand">
<ScrollView x:Name="rowScrollView"
Orientation="Vertical"
VerticalScrollBarVisibility="Never"
HorizontalScrollBarVisibility="Never"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
<Grid BackgroundColor="LightBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="100" />
<RowDefinition Height="100" />
<RowDefinition Height="100" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Label Text="Cell" Grid.Column="0" Grid.Row="0" />
<Label Text="Cell" Grid.Column="0" Grid.Row="1" />
<Label Text="Cell" Grid.Column="0" Grid.Row="2" />
<Label Text="Cell" Grid.Column="0" Grid.Row="3" />
<Label Text="Cell" Grid.Column="0" Grid.Row="4" />
</Grid>
</ScrollView>
<BoxView AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All"
BackgroundColor="Transparent"></BoxView>
</AbsoluteLayout>
<AbsoluteLayout Grid.Column="1"
Grid.Row="1"
VerticalOptions="FillAndExpand">
<ScrollView x:Name="dataScrollView"
Orientation="Both"
AbsoluteLayout.LayoutBounds="0,0,1,1"
AbsoluteLayout.LayoutFlags="All">
<Grid BackgroundColor="LightGreen">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="100" />
<RowDefinition Height="100" />
<RowDefinition Height="100" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Label Text="Cell" Grid.Column="0" Grid.Row="0" />
<Label Text="Cell" Grid.Column="0" Grid.Row="1" />
<Label Text="Cell" Grid.Column="0" Grid.Row="2" />
<Label Text="Cell" Grid.Column="0" Grid.Row="3" />
<Label Text="Cell" Grid.Column="0" Grid.Row="4" />
<Label Text="Cell" Grid.Column="1" Grid.Row="0" />
<Label Text="Cell" Grid.Column="1" Grid.Row="1" />
<Label Text="Cell" Grid.Column="1" Grid.Row="2" />
<Label Text="Cell" Grid.Column="1" Grid.Row="3" />
<Label Text="Cell" Grid.Column="1" Grid.Row="4" />
<Label Text="Cell" Grid.Column="2" Grid.Row="0" />
<Label Text="Cell" Grid.Column="2" Grid.Row="1" />
<Label Text="Cell" Grid.Column="2" Grid.Row="2" />
<Label Text="Cell" Grid.Column="2" Grid.Row="3" />
<Label Text="Cell" Grid.Column="2" Grid.Row="4" />
<Label Text="Cell" Grid.Column="3" Grid.Row="0" />
<Label Text="Cell" Grid.Column="3" Grid.Row="1" />
<Label Text="Cell" Grid.Column="3" Grid.Row="2" />
<Label Text="Cell" Grid.Column="3" Grid.Row="3" />
<Label Text="Cell" Grid.Column="3" Grid.Row="4" />
<Label Text="Cell" Grid.Column="4" Grid.Row="0" />
<Label Text="Cell" Grid.Column="4" Grid.Row="1" />
<Label Text="Cell" Grid.Column="4" Grid.Row="2" />
<Label Text="Cell" Grid.Column="4" Grid.Row="3" />
<Label Text="Cell" Grid.Column="4" Grid.Row="4" />
</Grid>
</ScrollView>
</AbsoluteLayout>
</Grid>
后面的代码:
public MyPage()
{
InitializeComponent();
dataScrollView.Scrolled += DataScrollView_Scrolled;
}
private async void DataScrollView_Scrolled(object sender, ScrolledEventArgs e)
{
await rowScrollView.ScrollToAsync(0, e.ScrollY, false);
await colScrollView.ScrollToAsync(e.ScrollX, 0, false);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.