Exception: DrawingSurfaceBackgroundGrid must be the first element to begin drawing - xaml

Question

I'm getting this exception when I run my app. I navigate to a XAML and the Debugger exits out with this message:
DrawingSurfaceBackgroundGrid must be the first element to begin
drawing.
On my MainPage.xaml, I navigate to this DirectX.xaml file when a button is clicked on MainPage.xaml. I made sure the DrawingSurfaceBackgroundGrid is the only control, so it's the FIRST element. Did I get the order wrong? (Also shown here are my App.xaml and MainPage.xaml)
DirectX.xaml
<phone:PhoneApplicationPage
x:Class="GameWp8Dx.Hud.Tests.DirectX"
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"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is placed-->
<DrawingSurfaceBackgroundGrid x:Name="DrawingSurfaceBackground" Loaded="DrawingSurfaceBackground_Loaded">
</DrawingSurfaceBackgroundGrid>
</phone:PhoneApplicationPage>
MainPage.xaml
<phone:PhoneApplicationPage
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"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
xmlns:local="clr-namespace:GameWp8Dx"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:ec="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"
x:Class="GameWp8Dx.MainPage"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True"
local:TiltEffect.IsTiltEnabled="True"
ApplicationBar="{StaticResource socialAppBar}"
>
<!--Transitions-->
<toolkit:TransitionService.NavigationInTransition>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardIn"/>
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardIn"/>
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot">
<phone:Panorama x:Name="test" HorizontalAlignment="Left" Height="686" VerticalAlignment="Top" Width="470"
Title="{Binding Path=LocalizedResources.ApplicationTitle, Source={StaticResource ResourceKey=LocalizedStrings}}" TitleTemplate="{StaticResource MainPageTitleTemplate}" HeaderTemplate="{StaticResource MainPageHeaderTemplate}">
App.xaml
<Application
x:Class="GameWp8Dx.App"
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">
<!--Application Resources-->
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="CustomStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>
<local:LocalizedStrings xmlns:local="clr-namespace:GameWp8Dx" x:Key="LocalizedStrings"/>
<shell:ApplicationBar x:Key="inGameAppBar" IsVisible="True" IsMenuEnabled="False">
<shell:ApplicationBarIconButton IconUri="/Assets/Icons/microphone.png" Text="record" Click="record_Click"/>
<shell:ApplicationBarIconButton IconUri="/Assets/Icons/questionmark.png" Text="info"/>
<shell:ApplicationBarIconButton IconUri="/Assets/Icons/map.png" Text="map" Click="map_Click"/>
</shell:ApplicationBar>
<shell:ApplicationBar x:Key="socialAppBar" IsVisible="True" IsMenuEnabled="False">
<shell:ApplicationBarIconButton IconUri="/Assets/Icons/appbar.twitter.png" Text="Tweet" Click="OnTweet"/>
<shell:ApplicationBarIconButton IconUri="/Assets/Icons/appbar.twitter.bird.png" Text="Tweet" Click="OnTweetSharp"/>
<shell:ApplicationBarIconButton IconUri="/Assets/Icons/appbar.facebook.png" Text="Share" Click="OnShare"/>
<shell:ApplicationBarIconButton IconUri="/Assets/Icons/appbar.facebook.heart.png" Text="Like" Click="OnLike"/>
</shell:ApplicationBar>
</ResourceDictionary>
</Application.Resources>
<Application.ApplicationLifetimeObjects>
<!--Required object that handles lifetime events for the application-->
<shell:PhoneApplicationService
Launching="Application_Launching" Closing="Application_Closing"
Activated="Application_Activated" Deactivated="Application_Deactivated"/>
</Application.ApplicationLifetimeObjects>
</Application>
UPDATE
Turns out TransitionFrame() is the culprit! Changed it back to PhoneApplicationPage() and DrawingSurfaceBackgroundGrid works without a hitch.
App.xaml.cs
private void InitializePhoneApplication()
{
if (phoneApplicationInitialized)
return;
// Create the frame but don't set it as RootVisual yet; this allows the splash
// screen to remain active until the application is ready to render.
RootFrame = new TransitionFrame();
//RootFrame = new PhoneApplicationFrame();
RootFrame.Navigated += CompleteInitializePhoneApplication;
// Handle navigation failures
RootFrame.NavigationFailed += RootFrame_NavigationFailed;
// Handle reset requests for clearing the backstack
RootFrame.Navigated += CheckForResetNavigation;
// Ensure we don't initialize again
phoneApplicationInitialized = true;
}

Answer 1

I'm just guessing here, but did you change the RootFrame to a special TransitionFrame? If so, I'm assuming that doesn't work well with DrawingSurfaceBackgroundGrid. You can probably change to a DrarwingSurface and resolve this issue. However DrawingSurface has an extra overdraw of all DirectX content shown on the screen due to an intermediary drawing layer used to interweave with XAML. So using DrawingSurface on full page D3D content will likely present performance problem (even more so on HD resolution screens).
To understand the problem , try thinking through what happens if you're navigating away from a page with DrawingSufaceBackgroundGrid? Should it animate? If so, you need XAML animations to be applied on D3D content and that's not supported for DrawingSurfaceBackgroundGrid. It is supported for DrawingSurface but at the heavy cost of having an intermediary drawing layer used to interweave with XAML.
I think in the tradeoff between bad DirectX perf and lacking page transitions, I'd opt out of having page transitions. That being said, different apps will have different compromises.
As another thought, you might be able to switch between a standard PhoneApplicationFrame and a TransitionFrame based on whether you need full screen D3D or not. I haven't tested something like that though.