Xamarin.Forms ScrollView 在翻译时被切断 [英] Xamarin.Forms ScrollView cut off when translated

问题描述

我在 AbsoluteLayout 中放置了一个 ScrollView 并且我想根据我的要求将它向下移动，所以我已经翻译了 ScrollView 的 y 位置.但在那之后，滚动时只能看到部分内容，而不是 ScrollView 的所有内容.如何克服这一点?我需要在滚动时可视化 ScrollView 的所有内容，即使在视图被翻译之后也是如此.XAML:

I am placing a ScrollView inside the AbsoluteLayout and I want to move it downwards according to my requirement, so I have translated the y position of the ScrollView. But after that, only a certain part of the content is visible when scrolling and not all content of the ScrollView. How to overcome this? I need to visualize all content of the ScrollView when scrolling, even after the view is translated. XAML:

            <AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Row="1">
           
            <ScrollView x:Name="scrollView" AbsoluteLayout.LayoutFlags="SizeProportional" 
                        AbsoluteLayout.LayoutBounds="0,0,1,1">
                <StackLayout>
                    <Button Margin="10" Text="Button 1"/>
                    <Button Margin="10" Text="Button 2"/>
                    <Button Margin="10" Text="Button 3"/>
                    <Button Margin="10" Text="Button 4"/>
                    <Button Margin="10" Text="Button 5"/>
                    <Button Margin="10" Text="Button 6"/>
                    <Button Margin="10" Text="Button 7"/>
                    <Button Margin="10" Text="Button 8"/>
                    <Button Margin="10" Text="Button 9"/>
                    <Button Margin="10" Text="Button 10"/>
                    <Button Margin="10" Text="Button 11"/>
                    <Button Margin="10" Text="Button 12"/>
                    <Button Margin="10" Text="Button 13"/>
                    <Button Margin="10" Text="Button 14"/>
                    <Button Margin="10" Text="Button 15"/>
                    <Button Margin="10" Text="Button 16"/>
                    <Button Margin="10" Text="Button 17"/>
                    <Button Margin="10" Text="Button 18"/>
                    <Button Margin="10" Text="Button 19"/>
                    <Button Margin="10" Text="Button 20"/>
                    <Button Margin="10" Text="Button 21"/>
                    <Button Margin="10" Text="Button 22"/>
                    <Button Margin="10" Text="Button 23"/>
                    <Button Margin="10" Text="Button 24"/>
                    <Button Margin="10" Text="Button 25"/>
                    <Button Margin="10" Text="Button 26"/>
                    <Button Margin="10" Text="Button 27"/>
                    <Button Margin="10" Text="Button 28"/>
                    <Button Margin="10" Text="Button 29"/>
                    <Button Margin="10" Text="Button 30"/>
                    <Button Margin="10" Text="Button 31"/>
                    <Button Margin="10" Text="Button 32"/>
                    <Button Margin="10" Text="Button 33"/>
                    <Button Margin="10" Text="Button 34"/>
                    <Button Margin="10" Text="Button 35"/>
                </StackLayout>
            </ScrollView>
           
        </AbsoluteLayout>

C#:

           /// Translated the y position of the grid in code behind

            scrollView.TranslationY = 250;

翻译前，滚动时所有内容都可见(即最多 35 个按钮).

Before translation, all content is visible when scrolling (i.e. up to 35 button).

翻译y位置后，截掉了一部分内容，最多只能看到31个按钮.

After translating y position, a part of the content is cut off, and I can see only up to 31 buttons.

推荐答案

问题是你的 LayoutBounds 定义了比例高度，值为 1，表示和 parent 相同，当你平移时它，它超出了界限.你可以做的是像这样绑定 LayoutBounds

The problem is that your LayoutBounds defines the proportional height with value of 1, which means the same as parent, and when you translate it, it goes outside of the bounds. What you can do is to bind LayoutBounds like this

AbsoluteLayout.LayoutBounds="{Binding rect}

然后在 C# 中做这样的事情:

and then in C# do something like this:

        public Rectangle rect { get; set; }

        public MainPage()
        {
            InitializeComponent();           
            Double screenHeigth = DeviceDisplay.MainDisplayInfo.Height / DeviceDisplay.MainDisplayInfo.Density;
            rect = new Rectangle(0,250,1,(screenHeigth - 250)/ screenHeigth);
            BindingContext = this;
        }

请注意，我定义了与屏幕高度成比例的高度，因为我不确定您的 UI 是什么样子.这只是您提供的代码的示例，但我想您可以在您的应用程序中做类似的事情.从您的 XAML 来看，您的绝对布局似乎在网格内，因此您应该能够对网格中的行高执行类似操作.

Note that I defined the height proportional to the screen height, because I'm not sure how your UI looks like. This is only example for the code you provided, but I guess you can do something similar in your app. From your XAML, it seems that your Absolute Layout is inside the Grid, so you should be able to do something similar with the Row Height in your grid.

这篇关于Xamarin.Forms ScrollView 在翻译时被切断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！