扩展自：不同的屏幕和不同的视图

Question

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