Размер ScrollView не меняется

Question

У меня есть две строки в моей сетке на странице. Первый отображает некоторую информацию. Во втором ряду у меня есть еще одна сетка с двумя рядами. Первый - это stackLayout и отображает диаграмму пончика, а второй - это stackLayout с видом прокрутки и кнопкой. При нажатии кнопки представление прокрутки переводится на ось Y для отображения элементов истории. Однако высота прокрутки не меняется. кто-нибудь знает почему ??

xaml file

<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

Если вы хотите показать ScrollView правильно, во-первых, вы должны, как сказал Пратик, установить RowDefinition Height="*" или установить <RowDefinition Height="auto"/>.

После этого я обнаружил, что ваше прокручиваемое изображение нельзя прокручивать, если Вы задаете c высоту для вашего 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.

Answer 2

Поскольку вы выделили только 200DP для Grid Row = 1 ScrollView будет иметь максимум 200 пикселей отображения. Если вам нужно, чтобы он занимал оставшееся пространство, установите Height на *

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