如何，当方向改变改变网格布局 [英] How to change a grid layout when orientation is changed

问题描述

我创建一个的win8 应用程序，我需要改变我的网格布局，所以一切在屏幕上适合当用户取向之间翻转。我明白我需要使用 VisualStateManager ，但我不明白的教程。如果我有这样的代码：

I'm creating a win8 app and I need to change the layout of my grid so everything fits on screen when the user flips between orientations. I understand I need to use VisualStateManager but I can't understand any tutorials. If I have this code:

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

我将如何使用视觉状态管理器更改按钮，这样他们在一列现在导向（一个在另一个的上面），而不是当定向从横向变为纵向行？

How would I use visual state manager to change the buttons so they are now orientated in a column (one above the other) instead of in a row when the orientation is changed to portrait from landscape?

感谢

推荐答案

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

            }                                
        }

    }

这篇关于如何，当方向改变改变网格布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！