Size of the ScrollView not changing

Question

I have two rows in my grid on the page. The first one displays some info. In the second row I have another grid with two rows. First one is a stackLayout and displays a donut chart, and the second one is a stackLayout with a scrollview and the button. When the button gets clicked the the scroll view gets translated on the y axis to display the history items. However the height of the scrollview is not changing. does anyone know why??

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

If you want to show the ScrollView correctly, Firstly, you should as Prateek's said set the RowDefinition Height="*" or set <RowDefinition Height="auto"/>.

After that, I found your scrollview cannot be scrolled, if you set the specific height for your StackLayout in your ScrollView, your Scrollview cannot be scrolled. Because your display content's height is equal with your Scrollview, left content was coverred.

If I delete the Height of your StackLayout in your ScrollView, it could be scrolled. but the content is still not display completely. you can see this GIF(I change the last serveral items' name, such as History Item1, History Item2..).

I must decrease the height of the ScrollView, it could be displayed correctly.Here is code.

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

Here is running GIF.

Answer 2

Since you have allocated only 200DP for Grid Row=1 ScrollView will only have maximum of 200display pixels. If you need to make it occupy remaining space set the Height to *

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