修复了.NET MAUI / XAML中滚动视图顶部的图像

fumotvh3  于 2023-04-27  发布在  .NET
关注(0)|答案(1)|浏览(209)

我使用<ScrollView>使页面可滚动,我尝试使用<AbsoluteLayout>使页面顶部有一个固定的图像。即使向下滚动页面时,图像也必须保持其固定位置。不允许将<AbsoluteLayout>放置在<ScrollView>的外部,但在它的内部。它将随着页面滚动。完全摆脱<ScrollView>也将禁用滚动。
如何在屏幕顶部放置固定的全宽图像,同时仍然保持可滚动页面?

<ScrollView>
    <Grid RowDefinitions="auto,auto,auto" ColumnDefinitions="*" x:DataType="local:Project">
        <CarouselView Grid.Row="0" 
                  ItemsSource="{Binding images}" 
                  IndicatorView="indicatorView"
                  IsSwipeEnabled="True">
            <CarouselView.ItemsLayout>
                <LinearItemsLayout SnapPointsType="MandatorySingle" 
                               SnapPointsAlignment="Center" 
                               Orientation="Horizontal"/>
            </CarouselView.ItemsLayout>
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <Image Source="{Binding .}"
                       Aspect="AspectFill"/>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>
        <IndicatorView Grid.Row="1" x:Name="indicatorView"/>
        <ScrollView Grid.Row="2" Grid.Column="0" Margin="8,0,8,32">
            <VerticalStackLayout>
                <!-- Page content here -->
            </VerticalStackLayout>
        </ScrollView>
        <AbsoluteLayout>
            <!-- What to do here??? -->
            <VerticalStackLayout AbsoluteLayout.LayoutFlags="PositionProportional"
                                 AbsoluteLayout.LayoutBounds="0,0,100,100">
                <Image Source="test.svg" Aspect="AspectFill"/>
            </VerticalStackLayout>
        </AbsoluteLayout>
    </Grid>
</ScrollView>

对于任何<AbsoluteLayout>元素也是如此,就像一个浮动的操作按钮,它只是随着页面滚动。

xzlaal3s

xzlaal3s1#

一种方法是将ScrollView放入AbsoluteLayout中。在AbsoluteLayout中,您可以将图像设置在固定位置。考虑以下代码:

...
<AbsoluteLayout>
   <ScrollView  WidthRequest="400"  HeightRequest="500">
       <VerticalStackLayout>
       ...
       </VerticalStackLayout>
   </ScrollView>
   <VerticalStackLayout AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0,0,100,100" >
                    <Image Source="test.svg" Aspect="AspectFill"/>
    </VerticalStackLayout>
</AbsoluteLayout>

然后当滚动页面时,图像将停留在固定的位置。
希望能成功。

相关问题