SilverlightとXNAを融合させる
まずは、SilverlightとXNAを同一の画面で融合させる方法を動画でご紹介します。この動画では、Silverlight/XNAプロジェクトを新規に作成し、GamePage内で（「GamePage.xaml」と「GamePage.xaml.cs」に対して）SilverlightとXNAを融合させる処理を追記しています。
上記の動画から見て取れるように、少ないコード量でSilverlightとXNAを融合させることが可能となっています。それでは実施に、上記の動画の手順に沿って、SilverlightとXNAを融合させる手順を解説します。
SilverlightでUIを構築する
まず、従来のSilverlightアプリケーション開発と同様に、XAMLに対してUIコントロールを配置します。上記の動画では、「GamePage.xaml」に対して適当なUIを構築するため、「MainPage.xaml」のUIを複製しています。このようにして変更した「GamePage.xaml」の内容を以下に掲載します。
<phone:PhoneApplicationPage
x:Class="SlXnaApp1.GamePage"
…中略…>
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="マイ アプリケーション" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="ページ名" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Button Height="100" Content="ゲームのページに変更" />
</Grid>
</Grid>
</phone:PhoneApplicationPage>
ただし、上記の手順を実施しただけでは、UIは自動的に描画されません。なぜなら、前章で紹介したGraphicsDevice.SetSharingMode()メソッドにより、Silverlightによる描画が無効（XNAによる描画が有効）となっているからです。
それでは、Silverlight/XNAを利用している画面において、SilverlightのUIを画面に表示するためには、どのようにすればよいのでしょうか？ 答えは至ってシンプルで、SilverlightのUIをXNAで描画すればよいのです。Windows Phone SDK 7.1には、SilverlightのUIをXNAで描画するためのユーティリティとして、UIElementRendererクラスが用意されています。
