Xamarin Forms отображает сетку данных

Question

Я новичок с формами xamarin, и мне нужно отображать данные Dynami c в виде сетки. Мои данные имеют несколько столбцов и строк, которые не всегда соответствуют размеру экрана. Поэтому я должен прокручивать по горизонтали и вертикали. Первый столбец - это описание данных, я назвал его заголовком строки. Моя цель - переместить / прокрутить данные «под» столбцами и «под» заголовком строки. Столбцы и заголовок строки всегда должны быть видны.
Возможно, у кого-то была такая же проблема / решение и указали мне правильное направление? Или образец?

Дополнительная информация:
Для уточнения. Заголовок столбца должен прокручиваться влево, если пользователь прокручивает область данных влево. Потому что не все столбцы могут отображаться на экране. То же самое с заголовком строки. Она должна прокручиваться вниз, если пользователь прокручивает область данных вниз.
В Excel функция называется «Стоп-кадр»: Моя ужасная точка питания:

Спасибо

Answer 1

если вы используете xamarin.forms syncfusion datagrid (SfDataGrid), у вас есть два варианта решения:

1) - сначала с помощью Unbound Rows и Unbound Columns особенность SfDataGrid.

2) -секунд с использованием функции Freeze Panes (также называемой замороженными видами) SfDataGrid.

, если это было мне бы я go для второго варианта, который является Freeze Panes, вот как это выглядит:

есть бесплатная лицензия сообщества, которая вы можете использовать, лицензионные ключи сообщества могут быть сгенерированы, как только вы откроете там бесплатную учетную запись страница .

, как только у вас есть ключ, следуйте инструкциям по установке о том, как чтобы настроить SfDataGrid, SfDataGrid - это просто небольшой пакет NuGet.

затем в конструкторе класса вашего приложения после ключа в качестве параметра для метода RegisterLicense.

public App()
{
    //Register Syncfusion license
    Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("YOUR LICENSE KEY");

    InitializeComponent();

    MainPage = new App1.MainPage();
}

для получения дополнительной информации лицензирование .

Answer 2

Это работает для меня на 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);
}

Answer 3

Вы можете использовать Сетка в качестве макета root и 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>