Xamarin.Forms ScrollView 在翻译时被截断
Xamarin.Forms ScrollView cut off when translated
我在 AbsoluteLayout
中放置了一个 ScrollView
并且我想根据我的要求向下移动它,所以我翻译了 ScrollView
的 y 位置。
但是之后,滚动时只有部分内容可见,而不是 ScrollView
的所有内容。
如何克服这个?
我需要在滚动时可视化 ScrollView
的所有内容,即使在翻译视图之后也是如此。
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 个按钮)。
翻译y位置后,部分内容被截掉,最多只能看到31个按钮。
问题是你的LayoutBounds
定义了比例高度,值为1,也就是parent的意思,当你翻译的时候,它超出了界限。
你可以做的是像这样绑定LayoutBounds
AbsoluteLayout.LayoutBounds="{Binding rect}
然后在 C# 中执行如下操作:
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 来看,你的绝对布局似乎在网格内部,因此你应该能够对网格中的行高执行类似的操作。
我在 AbsoluteLayout
中放置了一个 ScrollView
并且我想根据我的要求向下移动它,所以我翻译了 ScrollView
的 y 位置。
但是之后,滚动时只有部分内容可见,而不是 ScrollView
的所有内容。
如何克服这个?
我需要在滚动时可视化 ScrollView
的所有内容,即使在翻译视图之后也是如此。
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 个按钮)。
翻译y位置后,部分内容被截掉,最多只能看到31个按钮。
问题是你的LayoutBounds
定义了比例高度,值为1,也就是parent的意思,当你翻译的时候,它超出了界限。
你可以做的是像这样绑定LayoutBounds
AbsoluteLayout.LayoutBounds="{Binding rect}
然后在 C# 中执行如下操作:
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 来看,你的绝对布局似乎在网格内部,因此你应该能够对网格中的行高执行类似的操作。