Question

In my WP7 app, I have 2 pages, page1 and page2. When user navigates to page2, I want the page to be transparent, so that the page1 can be seen in the background. I am using following code in page2 , but not getting this effect.

<phone:PhoneApplicationPage 
x:Class="BoxIt.Page3"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
shell:SystemTray.IsVisible="True"
 Opacity="0">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Opacity="0" Background="Transparent">


    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Canvas HorizontalAlignment="Center" VerticalAlignment="Center" Width="400" Height="400">
            <TextBlock FontSize="30"  FontFamily="{StaticResource PoloBrush}" Canvas.Left="24" Canvas.Top="53" Height="30" Name="tb1" Text="" />
            <TextBlock FontSize="30" FontFamily="{StaticResource PoloBrush}" Canvas.Left="24" Canvas.Top="147" Height="30" Name="tb2" Text="" />
            <Button  ManipulationStarted="button1_ManipulationStarted" FontFamily="{StaticResource PoloBrush}" Canvas.Left="24" Canvas.Top="267" Content="Play again" Height="72" Name="button1" Width="179" />
            <Button  ManipulationStarted="button2_ManipulationStarted" FontFamily="{StaticResource PoloBrush}" Canvas.Left="209" Canvas.Top="267" Content="Menu" Height="72" Name="button2" Width="160" />
        </Canvas>
    </Grid>
</Grid>

Answer 1

You can’t do that. When you perform the navigation – Page 1 hides, Than the page 2 appears. So, you can’t see the first page.

You can show some transparent control over your Page 1 (as yogesh said).

Or else you can render page 1 to a bitmap and use it as background for Page 2.

But I think this is not a Metro style. I’d use other UI decision.