Question

我有一个Windows Univeral应用程序。我有一个有两列的网格，在两列内部有一个文本框和按钮。我想根据屏幕大小更改Grid的列和行。当屏幕大小超过1000时，网格将有一行有两列。或者网格将有两行，一列。

Answer 1

使用AdaptiveTrigger更改子元素的Grid.Row或Grid.Column。

       <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="myButton.(Grid.Row)" Value="0" />
                    <Setter Target="myButton.(Grid.Column)" Value="1" />
                </VisualState.Setters>
            </VisualState>
            <VisualState>
                <!-- VisualState to be triggered when window width is >=0 and <1000 effective pixels -->
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="0" />
                </VisualState.StateTriggers>
                <VisualState.Setters>
                    <Setter Target="myButton.(Grid.Row)" Value="1" />
                    <Setter Target="myButton.(Grid.Column)" Value="0" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>

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

        <TextBox Text="TextBox content" Width="200" Height="20" />
        <Button x:Name="myButton" Content="MyButton" Width="200"  />

    </Grid>

更改行和列位置

1 个答案: