Expanded from: differen screen and different view

Question

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 scr

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