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

【问题标题】：Expanded from: differen screen and different view扩展自：不同的屏幕和不同的视图
【发布时间】：2016-03-28 18:12:36
【问题描述】：

来自different screen and different view的扩展问题

我想根据屏幕大小更改行和列的网格内容。比如屏幕宽度大于1000时一排三个按钮，当屏幕宽度大于600时，两排两个按钮，一个文本框。在其他大小为三行三个文本框？如何实现？

【问题讨论】：

【解决方案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>

【讨论】：

但是我在运行您的代码时遇到了这个异常：异常：同一包含故事板中的多个动画不能针对单个元素上的相同属性。