anderen Bildschirm und andere Ansicht

Question

Ich möchte eine andere Ansicht mit anderen Bildschirm in UWP haben, Zum Beispiel habe ich ein Raster mit drei Spalten in UWP App, in den drei Spalten hat es zwei Textfelder und Schaltfläche oder andere Kontrolle. Ich möchte die Spalte und Zeile des Rasters basierend auf der Bildschirmgröße ändern. Wenn die Bildschirmgröße mehr als 1000 beträgt, hat das Raster eine Zeile mit drei Spalten. wenn es mehr als 600 ist, wird es zwei Reihen haben, oder es wird drei Reihen haben.

Answer 1

Wenn Sie in der UWP-App unterschiedliche Inhalte/Ansichten basierend auf der unterschiedlichen Bildschirmgröße anzeigen möchten, können Sie die adaptive Benutzeroberfläche mit der implementieren.

Die AdaptiveTrigger Klasse hat nur zwei Parameter: MinWindowWidth und MinWindowHeight. Diese zwei Parameter ermöglichen es uns, den Status des Fensters basierend auf der unterschiedlichen Bildschirmgröße zu wechseln.

Für detaillierte Informationen überprüfen Sie bitte: https://blogs.msdn.microsoft.com/cdndevs/2015/06/26/uwp-new-features-of-visual-state-manager-part-1/.

Um Ihr Szenario zu implementieren, ich das folgende Beispiel erstellt haben, versuchen Sie es zu verweisen:

<Grid Background="Gray"> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup> 
      <VisualState x:Name="ThreeColumns"> 
       <VisualState.Setters> 
        <Setter Target="MyTextBox1.(Grid.Column)" Value="0"></Setter> 
        <Setter Target="MyTextBox1.(Grid.Row)" Value="0"></Setter> 
        <Setter Target="MyTextBox2.(Grid.Column)" Value="1"></Setter> 
        <Setter Target="MyTextBox2.(Grid.Row)" Value="0"></Setter> 
        <Setter Target="MyButton.(Grid.Column)" Value="2"></Setter> 
        <Setter Target="MyButton.(Grid.Row)" Value="0"></Setter> 
        <Setter Target="MyButton.Content" Value="This is one Row"></Setter> 
       </VisualState.Setters> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="1000"></AdaptiveTrigger> 
       </VisualState.StateTriggers> 
      </VisualState> 
      <VisualState x:Name="TwoColumns"> 
       <VisualState.Setters> 
        <Setter Target="MyTextBox1.(Grid.Column)" Value="0"></Setter> 
        <Setter Target="MyTextBox2.(Grid.Row)" Value="0"></Setter> 
        <Setter Target="MyTextBox1.(Grid.Column)" Value="1"></Setter> 
        <Setter Target="MyTextBox2.(Grid.Row)" Value="0"></Setter> 
        <Setter Target="MyButton.(Grid.Column)" Value="0"></Setter> 
        <Setter Target="MyButton.(Grid.Row)" Value="1"></Setter> 
        <Setter Target="MyButton.Content" Value="This is Two Row"></Setter> 
       </VisualState.Setters> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="600"></AdaptiveTrigger> 
       </VisualState.StateTriggers> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 

    <Grid Height="500"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*"></RowDefinition> 
      <RowDefinition Height="*"></RowDefinition> 
      <RowDefinition Height="*"></RowDefinition> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*"></ColumnDefinition> 
      <ColumnDefinition Width="*"></ColumnDefinition> 
      <ColumnDefinition Width="*"></ColumnDefinition> 
     </Grid.ColumnDefinitions> 
     <TextBox Name="MyTextBox1" Grid.Row="0" Height="50"></TextBox> 
     <TextBox Name="MyTextBox2" Grid.Row="1" Height="50"></TextBox> 
     <Button Name="MyButton" Background="Red" Content="This is Three Row" Grid.Row="2" Height="50"></Button> 
    </Grid> 

Das Ergebnis: