從擴展：differen屏幕和不同的看法

Question

從A擴展問題：different screen and different view

我想改變基於與屏幕尺寸的行和列的網格內容。例如，當屏幕寬度大於1000時，一行三個按鈕，當屏幕寬度大於600時，在兩行兩個按鈕中，一個文本框。在其他大小的三行三個文本框？如何實現它？

Answer 1

使用AdaptiveTriggers來更改行數和列數作爲控制

<VisualStateManager.VisualStateGroups> 
     <VisualStateGroup> 
      <VisualState> 
       <!-- VisualState to be triggered when window width is >=1000 effective pixels --> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="1000" /> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="TextBox1.Visibility" Value="Collapsed" /> 
<Setter Target="TextBox2.Visibility" Value="Collapsed" /> 
<Setter Target="TextBox3.Visibility" Value="Collapsed" /> 
        <Setter Target="myButton1.(Grid.Column)" Value="0" /> 
<Setter Target="myButton2.(Grid.Column)" Value="1" /> 
<Setter Target="myButton3.(Grid.Column)" Value="2" /> 
       </VisualState.Setters> 
      </VisualState> 
      <VisualState> 
       <!-- VisualState to be triggered when window width is >=600 and <1000 effective pixels --> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="600" /> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="myButton1.(Grid.Row)" Value="0" /> 
<Setter Target="myButton2.(Grid.Row)" Value="1" /> 
<Setter Target="myButton3.Visibility" Value="Collapsed" /> 
<Setter Target="TextBox1.(Grid.Row)" Value="2" /> 
<Setter Target="TextBox2.Visibility" Value="Collapsed" /> 
<Setter Target="TextBox3.Visibility" Value="Collapsed" /> 
       </VisualState.Setters> 
      </VisualState> 
<VisualState> 
       <!-- VisualState to be triggered when window width is >=0and <1000 effective pixels --> 
       <VisualState.StateTriggers> 
        <AdaptiveTrigger MinWindowWidth="0" /> 
       </VisualState.StateTriggers> 
       <VisualState.Setters> 
        <Setter Target="myButton1.(Grid.Row)" Value="0" /> 

<Setter Target="TextBox1.(Grid.Row)" Value="0" /> 
<Setter Target="TextBox2.(Grid.Row)" Value="1" /> 
<Setter Target="TextBox3.(Grid.Row)" Value="2" /> 
<Setter Target="myButton2.Visibility" Value="Collapsed" /> 
<Setter Target="myButton3.Visibility" Value="Collapsed" /> 
<Setter Target="myButton1.Visibility" Value="Collapsed" /> 
       </VisualState.Setters> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto" /> 
      <ColumnDefinition Width="Auto" /> 
    <ColumnDefinition Width="Auto" /> 
     </Grid.ColumnDefinitions> 

     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto" /> 
      <RowDefinition Height="Auto" /> 
<RowDefinition Height="Auto" /> 
<RowDefinition Height="Auto" /> 
     </Grid.RowDefinitions> 


     <Button x:Name="myButton1" Content="MyButton" Width="200" /> 
<Button x:Name="myButton2" Content="MyButton" Width="200" /> 
<Button x:Name="myButton3" Content="MyButton" Width="200" /> 
    <TextBox Text="TextBox content" Width="200" Height="20" x:Name="TextBox1"/> 
    <TextBox Text="TextBox content" Width="200" Height="20" x:Name="TextBox2"/> 
    <TextBox Text="TextBox content" Width="200" Height="20" x:Name="TextBox3"/> 

    </Grid>