无法在移动设备上滚动使用 Xamarin.Forms 创建的 xaml 页面
Cannot scroll xaml page created with Xamarin.Forms on mobile device
滚动在我的 XAML 文件中不起作用。它削减了以下内容并且不显示所有内容。即使我尝试滚动查看底部,它也不允许滚动。底部应该有绿色按钮。但我无法滚动查看它。我试图添加 scrollview 和 listview 但我无法设法将其向下滚动到页面。所以不能向下滑动看到全部内容
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:abstractions="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
NavigationPage.HasNavigationBar="False"
mc:Ignorable="d"
x:Class="CXFMob.OperatiPage">
<StackLayout x:Name="stack1" BackgroundColor="White" VerticalOptions="FillAndExpand">
<StackLayout x:Name="stack2" BackgroundColor="DodgerBlue" HeightRequest="120">
<Frame
Margin="10"
BackgroundColor="White"
CornerRadius="12"
HeightRequest="300"
TranslationY="40">
<StackLayout Orientation="Horizontal">
<Frame
Margin="0,0,10,0"
Padding="10"
BackgroundColor="DodgerBlue"
BorderColor="LightGray"
CornerRadius="40"
HasShadow="True"
HeightRequest="20"
IsClippedToBounds="True"
WidthRequest="60">
<abstractions:CircleImage
Aspect="AspectFit"
HeightRequest="20"
Source="prince"
WidthRequest="20" />
</Frame>
<StackLayout>
<Label Text=" "></Label>
<Label>
<Label.FormattedText>
<FormattedString>
<Span
FontAttributes="Bold"
FontSize="Body"
Text="MOBILE"
TextColor="Red" />
<Span Text=" Tapper" TextColor="LightGray" />
</FormattedString>
</Label.FormattedText>
</Label>
<Label
FontAttributes="Bold"
FontSize="16"
Text="OPERATI"
TextColor="DarkSlateGray" />
<!--<StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal">
<Label>
<Label.FormattedText>
<FormattedString>
<Span
FontAttributes="Bold"
Text=" Mobile "
TextColor="LightGray" />
<Span
FontAttributes="Bold"
FontSize="Body"
Text=" 0244567876"
TextColor="Black" />
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>-->
</StackLayout>
</StackLayout>
</Frame>
<Frame
Margin="10"
CornerRadius="12"
BackgroundColor="White"
TranslationY="40">
<StackLayout Margin="5">
<Grid
ColumnSpacing="20"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label x:Name="mylabel2" Text="cdcdcdc" TextColor="Black" HorizontalTextAlignment="Center" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" FontSize="Large"/>
</Grid>
</StackLayout>
</Frame>
<Frame
Margin="10"
CornerRadius="12"
BackgroundColor="White"
TranslationY="40">
<StackLayout Margin="5">
<Grid
ColumnSpacing="20"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label x:Name="mylabel3" Text="vfvfvf" TextColor="Black" HorizontalTextAlignment="Center" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" FontSize="Large"/>
</Grid>
</StackLayout>
</Frame>
<Frame
Margin="10"
CornerRadius="12"
BackgroundColor="White"
TranslationY="40">
<StackLayout Margin="5">
<Grid
ColumnSpacing="20"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label x:Name="mylabel4" Text="rrfrfrfrf" TextColor="Black" HorizontalTextAlignment="Center" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" FontSize="Large"/>
</Grid>
</StackLayout>
</Frame>
<Frame
Margin="10"
CornerRadius="12"
BackgroundColor="White"
TranslationY="40">
<StackLayout Margin="5">
<Grid
ColumnSpacing="20"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label x:Name="mylabel5" Text="hgyhyhyhyh" TextColor="Black" HorizontalTextAlignment="Center" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" FontSize="Large"/>
</Grid>
</StackLayout>
</Frame>
<Frame
Margin="10"
CornerRadius="12"
BackgroundColor="White"
TranslationY="40">
<StackLayout Margin="5">
<Grid
ColumnSpacing="20"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button
x:Name="btnTransfer"
Margin="20"
BackgroundColor="#FF2ED833"
Clicked="btnTransfer_Clicked"
CornerRadius="20"
HorizontalOptions="FillAndExpand"
Text="Main Page"
TextColor="White"
VerticalOptions="EndAndExpand" />
</Grid>
</StackLayout>
</Frame>
</StackLayout>
</StackLayout>
正如 Jason 所说,ScrollView 应该可以解决问题,您可能只是没有正确使用它。
如图所示在第一个堆栈布局上方添加一个 ScrollView:
mc:Ignorable="d"
x:Class="CXFMob.OperatiPage">
<ScrollView>
<StackLayout x:Name="stack1" ...
然后在最后一行添加结束的 ScrollView 标签:
</StackLayout>
</StackLayout>
</ScrollView>
显然也修复了缩进格式。另外,TranslationY 的目的是什么?
我通过将 HeightRequest 提供给第一个 StackLayout stack1 解决了问题。 ""
同时添加 ScrollView
滚动在我的 XAML 文件中不起作用。它削减了以下内容并且不显示所有内容。即使我尝试滚动查看底部,它也不允许滚动。底部应该有绿色按钮。但我无法滚动查看它。我试图添加 scrollview 和 listview 但我无法设法将其向下滚动到页面。所以不能向下滑动看到全部内容
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:abstractions="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
NavigationPage.HasNavigationBar="False"
mc:Ignorable="d"
x:Class="CXFMob.OperatiPage">
<StackLayout x:Name="stack1" BackgroundColor="White" VerticalOptions="FillAndExpand">
<StackLayout x:Name="stack2" BackgroundColor="DodgerBlue" HeightRequest="120">
<Frame
Margin="10"
BackgroundColor="White"
CornerRadius="12"
HeightRequest="300"
TranslationY="40">
<StackLayout Orientation="Horizontal">
<Frame
Margin="0,0,10,0"
Padding="10"
BackgroundColor="DodgerBlue"
BorderColor="LightGray"
CornerRadius="40"
HasShadow="True"
HeightRequest="20"
IsClippedToBounds="True"
WidthRequest="60">
<abstractions:CircleImage
Aspect="AspectFit"
HeightRequest="20"
Source="prince"
WidthRequest="20" />
</Frame>
<StackLayout>
<Label Text=" "></Label>
<Label>
<Label.FormattedText>
<FormattedString>
<Span
FontAttributes="Bold"
FontSize="Body"
Text="MOBILE"
TextColor="Red" />
<Span Text=" Tapper" TextColor="LightGray" />
</FormattedString>
</Label.FormattedText>
</Label>
<Label
FontAttributes="Bold"
FontSize="16"
Text="OPERATI"
TextColor="DarkSlateGray" />
<!--<StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal">
<Label>
<Label.FormattedText>
<FormattedString>
<Span
FontAttributes="Bold"
Text=" Mobile "
TextColor="LightGray" />
<Span
FontAttributes="Bold"
FontSize="Body"
Text=" 0244567876"
TextColor="Black" />
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>-->
</StackLayout>
</StackLayout>
</Frame>
<Frame
Margin="10"
CornerRadius="12"
BackgroundColor="White"
TranslationY="40">
<StackLayout Margin="5">
<Grid
ColumnSpacing="20"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label x:Name="mylabel2" Text="cdcdcdc" TextColor="Black" HorizontalTextAlignment="Center" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" FontSize="Large"/>
</Grid>
</StackLayout>
</Frame>
<Frame
Margin="10"
CornerRadius="12"
BackgroundColor="White"
TranslationY="40">
<StackLayout Margin="5">
<Grid
ColumnSpacing="20"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label x:Name="mylabel3" Text="vfvfvf" TextColor="Black" HorizontalTextAlignment="Center" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" FontSize="Large"/>
</Grid>
</StackLayout>
</Frame>
<Frame
Margin="10"
CornerRadius="12"
BackgroundColor="White"
TranslationY="40">
<StackLayout Margin="5">
<Grid
ColumnSpacing="20"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label x:Name="mylabel4" Text="rrfrfrfrf" TextColor="Black" HorizontalTextAlignment="Center" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" FontSize="Large"/>
</Grid>
</StackLayout>
</Frame>
<Frame
Margin="10"
CornerRadius="12"
BackgroundColor="White"
TranslationY="40">
<StackLayout Margin="5">
<Grid
ColumnSpacing="20"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label x:Name="mylabel5" Text="hgyhyhyhyh" TextColor="Black" HorizontalTextAlignment="Center" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" FontSize="Large"/>
</Grid>
</StackLayout>
</Frame>
<Frame
Margin="10"
CornerRadius="12"
BackgroundColor="White"
TranslationY="40">
<StackLayout Margin="5">
<Grid
ColumnSpacing="20"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button
x:Name="btnTransfer"
Margin="20"
BackgroundColor="#FF2ED833"
Clicked="btnTransfer_Clicked"
CornerRadius="20"
HorizontalOptions="FillAndExpand"
Text="Main Page"
TextColor="White"
VerticalOptions="EndAndExpand" />
</Grid>
</StackLayout>
</Frame>
</StackLayout>
</StackLayout>
正如 Jason 所说,ScrollView 应该可以解决问题,您可能只是没有正确使用它。 如图所示在第一个堆栈布局上方添加一个 ScrollView:
mc:Ignorable="d"
x:Class="CXFMob.OperatiPage">
<ScrollView>
<StackLayout x:Name="stack1" ...
然后在最后一行添加结束的 ScrollView 标签:
</StackLayout>
</StackLayout>
</ScrollView>
显然也修复了缩进格式。另外,TranslationY 的目的是什么?
我通过将 HeightRequest 提供给第一个 StackLayout stack1 解决了问题。 ""
同时添加 ScrollView