Sliverlight 画面遷移
ナビゲーションに移動
検索に移動
Sliverlight 画面遷移
Sliverlight | VisualStudio | C Sharp |
- http://code.msdn.microsoft.com/10-C-Silverlight-b4de09ed
- Silverlight のようなプラグインを使って Web ページに組み込まれたアプリケーションは、その状態に関わらず URL が変わりません
- Silverlight では、ナビゲーション フレームワークという仕組みにより、アプリケーションに配置した複数のページに個別の URL (より広い意味での URI) を与え、ブラウザーの「戻る」「進む」ボタンで切り替えたり、ブックマークが使えるようになります
ナビゲーション フレームワークを使う
- プロジェクトを右クリックして [参照の追加] を選び、[参照の追加] ダイアログ ボックスの [.NET] タブから「System.Windows.Controls.Navigation」を選んで、[OK] ボタン
手順
ページフォルダの作成
- ナビゲーションは、Frame コントロールと Page コントロールを組み合わせて実装
- プロジェクトを右クリックして [追加] - [新しいフォルダー] を選び、「Views」という名前のフォルダーを追加
- このフォルダーに、新しいページを作成していく
ページの作成
- Views フォルダーを右クリックして [追加] - [新しい項目] を選び、[Silverlight ページ] を選んで、という名前の新しいページを作成
ハイパーリンクボタンの設置
- ハイパーリンクボタンを設置し、追加したページへのURIを指定する
<HyperlinkButton Content="Test" Name="hyperlinkButton1" NavigateUri="/Views/Test.xaml" />
ページを表示する、Frameの設置
<navigation:Frame />
実行
- この状態で、リンクをクリックすると、Frameにページが読み込まれる
URIマッピング
- URIの指定が長くなるような場合、簡潔な表記を割り当てられる
<UserControl.Resources> <uriMapper:UriMapper x:Key="uriMapper"> <uriMapper:UriMapping Uri="" MappedUri="/Views/HomePage.xaml" /> <uriMapper:UriMapping Uri="Home" MappedUri="/Views/HomePage.xaml" /> <uriMapper:UriMapping Uri="Info" MappedUri="/Views/InfoPage.xaml" /> <uriMapper:UriMapping Uri="About" MappedUri="/Views/AboutPage.xaml" /> </uriMapper:UriMapper> </UserControl.Resources> <Grid x:Name="LayoutRoot"> : <StackPanel Grid.Row="0" Orientation="Horizontal" Background="LightCyan"> <HyperlinkButton Content="Home" NavigateUri="Home" /> <HyperlinkButton Content="Info" NavigateUri="Info" /> <HyperlinkButton Content="About" NavigateUri="About" /> </StackPanel> <navigation:Frame Grid.Row="1" Background="LightYellow" UriMapper="{StaticResource uriMapper}"/> </Grid>
URIマッピングによりパラメータを渡す
- URI マッピングでは、単純に文字列を置き換えるだけでなく、パラメーターを渡すこともできます
パラメータを渡す
- Uri プロパティとして「/」を指定した後に「{}」で囲んだ引数を、マッピング先の MappedUri に渡せます
: <uriMapper:UriMapping Uri="About" MappedUri="/Views/AboutPage.xaml" /> <uriMapper:UriMapping Uri="/{arg}" MappedUri="/Views/InfoPage.xaml?arg={arg}" /> </uriMapper:UriMapper>
- これは「/」の直後に渡されたパラメーターを「/Views/InfoPage.xaml?arg=」の後ろに追加してナビゲーションするという意味です
パラメータを受け取る
- OnNavigateTo メソッドを次のように記述
protected override void OnNavigatedTo(NavigationEventArgs e) { if (NavigationContext.QueryString.ContainsKey("arg")) { textInfo.Text = "Information: " + NavigationContext.QueryString["arg"]; } else { textInfo.Text = "Information: (empty)"; } }
ChildWindowコントロール
- http://www.atmarkit.co.jp/fdotnet/chushin/silverlight3develop_01/silverlight3develop_01_03.html
- 呼び出し元となる親ウィンドウの上に表示される子ウィンドウ
- ChildWindowコントロールが親ウィンドウの上に表示される場合、親ウィンドウはブロックされ、ChildWindowコントロールは親ウィンドウを操作することができないモーダルなウィンドウとして表示
手順
ChildWindowを追加
- フォルダーを右クリックして [追加] - [新しい項目] を選び、[Silverlight 子ウィンドウ] を選択
- ChildWindowコントロールはファイルそのものがChildWindowコントロールとして定義されています(通常Silverlightで画面を定義する場合はUserControlコントロールとして定義されます)
呼び出す
ChildWindow1 childWindow = new ChildWindow1(); childWindow.Show();
ブラウザーウインドウにSilverlightを表示
- HtmlPage.Window.Navigateを使う
- コードによりページを遷移するには、Webブラウザのwindowオブジェクトを示すHtmlWindowクラス(System.Windows.Browser名前空間)のオブジェクトを取得し、そのNavigateメソッドを使用する
手順
../index/index.htmlへ移動
Uri linkUri = new Uri("../index/index.html", UriKind.Relative); HtmlPage.Window.Navigate(linkUri, "_self");
Googleを別ウィンドウで開く
Uri linkUri = new Uri("http://google.co.jp/"); HtmlPage.Window.Navigate(linkUri, "_blank");
通信方法
System.Windows.Browser名前空間のクラスを利用して、親(opener)側のSilverlightに定義されたメソッドを小画面のSilverlightからHTML(Javascript)経由で動作
Openerの取得
HtmlPage.Window.GetProperty("opener");
ローカルメッセージ通信を利用
- クライアントにダウンロードされたSilverlightは、System.Windows.Messaging名前空間のクラスを利用してメッセージのやり取りを行うことができます
- http://msdn.microsoft.com/ja-jp/library/dd833063(v=vs.95).aspx
© 2006 矢木浩人