CODEWITHSUNDEEP
c#xamlgridwindows-8microsoft-metro
Michael
Michael

Reputation: 747

Change Grid definition in snapped view

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

    }

Upvotes: 0

Views: 1508

Answers (2)

Jeff Blankenburg
Jeff Blankenburg

Reputation: 720

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

Upvotes: 1

Jeff Brand
Jeff Brand

Reputation: 5633

In your scenario I would navigate to a different page when I detected the change to snapped and load a page that has a snap optimized experience rather than trying to dynamically update the layout of a complex page.

Upvotes: 0

Related Questions