在捕捉视图中更改网格定义

时间:2012-08-24 16:44:53

标签: c# xaml grid windows-8 microsoft-metro

我的Windows 8 c#/ xaml应用程序有3个内容很大的网格。每一个都填满了屏幕。这个系统非常适合我的目的,直到用户抢购我的应用程序。

那么可以完全更改网格定义,或者将所有文本框,按钮和列表视图拉到另一个“快照”网格中吗?最后一个只是一个想法。

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

    }

2 个答案:

答案 0 :(得分:1)

这是MVVM变得非常方便的场景。通过创建两个单独的视图,每个视图用于捕捉,填充和全屏,您可以相对容易地在它们之间进行切换。

您的另一个选择是使用新的FlipView控件。在Contoso Cookbook示例应用程序中有一个很好的例子,可以在Windows 8 Dev Camp in a Box中找到。

http://bit.ly/win8RCdevcamp

以下是Contoso动手实验室的示例代码:

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

如您所见,对于每个FlipView,引用了不同的显示状态。我建议您查看动手实验室,以便更具体地了解您的情况,或者包含FlipView控件的HTML和XAML示例的其他示例:  http://code.msdn.microsoft.com/windowsapps/FlipView-control-sample-18e434b4

答案 1 :(得分:0)

在您的方案中,当我检测到要更改为快照并加载具有快照优化体验的页面而不是尝试动态更新复杂页面的布局时,我会导航到不同的页面。