修复了网格中的行和列 - Xamarin Forms

Question

我正在尝试构建一个网格，第一行在垂直滚动期间固定，第一列在水平滚动期间固定

你知道有什么插件/组件可以实现这个吗？

实际上为此我使用了 3 个滚动视图：

• 一个用于固定行，只有水平滚动

• 一个用于固定列，只有垂直滚动

• 一个用于另一个单元格，具有水平和垂直滚动。

然后我必须同步滚动视图，以确保保持对齐。

这真的很难看，而且所有这些同步可能会滞后......

<StackLayout Spacing="0">

                    <ScrollView 
                        x:Name="ScrollEnteteSynthese"
                        Orientation="Horizontal"
                        Scrolled="ScrollEnteteSynthese_Scrolled"
                        >
                        <Grid
                            x:Name="gridEnteteSynthese"
                            BackgroundColor="{StaticResource Grey}"
                            ColumnSpacing="1"
                            RowSpacing="1"
                            />

                    </ScrollView>

                    <StackLayout
                                Orientation="Horizontal"
                                Spacing="0"
                        HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
                                >

                        <ScrollView 
                            x:Name="ScrollColSynthese"
                            Orientation="Vertical"
                            Scrolled="ScrollColSynthese_Scrolled"
                            HorizontalOptions="Fill"
                            VerticalOptions="FillAndExpand"
                            WidthRequest="100">

                            <Grid
                                x:Name="gridColSynthese"
                                ColumnSpacing="1"
                                RowSpacing="1"
                                BackgroundColor="{StaticResource Grey}"
                                />
                        </ScrollView>


                        <ScrollView 
                            x:Name="ScrollSynthese"
                            Orientation="Both"
                            Scrolled="ScrollSynthese_Scrolled"
                            HorizontalOptions="FillAndExpand"
                            VerticalOptions="FillAndExpand"
                                    >

                            <Grid
                                x:Name="gridSynthese"
                                BackgroundColor="{StaticResource GreyLight}"
                                ColumnSpacing="1"
                                RowSpacing="1"
                                        />
                        </ScrollView>
                    </StackLayout>

                </StackLayout>

Answer 1

其实有很多不同的布局可以实现它。例如

<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">

    <Grid HeightRequest="300" >
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="350" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.2*"/>
            <ColumnDefinition Width="0.8*"/>
        </Grid.ColumnDefinitions>

        <Frame Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Padding="0">
            <ScrollView BackgroundColor="LightBlue"  VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never">
                <StackLayout Orientation="Horizontal">
                    //...
                </StackLayout>
            </ScrollView>
        </Frame>

        <Frame Grid.Row="1" Grid.Column="0"  Padding="0" Margin="0,-5,0,0">
            <ScrollView BackgroundColor="LightGreen"  VerticalScrollBarVisibility="Never" HorizontalScrollBarVisibility="Never">
                <StackLayout Orientation="Vertical">
                    //...
                </StackLayout>
            </ScrollView>
        </Frame>
        <Frame Grid.Row="1" Grid.Column="1"  Padding="0" Margin="-5,-5,0,0">
            <Grid  Grid.Row="1" Grid.Column="1" BackgroundColor="LightPink">

                 //

           </Grid>
        </Frame>
    </Grid>
</StackLayout>