How to change a grid layout when orientation is changed

问题

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?

Thanks

回答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# code

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

Another Method

xaml code

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

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

            }                                
        }

    }

来源：https://stackoverflow.com/questions/23010028/how-to-change-a-grid-layout-when-orientation-is-changed

标签

wpf

xaml

windows-8