farklı ekran ve farklı görünüm

Question

örneğin ben iki metin kutularının ve düğme ya da başka kontrol sahip üç sütun içinde UWP uygulamasında üç sütun ile bir kılavuz bilgisi, UWP farklı ekran ile farklı bir görünüme sahip istiyoruz. Ekranın boyutuna göre Kılavuz'un sütununu ve satırını değiştirmek istiyorum. Ekran boyutu 1000'den fazla olduğunda, ızgara üç sütun ile bir satır olacaktır. 600'den fazla olduğunda iki sıra olacak ya da üç sıra olacak.

Answer 1

UWP uygulamasında, farklı ekran boyutuna göre farklı içerik/görünüm göstermek istiyorsanız, adaptif kullanıcı arayüzünü uygulamak için AdaptiveTrigger kullanabiliriz.MinWindowWidth ve MinWindowHeight:

AdaptiveTrigger sınıf yalnızca iki parametresi vardır. Bu iki parametre, farklı ekran boyutuna bağlı olarak pencerenin durumunu değiştirmemize izin verir.

detaylı bilgi için lütfen kontrol edin: https://blogs.msdn.microsoft.com/cdndevs/2015/06/26/uwp-new-features-of-visual-state-manager-part-1/. senin senaryoyu uygulamak için

, ben şu örneği oluşturduk, başvurmak için deneyin:

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

sonucu: