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)
        {
        }

    }
}

おいおい実装していきます。今回はここまで。
Prev  Top  Next
inserted by FC2 system