ScrollView 的大小不变

Question

我在页面上的网格中有两行。第一个显示一些信息。在第二行中，我有另一个包含两行的网格。第一个是 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>

Answer 1

因为您只为 Grid Row=1 分配了 200DP ScrollView 最多只有 200 个显示像素。如果你需要让它占据剩余的 space 设置 Height 到 *


<Grid.RowDefinitions>
    <RowDefinition Height="200"/>
    <RowDefinition Height="*"/>
</Grid.RowDefinitions>

Answer 2

如果你想正确显示 ScrollView，首先，你应该像 Prateek 所说的那样设置 RowDefinition Height="*" 或设置 <RowDefinition Height="auto"/>.

之后，我发现你的scrollview不能滚动，如果你在你的ScrollView中设置你的StackLayout的特定高度，你的Scrollview就不能滚动。因为你显示内容的高度和你的Scrollview一样高，左边的内容被覆盖了。

如果我在你的 ScrollView 中删除你的 StackLayout 的高度，它可以滚动。但内容仍未完全显示。你可以看到这个GIF（我更改了最后几项的名称，例如History Item1，History Item2 ..）。

我必须降低ScrollView的高度，才能显示correctly.Here是代码。

  <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。

ScrollView 的大小不变

Size of the ScrollView not changing

c#

scrollview

xamarin

xamarin.forms