Expanded from: differen screen and different view

问题

A expanded question from: different screen and different view

I want to change the grid content of the row and column based on the screen size. For example when the screen width is more than 1000 one row with three buttons,when the screen width is more than 600, in two row two buttons, one textbox. in others size in three row three textboxes? How to achieve it?

回答1:

Use AdaptiveTriggers to change the row and column numbers as well visibility of controls

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

来源：https://stackoverflow.com/questions/36255941/expanded-from-differen-screen-and-different-view