How to Scroll whole page vertically in XAML (UWP) when screen height getting decrease?

I am working on Windows Universal Platform app. I have query regarding Screen height.I used a Visual state to manage screen width so the app is responsive but when the height of the screen is decrease that time the content of page is cut and not properly display.So i just checked windows app and get a idea about the Scroll Viewer but i do not have idea where i place a scroll viewer so the app will properly work.I used a MasterDetail layout.

I attached a screenshot of my app so you will properly understand the issue and i also attached a code.

Code:It is a sample code not whole code.

<Grid Background="White" x:Name="maingrid">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="PageSizeStatesGroup"
                          CurrentStateChanged="OnCurrentStateChanged">
            <VisualState x:Name="MediumState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720"  />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MasterColumn.Width" Value="350" />
                    <Setter Target="DetailColumn.Width" Value="*"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="WideState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="1024"  />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MasterColumn.Width" Value="600" />
                    <Setter Target="DetailColumn.Width" Value="*"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="MobileState">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="320"  />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="MasterColumn.Width" Value="0"/>
                    <Setter Target="DetailColumn.Width" Value="*"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
     </VisualStateManager.VisualStateGroups>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="MasterColumn" Width="600" />
            <ColumnDefinition x:Name="DetailColumn"  Width="*" />
        </Grid.ColumnDefinitions>

        <StackPanel x:Name="titlePanel" Grid.Row="0" Grid.Column="0">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <Image x:Name="img_head" Grid.Column="0"  Stretch="Fill" Height="47" Margin="0,0,10,0"/>

                <StackPanel x:Name="Logo_txt_pnl" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Left">
                    <TextBlock x:Name="Customer_title" .... VerticalAlignment="Center"  HorizontalAlignment="Center"/>
                </StackPanel>

                <Image Grid.Row="0"  x:Name="line_dashboard" Grid.ColumnSpan="2"   VerticalAlignment="Bottom" Height="8" />
            </Grid>
        </StackPanel>

        <StackPanel Name="life_time_pnl" Grid.Row="1" Grid.Column="0">
            <!--Code for the grid and all-->
        </StackPanel>

        <StackPanel x:Name="sales_report_pnl" Grid.Row="0" Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
            <!--coding here-->
        </StackPanel>

        <StackPanel x:Name="stackReport"  Grid.Row="1" Grid.Column="1" VerticalAlignment="Top" >
            <!--Report Coding here-->
        </StackPanel>

        <StackPanel x:Name="stackLineChart" Grid.Row="1" Grid.Column="1" VerticalAlignment="Center" Margin="50,0,20,50"  HorizontalAlignment="Stretch">
            <!--Chart coding-->
        </StackPanel>

        <StackPanel x:Name="chartReportpnl" Orientation="Vertical" Grid.Row="1" Grid.Column="1"  VerticalAlignment="Bottom" Margin="0,0,0,2">
            <!--Report as all-->
        </StackPanel>

    </Grid>
</Grid>

So suggest me how to define scroll viewer so the app will responsive as per height.

Solution

Just put all your elements to ScrollView control, it's automatically changing, so when your page is large enough, there's no scrollbar on the side and when it becomes smaller, it's autmatically turn on.

Example:

<ScrollView Grid.Row="1" Grid.Column="0" >
   <StackPanel Name="life_time_pnl">
      <!--Code for the grid and all-->
   </StackPanel>
</ScrollView>

<ScrollView Grid.Row="0" Grid.Column="1">
   <StackPanel x:Name="sales_report_pnl" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
      <!--coding here-->
   </StackPanel>
</ScrollView>