我在页面上的网格中有两行。第一个显示一些信息。在第二行中,我有另一个包含两行的网格。第一个是stackLayout并显示一个甜甜圈图,第二个是带有滚动视图和按钮的stackLayout。单击按钮后,滚动视图将在y轴上平移以显示历史记录项目。但是,滚动视图的高度没有改变。有人知道为什么吗?
xaml文件
<StackLayout Grid.Row="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="200"/>
<RowDefinition Height="200"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0">
<forms:ChartView x:Name="PieChart" HeightRequest="300"/>
</StackLayout>
<StackLayout x:Name="HistoryScroll" Grid.Row="1" TranslationY="120">
<StackLayout Padding="0" Margin="0">
<Frame x:Name="HistoryBtn" Padding="0" Margin="5, 5, 0, 5" CornerRadius="5"
HorizontalOptions="EndAndExpand" VerticalOptions="EndAndExpand"
BackgroundColor="#000058">
<Button Text="History" TextColor="#fff"
BackgroundColor="Transparent" HorizontalOptions="EndAndExpand"
VerticalOptions="EndAndExpand"
Margin="0" Padding="0" Clicked="HistoryBtnHandler"/>
</Frame>
<Frame BackgroundColor="LightGray" BorderColor="Transparent" Padding="0"
HeightRequest="10" Margin="0" HasShadow="False"/>
</StackLayout>
<ScrollView HeightRequest="300" IsEnabled="True">
<StackLayout HeightRequest="300">
<Label Text="History Item"/>
<Label Text="History Item"/>
<Label Text="History Item"/>
<Label Text="History Item"/>
<Label Text="History Item"/>
<Label Text="History Item"/>
<Label Text="History Item"/>
<Label Text="History Item"/>
<Label Text="History Item"/>
<Label Text="History Item"/>
<Label Text="History Item"/>
<Label Text="History Item"/>
<Label Text="History Item"/>
<Label Text="History Item"/>
<Label Text="History Item"/>
</StackLayout>
</ScrollView>
</StackLayout>
</Grid>
</StackLayout>
由于您仅为网格行= 1分配了200DP,因此ScrollView
最多只能有200个显示像素。如果需要占用剩余空间,请将Height
设置为*
<Grid.RowDefinitions>
<RowDefinition Height="200"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
如果要正确显示ScrollView
,首先,应按照Prateek的说法设置RowDefinition Height="*"
或设置<RowDefinition Height="auto"/>
。
[此后,我发现您的滚动视图无法滚动,如果您在StackLayout
中设置了ScrollView
的特定高度,则Scrollview
无法滚动。因为显示内容的高度与Scrollview
相等,所以左边的内容被遮盖了。
如果删除StackLayout
中ScrollView
的高度,则可以滚动。但是内容仍然无法完全显示。您可以看到此GIF(我更改了最后一个服务器项的名称,例如History Item1,History Item2 ..)。
我必须降低ScrollView
的高度,它可以正确显示。这里是代码。
<StackLayout Grid.Row="1">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="200"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0">
<microcharts:ChartView
VerticalOptions="Fill"
HorizontalOptions="StartAndExpand"
WidthRequest="2000"
HeightRequest="200"
x:Name="mcProgress"
Margin="0"
IgnorePixelScaling="True"
/>
</StackLayout>
<StackLayout x:Name="HistoryScroll" Grid.Row="1" TranslationY="120">
<StackLayout Padding="0" Margin="0">
<Frame x:Name="HistoryBtn" Padding="0" Margin="5, 5, 0, 5" CornerRadius="5"
HorizontalOptions="EndAndExpand" VerticalOptions="EndAndExpand"
BackgroundColor="#000058">
<Button
Text="History" TextColor="#fff"
BackgroundColor="Transparent" HorizontalOptions="EndAndExpand"
VerticalOptions="EndAndExpand"
Margin="0" Padding="0" Clicked="Button_Clicked"/>
</Frame>
<Frame BackgroundColor="LightGray" BorderColor="Transparent" Padding="0"
HeightRequest="10" Margin="0" HasShadow="False"/>
</StackLayout>
<ScrollView HeightRequest="200" IsEnabled="True" VerticalScrollBarVisibility="Always">
<StackLayout >
<Label Text="History Item"/>
<Label Text="History Item"/>
<Label Text="History Item"/>
<Label Text="History Item"/>
<Label Text="History Item"/>
<Label Text="History Item"/>
<Label Text="History Item"/>
<Label Text="History Item"/>
<Label Text="History Item"/>
<Label Text="History Item6"/>
<Label Text="History Item5"/>
<Label Text="History Item4"/>
<Label Text="History Item3"/>
<Label Text="History Item2"/>
<Label Text="History Item1"/>
</StackLayout>
</ScrollView>
</StackLayout>
</Grid>
</StackLayout>
这里正在运行GIF。