Wie wird die gesamte Seite in XAML (UWP) vertikal verschoben, wenn die Bildschirmhöhe abnimmt?

Question

Ich arbeite an Windows Universal Platform App. Ich habe Frage in Bezug auf Bildschirmhöhe.Ich verwendete einen visuellen Zustand, um die Bildschirmbreite zu verwalten, so dass die App reagiert, aber wenn die Höhe des Bildschirms abnimmt, wird der Inhalt der Seite geschnitten und nicht richtig angezeigt.So habe ich nur Windows app überprüft und ich habe eine Idee über den Scroll-Viewer, aber ich habe keine Ahnung, wo ich einen Scroll-Viewer platziere, damit die App richtig funktioniert. Ich habe ein MasterDetail-Layout verwendet.

Ich habe einen Screenshot meiner App angehängt, damit Sie das Problem richtig verstehen und ich habe auch einen Code angehängt.

Code: Es ist ein Beispielcode nicht ganze 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> 

schlägt mich So wie Scroll-Betrachter zu definieren, so dass die Anwendung wird reagieren, wie pro Höhe.

Answer 1

Setzen Sie einfach alle Ihre Elemente in das ScrollView-Steuerelement, es wird automatisch geändert. Wenn Ihre Seite groß genug ist, gibt es keine Bildlaufleiste auf der Seite und wenn sie kleiner wird, wird sie automatisch aktiviert.

Beispiel:

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