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>

我如何使用视觉状态管理器更改按钮，使它们现在朝向一个列（一个在另一个之上），而不是在方向从横向更改为纵向时连续排列？

由于

Answer 1

xaml代码

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

            }                                
        }

    }

如何在方向更改时更改网格布局

1 个答案: