Question

My Windows 8 c#/xaml app has 3 big Grids with the Content inside. Each one fills exactly out the screen. This System works very well for my purpose, until the user snapps my app.

So is it possible to completly change the Grid definitions, or pull all the textboxes,buttons and listviews in a other “snapped” Grid? Last one is just an idea.

private void pageRoot_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        if (ApplicationView.Value == ApplicationViewState.Snapped)
        {
            ????
        }
        else
        {
            Grid1.Width = Windows.UI.Xaml.Window.Current.Bounds.Width;
            Grid2.Width = Windows.UI.Xaml.Window.Current.Bounds.Width;
            Grid3.Width = Windows.UI.Xaml.Window.Current.Bounds.Width;
        }

    }

Answer 1

This is a scenario where MVVM becomes incredibly handy. By creating two separate views, one each for snapped, filled, and full screen, you can swap between them relatively easy.

Your other option is to use the new FlipView control. There’s a great example of this in the Contoso Cookbook sample app that can be found in the Windows 8 Dev Camp in a Box.

http://bit.ly/win8RCdevcamp

Here’s the example code from the Contoso Hands-On Lab:

<FlipView.ItemTemplate>
    <DataTemplate>
        <UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates">
            <ScrollViewer x:Name="scrollViewer" Style="{StaticResource VerticalScrollViewerStyle}" Grid.Row="1">

                <!-- Vertical StackPanel for item-detail layout -->
                <StackPanel Orientation="Vertical" Margin="20,0,20,0">
                    <StackPanel Orientation="Vertical">
                        <TextBlock FontSize="20" FontWeight="Light" Text="{Binding Title}" TextWrapping="Wrap"/>
                        <Image x:Name="image" Width="260" Margin="0,12,0,40" Stretch="Uniform" Source="{Binding Image}" HorizontalAlignment="Left"/>
                    </StackPanel>
                    <StackPanel Orientation="Vertical">
                        <TextBlock FontSize="20" FontWeight="Light" Text="Ingredients" Margin="0,0,0,16"/>
                        <TextBlock FontSize="16" FontWeight="Light" TextWrapping="Wrap" Text="{Binding Ingredients, Converter={StaticResource ListConverter}}" />
                    </StackPanel>
                </StackPanel>
            </ScrollViewer>
        </UserControl>
    </DataTemplate>
</FlipView.ItemTemplate>

As you can see, for each FlipView, a different display state is referenced. I’d recommend checking out that hands-on lab for a more specific look at your situation, or this other sample that includes both HTML and XAML examples of the FlipView control:
http://code.msdn.microsoft.com/windowsapps/FlipView-control-sample-18e434b4