在 Silverlight/Wp7 中单击时，如何从容器中弹出控件以使其全屏显示？

Question

所以我有一个全景控件，PanoramaItems 使用以下模板以编程方式添加到控件中。

<UserControl>
    <Grid x:Name="LayoutRoot">
            <controls:PanoramaItem Name="sitePanoramaItem" Header="{Binding Name}">
            <Controls:DockPanel VerticalAlignment="Stretch">
                <StackPanel Orientation="Horizontal" Margin="0,10,0,0" Controls:DockPanel.Dock="Top">
                    <Image Source="../Images/action.png" Width="64"  />
                    <TextBlock Text="{Binding Stats, Mode=TwoWay}" FontSize="45" Margin="15,0,0,0" />
                </StackPanel>
                <Grid x:Name="graphCanvas" HorizontalAlignment="Stretch" Margin="10,10,10,10">    </Grid>
            </Controls:DockPanel>
        </controls:PanoramaItem>
    </Grid>
</UserControl>

当我单击graphCanvas 时，我想做的是将graphCanvas 弹出并全屏显示，然后当我再次单击时将其恢复到原来的位置。我一直在这个网站和谷歌上，找不到任何与我正在寻找的东西相似的东西。

我仍然希望保留全景控制功能，以便 graphCanvas 仍然是唯一可见的，但您可以循环浏览它们。目前我的工作是从DockPanel 中删除网格并将其直接放在LayoutRoot 中，同时使sitePanoramaItem 折叠。但是，它不是全屏的，因为全景名称仍然可见（我想我也可以隐藏它......）当我把 graphCanvas 放回 DockPanel 时，画布的大小都搞砸了。

我希望有更简单的方法。

有可能吗？

Answer 1

可以创建您描述的 UI，但这并不简单。您在代码中将其删除并将其添加到 LayoutRoot 并使全景图隐藏，从而走在正确的轨道上。但是，您必须自己编写滚动行为代码，这将非常棘手 - 尤其是让它感觉像全景图一样。

您可以尝试的一个技巧实际上是在您的全景图顶部放置一个 PivotControl，并使其默认折叠。还要编辑它的模板以删除所有默认内容，例如：删除标题控件、将边距设置为 0 等）。然后，当您想要全屏显示时，您可以从全景项目中删除所有 graphCanvases，并将它们添加到 PivotControl 中的新 PivotItems。然后隐藏全景图并显示枢轴。这将为您提供免费的滚动功能和全屏的错觉。

说了这么多，我不确定我会推荐这个。更常见的方法是在用户选择一个项目时导航到另一个页面并在那里处理全屏方面（可能再次使用 Pivot 控件进行滚动）。当您想离开“全屏”模式时，只需导航回第一页。一方面，使用这种方法处理全屏状态的墓碑会容易得多。

Answer 2

您可以尝试将 graphCanvas 设为 Page 并将其放入不同的 XAML。然后在您现在拥有 graphCanvas 的同一位置添加一个框架（例如，将其命名为 InnerFrame），并使用 InnerFrame 导航到该页面。单击框架时，您将使用应用程序的 RootFrame 导航到您的 graphCanvas 页面。当您决定关闭它时，只需使用 RootFrame 导航回来。

希望它足够清楚:)

编辑： WP7 中的导航与 Silverlight 4 中的标准导航非常相似，但限制性更强。只需像这样在您的 XAML 中抛出一个 PhoneApplicationFrame：

<phone:PhoneApplicationFrame x:Name="Frame" />

这与 Silverlight 框架基本相同。您创建的所有页面默认都继承自PhoneApplicationPage，因此它们可以在框架中显示而无需任何更改。

您的整个应用程序实际上是在 PhoneApplicationFrame 上运行的。如果你看一下你的 App 类，你会看到：

public PhoneApplicationFrame RootFrame { get; private set; }

Here's the MSDN documentation for the navigation system on WP7