Microsoft Visual Web Developer 2008 Express Edition Silverlight 3 |
■Silverlightでページ切り替えとか | Prev Top Next |
簡単なゲーム作成します。ゲームを作成しながら色々実装していきます。
今回は画面デザインをXAMLファイルで設計するので、ファイルを追加します。
ソリューションエクスプローラー
前回追加した CodeFile.cs ファイルですが、削除します。
で App1.xaml と Page1.xaml と Page2.xaml を追加します。このxamlファイルで画面デザインを設計します。
アプリケーション全体を管理する App1.xaml と2つの画面を使用するので Page1.xaml と Page2.xaml を追加します。
---App1.xaml.cs---
using System; using System.Collections.Generic; using System.Linq; using System.Windows; using System.Net; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; namespace SilverlightTutrial { public partial class App1 : Application { public App1() { this.Startup += this.Application_Startup; this.Exit += this.Application_Exit; this.UnhandledException += this.Application_UnhandledException; InitializeComponent(); } // Silverlightの開始時にコールされるメソッド private void Application_Startup(object sender, StartupEventArgs e) { // Page1 クラスを最初に表示する this.RootVisual = new Page1(); } private void Application_Exit(object sender, EventArgs e) { } private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e) { // アプリケーションがデバッガーの外側で実行されている場合、ブラウザーの // 例外メカニズムによって例外が報告されます。これにより、IE ではステータス バーに // 黄色の通知アイコンが表示され、Firefox にはスクリプト エラーが表示されます。 if (!System.Diagnostics.Debugger.IsAttached) { // メモ : これにより、アプリケーションは例外がスローされた後も実行され続け、例外は // ハンドルされません。 // 実稼動アプリケーションでは、このエラー処理は、Web サイトにエラーを報告し、 // アプリケーションを停止させるものに置換される必要があります。 e.Handled = true; Deployment.Current.Dispatcher.BeginInvoke(delegate { ReportErrorToDOM(e); }); } } private void ReportErrorToDOM(ApplicationUnhandledExceptionEventArgs e) { try { string errorMsg = e.ExceptionObject.Message + e.ExceptionObject.StackTrace; errorMsg = errorMsg.Replace('"', '\'').Replace("\r\n", @"\n"); System.Windows.Browser.HtmlPage.Window.Eval("throw new Error(\"Unhandled Error in Silverlight Application " + errorMsg + "\");"); } catch (Exception) { } } } }App1クラス はアプリケーション全体を制御するクラスです。内容は自動生成されたコードとほとんど同じで、 Application_Startupメソッド 内だけ変更しています。 このメソッドはアプリケーション起動時にコールされます。ここでは Page1クラス を起動時に表示するページとしますので Page1クラスのインスタンスを Application::RootVisual に設定します。
---Page1.xaml---
<navigation:Page x:Class="SilverlightTutrial.Page1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" d:DesignWidth="640" d:DesignHeight="480" Title="Page1 Page"> <navigation:Frame x:Name="frmPage1" JournalOwnership="OwnsJournal"> <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <TextBlock x:Name="textBlock" Text="すぺーすいんべーだー" FontSize="56" FontWeight="Bold" > <TextBlock.Foreground> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Color="#FFFF1900" Offset="0"/> <GradientStop Color="#FFFFFF0F" Offset="0.5"/> <GradientStop Color="#FF001EFF" Offset="1"/> </LinearGradientBrush> </TextBlock.Foreground> </TextBlock> <Button x:Name="nextButton" FontSize="30" Content="START" Width="200" Height="60" Canvas.Left="220" Canvas.Top="280" Click="start_Click" /> <Button x:Name="endButton" FontSize="30" Content="EXIT" Width="200" Height="60" Canvas.Left="220" Canvas.Top="350" Click="end_Click"/> </Canvas> </navigation:Frame> </navigation:Page>Page1 の画面デザインです。 <navigation:Frame>タグのJournalOwnership属性を "OwnsJournal" に設定すると履歴が残らないようになります。 Silverlight上でページ切り替えた後、ブラウザ上の戻るボタンをクリックしてもとのページに戻るとエラーになるので 履歴が残らないようにします。
<TextBlock>タグ では色々やってますが、いろいろいじってみればわかると思います。
<Button>タグ の Click属性 でイベントハンドラーのメソッド名を設定しています。
イベントハンドラーの実装は Page1.xaml.cs 内で記述します。
なおメソッド上にマウスカーソルを当てて右クリックするとポップアップメニューが表示されます。
このポップアップメニューの「イベントハンドラーへ移動」を選択すると、メソッドの実装部へ移動し、
未作成の場合は自動作成してくれます。
---Page1.xaml.cs---
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using System.Windows.Navigation; using System.Windows.Browser; namespace SilverlightTutrial { public partial class Page1 : Page { public Page1() { InitializeComponent(); } // ユーザーがこのページに移動したときに実行されます。 protected override void OnNavigatedTo(NavigationEventArgs e) { } // ENDボタン をクリックしたときにコールされるメソッド private void end_Click(object sender, RoutedEventArgs e) { // javascript によりウィンドウを閉じる HtmlPage.Window.Eval("var w=window.open('','_top'); w.close()"); } // STARTボタン をクリックしたときにコールされるメソッド private void start_Click(object sender, RoutedEventArgs e) { // ページ遷移を行う frmPage1.Navigate(new Uri("/Page2.xaml", UriKind.Relative)); } } }Page1クラスの ロジック部分です。マウスクリックにより発生するイベントハンドラーを実装してます。 HtmlPage.Window.Evalメソッド は文字列の javascript コードを実行します。 ここではメッセージを表示しないでウィンドウを閉じるためのコードを実行しています。
frmPage1.Navigateメソッド はフレーム内のページ遷移を行います。 frmPage1オブジェクトは Page1.xaml で設定した <navigation:Frame>タグ の名称です。 ここではPage2.xamlにページ遷移するようにします。 Uriクラスの第1引数にジャンプ先のページを指定し、第2引数に相対パスか、絶対パスかを指定します。
---Page2.xaml---
<navigation:Page x:Class="SilverlightTutrial.Page2" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" d:DesignWidth="640" d:DesignHeight="480" Title="Page2 Page"> <TextBlock x:Name="textBlock" Text="ゲーム画面" FontSize="12" /> </navigation:Page>ゲーム画面です。まだなんにも実装してません。
---Page2.xaml.cs---
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using System.Windows.Navigation; namespace SilverlightTutrial { public partial class Page2 : Page { public Page2() { InitializeComponent(); } // ユーザーがこのページに移動したときに実行されます。 protected override void OnNavigatedTo(NavigationEventArgs e) { } } }おいおい実装していきます。今回はここまで。