Question

So I have a Panorama control and the PanoramaItems are programmatically added to the control using the following template.

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

When I click on graphCanvas what I’d like to do is sorta pop the graphCanvas out and display that fullscreen then when I click again restore it to where it was. I’ve been all over this site and Google and can’t find anything similar to what I’m looking for.

I would still like to maintain the Panorama control functionality so that the graphCanvas is still the only one visible but you can cycle through them. Currently I have it sorta working in that I remove the Grid from the DockPanel and put it directly in the LayoutRoot while making the sitePanoramaItem collapsed. However, it’s not fullscreen as the Panorama name is still visible (I guess I could hide that as well…) When I put the graphCanvas back int he DockPanel the size of the canvas is all screwed up.

I was hoping there was a simpler way.

Is it even possible?

Answer 1

You can try making the graphCanvas a Page and putting it in a different XAML. Then add a frame (name it InnerFrame for example) in the same place where you have the graphCanvas right now and navigate to that page with InnerFrame. When the frame is clicked, you navigate with the RootFrame of the app to your graphCanvas page. When you decide to close it, just navigate back with the RootFrame.

Hope it’s clear enough 🙂

Edit:
Navigation in WP7 works very similar as the standard navigation in Silverlight 4, but it’s a bit more restrictive. Just throw a PhoneApplicationFrame in your XAML like this:

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

This is basically the same as a Silverlight frame. All the pages you create inherit from PhoneApplicationPage by default, so they can be showed in a frame without any changes.

Your whole application actually runs on a PhoneApplicationFrame. If you take a look at your App class you will see this:

public PhoneApplicationFrame RootFrame { get; private set; }

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