当屏幕方向改变时，如何更改网格布局

Question

我正在制作一个 win8 应用程序，需要在用户翻转设备时更改网格布局以使所有内容适应屏幕。我理解我需要使用 VisualStateManager，但我无法理解任何教程。如果我有以下代码：

<Grid>
  <Button x:Name="button1"  Margin="188,73,286,0" VerticalAlignment="Top"/>
  <Button x:Name="button2"  Margin="236,73,238,0" VerticalAlignment="Top"/>
  <Button x:Name="button3"  Margin="284,73,190,0" VerticalAlignment="Top"/>
</Grid>

当方向从横向变为纵向时，我如何使用视觉状态管理器来更改按钮的排列方式，使它们变成一列（一个在另一个上面）而不是一行？

谢谢。

- Ralt

Answer 1

xaml code

<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" SizeChanged="Page_SizeChanged_1">
<Grid  Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Grid x:Name="FullScreenLandscape">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Button Content="Button1" HorizontalAlignment="Center" VerticalAlignment="Center"></Button>
        <Button Content="Button2" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center"></Button>
        <Button Content="Button3" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center"></Button>
    </Grid>
    <Grid x:Name="Snapped">
        <Grid.RowDefinitions>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>
        <Button Content="Button1" HorizontalAlignment="Center" VerticalAlignment="Center"></Button>
        <Button Content="Button2" Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"></Button>
        <Button Content="Button3" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center"></Button>
    </Grid>
</Grid>

C# 代码

  private void Page_SizeChanged_1(object sender, SizeChangedEventArgs e)
    {
        switch (ApplicationView.Value)
        {
            case ApplicationViewState.FullScreenLandscape:
                VisualStateManager.GoToState(this, "FullScreenLandscape", false);
                Snapped.Visibility = Visibility.Collapsed;
                break;
            case ApplicationViewState.Snapped:
                VisualStateManager.GoToState(this, "Snapped", false);
                FullScreenLandscape.Visibility = Visibility.Collapsed;
                Snapped.Visibility = Visibility.Visible;
                break;
            default:
                return;
        }
    }

另一种方法

XAML 代码

   <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Grid x:Name="landscape">      
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>            
      <TextBox x:Name="t1" Grid.Column="0" FontSize="24"  Height="100"/>
        <TextBox x:Name="t2" Grid.Column="1" FontSize="24"  Height="100"/>
        <TextBox x:Name="t3" Grid.Column="2" FontSize="24"  Height="100"/>
    </Grid>
    <Grid x:Name="snap" Visibility="Collapsed"> 
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
    </Grid>
</Grid>

C# 代码

  private void Page_SizeChanged_1(object sender, SizeChangedEventArgs e)
    {

        if (Windows.UI.ViewManagement.ApplicationView.Value == Windows.UI.ViewManagement.ApplicationViewState.FullScreenLandscape)
        {              
            landscape.Visibility = Windows.UI.Xaml.Visibility.Visible;
            snap.Visibility = Windows.UI.Xaml.Visibility.Collapsed;                     
            t1.SetValue(Grid.ColumnProperty, 0);
            t2.SetValue(Grid.ColumnProperty, 1);
            if (t1.Parent != landscape)
            {
                snap.Children.Remove(t1);
                snap.Children.Remove(t2);
                landscape.Children.Add(t1);
                landscape.Children.Add(t2);
            }

        }
        else if(Windows.UI.ViewManagement.ApplicationView.Value == Windows.UI.ViewManagement.ApplicationViewState.Snapped)
        {
            landscape.Children.Remove(t1);
            landscape.Children.Remove(t2);
            landscape.Visibility = Windows.UI.Xaml.Visibility.Collapsed;
            snap.Visibility = Windows.UI.Xaml.Visibility.Visible;
            t1.SetValue(Grid.RowProperty, 0);
            t2.SetValue(Grid.RowProperty, 1);
            if (t1.Parent != snap)
            {
                landscape.Children.Remove(t1);
                landscape.Children.Remove(t2);
                snap.Children.Add(t1);
                snap.Children.Add(t2);

            }                                
        }

    }

- Heena

---

非常感谢，现在理解起来简单多了。 - Ralt

非常欢迎您，并尽量避免在设计中使用边距。 - Heena