エクスポート (0) 印刷
すべて展開
この記事は翻訳者によって翻訳されたものです。 記事の文章にポインターを重ねると、原文のテキストが表示されます。
訳文
原文

ナビゲーションの概要

Silverlight

このトピックでは、ナビゲーションに関する一般的なシナリオについて説明し、アプリケーションにナビゲーション機能を追加する方法を示します。

このトピックは、次のセクションで構成されています。

Silverlight アプリケーションのアプリケーション ナビゲーションは、Frame コントロールおよび Page コントロールを使用して実装します。 ページ コントロールは独立したコンテンツ セクションを表します。 フレームは、ページ コントロールのコンテナーとして動作し、ページへのナビゲーションを容易にします。 どの時点においても、フレームには 1 つのページのコンテンツが表示されます。 フレーム内に表示するページは、プログラムによる新しいページへのナビゲーションまたはユーザーによる操作での新しいページへのナビゲーションによって変更します。

ナビゲーション可能なコンテンツと、ヘッダー、フッター、ナビゲーション サイド バーなどの永続的なユーザー インターフェイス (UI) コンポーネントを組み合わせて表示するように、Silverlight アプリケーションのルート ビジュアルをデザインできます。 [Silverlight ナビゲーション アプリケーション] テンプレートを使用して新しいプロジェクトを作成する場合、永続的な UI コンポーネントとナビゲーション可能なコンテンツ用のフレームが記述された XAML ファイルがテンプレートによって生成されます。

次の例は、MainPage という名前が付けられた UserControl コントロールの内部に表示される単一フレームです。 ContentFrame の前後の LayoutRoot に、UI コンポーネントを追加できます。 Source プロパティは /Views/Home.xaml に設定されています。これは、既定では、フレーム内に表示されるページが /Views/Home.xaml に配置されるページであることを意味します。


<!-- NOTE: 
  By convention, the sdk prefix indicates a URI-based XAML namespace declaration 
  for Silverlight SDK client libraries. This namespace declaration is valid for 
  Silverlight 4 only. In Silverlight 3, you must use individual XAML namespace 
  declarations for each CLR assembly and namespace combination outside the scope 
  of the default Silverlight XAML namespace. For more information, see the help 
  topic "Prefixes and Mappings for Silverlight Libraries". 
-->
<UserControl x:Class="SilverlightApplication.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    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" d:DesignWidth="640" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot">
      <sdk:Frame x:Name="ContentFrame" Source="/Views/Home.xaml">

      </sdk:Frame>
  </Grid>
</UserControl>


[新しい項目の追加] ダイアログ ボックスを使用して [Silverlight ページ] を選択すると、アプリケーションに新しいページを追加できます。 Visual Studio の [Silverlight ナビゲーション アプリケーション] テンプレートでは、ページが格納される Views という名前のフォルダーが作成されます。 ページをこのフォルダーに追加することも、アプリケーション内の最も適切な場所に追加することもできます。

わかりやすい URI の作成

フレーム内では、特定の URI パターンを特定のページにマップするように指定できます。 URI マッピングを使用すると、ファイルへのパスの代わりに、ユーザーによる操作をわやりやすい説明的な表現で示すことができます。 たとえば、/Home に対する要求が、実際には /Views/Home.xaml にあるファイルへの要求となるように指定できます。 定義済みのパターンに一致しない要求は通常の URI 要求として処理され、別のページへマップされることはありません。 次の表に、URI マッピングの定義と要求の解決例を示します。

URI マッピングの定義

一致する URI の例

解決された URI

Uri = "/Home"

MappedUri = "/Views/Home.xaml"

/home

/Views/Home.xaml

Uri = "/{page}"

MappedUri = "/Views/{page}Page.xaml"

/About

/Views/AboutPage.xaml

Uri = "/Product/{category}"

MappedUri = "/ContosoShop/Product.xaml?category={category}"

/Product/bikes

/ContosoShop/Product.xaml?category=bikes

Uri = "/{reporttype}/{month}/{format}"

(XAML の場合) MappedUri = "/Views/Reports/{reporttype}.xaml?time={month}&amp;show={format}"

(Visual Basic または C# の場合) MappedUri = "/Views/Reports/{reporttype}.xaml?time={month}&show={format}"

/Sales/June/Short

/Views/Reports/Sales.xaml?time=June&show=Short

URI マッピングをフレームへ追加するには、UriMapper クラス (または UriMapperBase クラスから派生したカスタム クラス) の単一インスタンスまたは複数の UriMapping インスタンスを定義します。 指定するパターンが、要求される URI と完全に一致する URI である必要はありません。 パターンの URI ではプレースホルダー セグメントを使用できます。これは、そのセグメントのすべての値に一致します。 プレースホルダー セグメントは、セグメントの名前を中かっこ ({ および }) で囲んで指定します。 URI へのマッピングで使用される場合、プレースホルダー セグメントは変数として扱われます。 中かっこで囲まれていない値は、パターンに一致する URI に存在する必要のあるリテラル値を表します。 次の例は、プレースホルダーの値を含む URI パターンです。


<sdk:Frame 
       x:Name="ContentFrame" 
       Style="{StaticResource ContentFrameStyle}" 
       Source="/Home" 
       Navigated="ContentFrame_Navigated" 
       NavigationFailed="ContentFrame_NavigationFailed">
    <sdk:Frame.UriMapper>
        <sdk:UriMapper>
            <sdk:UriMapping 
                Uri="/ProductDetail/{productid}" 
                MappedUri="/Views/ProductDetail.xaml?ProductId={productid}"/>
            <sdk:UriMapping 
                Uri="/Reports/{type}/{selection}" 
                MappedUri="/Views/ReportsPage.xaml?type={type}&amp;selection={selection}"/>
            <sdk:UriMapping 
                Uri="/{pageName}" 
                MappedUri="/Views/{pageName}.xaml"/>
        </sdk:UriMapper>
    </sdk:Frame.UriMapper>
</sdk:Frame>


URI 要求は、要求に一致する最初のパターンにマップされます。 したがって、固有の定義から一般的な定義へという順序になるように URI マッピング インスタンスを追加します。 たとえば、次の定義は、固有のリテラル値から一般的なプレースホルダー値へというように適切な順序に並べられています。 /SalesReport に対する要求は、/Views/Reports/Sales.xaml にマップされます。


<sdk:Frame x:Name="ContentFrame" Source="/Home">
  <sdk:Frame.UriMapper>
    <sdk:UriMapper>
      <sdk:UriMapping Uri="/SalesReport" MappedUri="/Views/Reports/Sales.xaml"/>
      <sdk:UriMapping Uri="/{page}" MappedUri="/Views/{page}Page.xaml"/>
    </sdk:UriMapper>
  </sdk:Frame.UriMapper>
</sdk:Frame>


一方、URI マッピング定義の順序を逆に指定すると、/SalesReport に対する要求は /Views/Reports/Sales.xaml にマップされません。 代わりに、最初の定義の /{page}/SalesReport を含むすべての単一セグメント要求に一致します。 このため、要求は /Views/SalesReportPage.xaml にマップされます。

ページ ナビゲーションの容易化

Frame クラスには、ページ ナビゲーションのためのプロパティやメソッドがあります。 ページを表示するには、表示するページの URI を Source に設定するか、Navigate メソッドを呼び出してパラメーターとして表示するページの URI を渡します。 また、GoBack メソッドおよび GoForward メソッドを使用して、ナビゲーション履歴の中で前後にナビゲーションすることもできます。

HyperlinkButton コントロールを使用すると、アプリケーション内のページへのナビゲーションをユーザーが実行できます。 フレーム内でホストされている Silverlight ページの内部に HyperlinkButton コントロールがある場合、ページにマップする URI は NavigateUri プロパティに設定し、TargetName プロパティには設定しません。 ホストしているフレームは、要求されたページにナビゲーションされます。 次の例は、アプリケーション内の別のページにナビゲーションする HyperlinkButton があるページです。


<!-- NOTE: 
  By convention, the sdk prefix indicates a URI-based XAML namespace declaration 
  for Silverlight SDK client libraries. This namespace declaration is valid for 
  Silverlight 4 only. In Silverlight 3, you must use individual XAML namespace 
  declarations for each CLR assembly and namespace combination outside the scope 
  of the default Silverlight XAML namespace. For more information, see the help 
  topic "Prefixes and Mappings for Silverlight Libraries". 
-->
<sdk:Page x:Class="SilverlightApplication.Home" 
    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"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480"
    Title="Home">
    <Grid x:Name="LayoutRoot">
        <HyperlinkButton NavigateUri="/About" Content="About"></HyperlinkButton>
    </Grid>
</sdk:Page>


HyperlinkButton コントロールがフレームの外にある場合、ページへマップする URI を NavigateUri プロパティに設定し、フレームの名前を TargetName プロパティに設定すると、フレーム内のリソースにナビゲーション可能です。 次の例は、フレームと、フレームの外にある 2 つの HyperlinkButton コントロールです。 HyperlinkButton コントロールにより、フレーム内に表示されるページへのナビゲーションが容易になります。 両方の HyperlinkButton コントロールの TargetName プロパティは、フレームに割り当てられている名前の ContentFrame に設定されています。


<Grid x:Name="LayoutRoot">
  <Border>
    <sdk:Frame x:Name="ContentFrame" Source="/Home">
        <sdk:Frame.UriMapper>
          <sdk:UriMapper>
            <sdk:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/>
          </sdk:UriMapper>
        </sdk:Frame.UriMapper>
     </sdk:Frame>
  </Border>

  <Grid>
    <Border>
       <StackPanel>
           <HyperlinkButton NavigateUri="/Home" TargetName="ContentFrame" Content="home"/>
           <HyperlinkButton NavigateUri="/About" TargetName="ContentFrame" Content="about"/>
       </StackPanel>
    </Border>
  </Grid>
</Grid>


ページからのナビゲーション要求をプログラムで初期化する必要がある場合、最初に、ホスト フレームで使用されている NavigationService オブジェクトを取得する必要があります。 NavigationService クラスには、ページ ナビゲーションのための、GoBackGoForward および Source などのメンバーがあります。 NavigationService オブジェクトが使用されている Silverlight ページの例については、このトピックの「アプリケーション ナビゲーションの例」を参照してください。

フレーム ナビゲーションと、別のフレームの内部に入れ子になっていないフレームの Web ブラウザー ナビゲーションを統合できます。 ブラウザーに統合されたナビゲーションは、ブラウザー外実行アプリケーションでは使用できません。 ブラウザーと統合されると、Web ブラウザーの次へ進むボタンと前へ戻るボタンは、トップ レベルのフレームのナビゲーション履歴内の要求にナビゲーションします。 ユーザーは Web ブラウザーの次へ進むボタンと前へ戻るボタンを使用することで、別の Silverlight ページへのナビゲーションが可能です。 ブラウザーに統合されたナビゲーションでは、ユーザーがブラウザー ウィンドウに直接 URI を入力でき、その URI が示すページが Silverlight アプリケーションで表示されます。 したがって、ユーザーは、URI のブックマークや、Silverlight アプリケーションだけでなく、特定の状態のアプリケーションに対応するハイパーリンクの共有を行うことができます。

フレームを Web ブラウザー ナビゲーションと統合するかどうかは、JournalOwnership プロパティを設定して指定します。 既定では、プロパティは Automatic に設定されています。これは、フレームがトップ レベルの場合、ブラウザーの履歴と統合されることを意味します。 JournalOwnership プロパティを OwnsJournal に設定すると、ブラウザーへのナビゲーションの統合は実行されません。つまり、フレームは、独自のナビゲーション履歴を保持します。

ナビゲーション履歴をサポートするには、Silverlight オブジェクトを含んでいる Web ページに、_sl_historyFrame という名前の iframe が存在する必要があります。 新しい Silverlight アプリケーションを作成すると、この iframe が既定で Web ページに追加されます。 既存のアプリケーションにナビゲーション履歴を追加するには、Silverlight オブジェクトをホストする Web ページに次のコードを追加する必要があります。

<iframe id="_sl_historyFrame" style='visibility:hidden;height:0;width:0;border:0px'>
</iframe>

アプリケーション ナビゲーションの例

前に示した例では、URI マッピングが次のパターンで定義されていました。

<uriMapper:UriMapping Uri="/ProductDetail/{productid}" 
        MappedUri="/Views/ProductDetail.xaml?ProductId={productid}"/>

次の例では、この URI マッピングを使用して、ユーザーが要求した製品に関するデータを表示するページに、ユーザーが直接ナビゲーションできるようにします。 この例では、製品に関する情報を表示する XAML ページが表示されます。 また、このページには、そのページから次のページまたは前のページへのナビゲーションを実行するボタンもあります。


<!-- NOTE: 
  By convention, the sdk prefix indicates a URI-based XAML namespace declaration 
  for Silverlight SDK client libraries. This namespace declaration is valid for 
  Silverlight 4 only. In Silverlight 3, you must use individual XAML namespace 
  declarations for each CLR assembly and namespace combination outside the scope 
  of the default Silverlight XAML namespace. For more information, see the help 
  topic "Prefixes and Mappings for Silverlight Libraries". 
-->
<sdk:Page x:Class="NavExample.Views.ProductDetail" 
     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:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
     d:DesignWidth="640" d:DesignHeight="480"
     Title="Product Information">
    <StackPanel x:Name="LayoutRoot">
        <ListBox x:Name="ListBox1" ItemsSource="{Binding}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Name}"/>
                        <TextBlock Text="{Binding ProductNumber}"/>
                        <TextBlock Text="{Binding Color}"/>
                        <TextBlock Text="{Binding Size}"/>
                        <TextBlock Text="{Binding ListPrice}"/>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>   
        </ListBox>
        <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
            <Button Width="100" x:Name="BackNavButton" Click="BackNavButton_Click" 
                    Content="&lt;&lt; back" Visibility="Collapsed" />
            <Button Width="100" x:Name="ForwardNavButton" Click="ForwardNavButton_Click" 
                    Content="forward &gt;&gt;" Visibility="Collapsed" />
        </StackPanel>
    </StackPanel>
</sdk:Page>


この例は、分離コード ページです。 このページでは WCF Data Servicesにアクセスしてデータを取得しますが、データ サービスを実装する手順はここには示してありません。 データ サービスの詳細については、「WCF Data Services (Silverlight)」を参照してください。 要求された製品 ID がクエリ文字列から取得され、データ サービスのクエリに渡されます。 次へ進むナビゲーションと前へ戻るナビゲーションが使用できるかどうかは、ページのナビゲーション サービスを使用して判断されます。


public partial class ProductDetail : Page
{
    public ProductDetail()
    {
        InitializeComponent();
    }

    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        GetProductDetail();
        SetButtonVisibility();
    }

    private void SetButtonVisibility()
    {
        if (NavigationService.CanGoBack)
        {
            BackNavButton.Visibility = Visibility.Visible;
        }
        else
        {
            BackNavButton.Visibility = Visibility.Collapsed;
        }

        if (NavigationService.CanGoForward)
        {
            ForwardNavButton.Visibility = Visibility.Visible;
        }
        else
        {
            ForwardNavButton.Visibility = Visibility.Collapsed;
        }
    }

    private void BackNavButton_Click(object sender, RoutedEventArgs e)
    {
        if (NavigationService.CanGoBack)
        {
            NavigationService.GoBack();
        }
    }

    private void ForwardNavButton_Click(object sender, RoutedEventArgs e)
    {
        if (NavigationService.CanGoForward)
        {
            NavigationService.GoForward();
        }
    }

    private void GetProductDetail()
    {
        string productID;
        DataServiceContext svcContext = 
            new DataServiceContext(new Uri("AdventureWorks.svc", UriKind.Relative));

        if (this.NavigationContext.QueryString.ContainsKey("ProductId"))
        {
            productID = this.NavigationContext.QueryString["ProductId"];
        }
        else
        {
            productID = App.Current.Resources["FeaturedProductID"].ToString();
        }

        svcContext.BeginExecute<Product>(new Uri("Product(" + productID + ")", 
            UriKind.Relative), loadProductCallback, svcContext);
    }

    private void loadProductCallback(IAsyncResult asyncResult)
    {
        DataServiceContext context = asyncResult.AsyncState as DataServiceContext;

        ListBox1.DataContext = context.EndExecute<Product>(asyncResult);
    }
}


アプリケーションで、他の Web ページへの直接リンクを使用できます。 外部ナビゲーションは、アプリケーション外部のリソースへのアクセスを提供する際に役立ちます。 また、Silverlight で外部ナビゲーションを使用すると、通常の Web ページで使用するためのサイド バー メニューなどのコントロールも実装できます。

場合によっては、ユーザーがアプリケーションの外部ナビゲーションを使用できないようにする必要もあります。 すべての外部ナビゲーションを無効にするには、Silverlight プラグインの初期化時に enableNavigation プロパティを none に設定します。 詳細については、EnableNavigation (Silverlight プラグイン オブジェクト) のトピックを参照してください。

他の Web ページへのユーザー ナビゲーションを有効にするには、HyperlinkButton コントロールを使用し、NavigateUri プロパティを外部リソースに設定し、TargetName プロパティを設定して、新しいブラウザー ウィンドウを開きます。

次のコード例は、アプリケーションの外部の場所へのナビゲーションに HyperlinkButton を使用している例です。


<HyperlinkButton NavigateUri="http://www.microsoft.com"
    Content="Go to Microsoft" TargetName="_new" />


Silverlight 4 以降では、ContentLoader プロパティをカスタムの INavigationContentLoader 実装に設定することによって、ナビゲーション システムを拡張することができます。 INavigationContentLoader インターフェイスには、非同期コンテンツ読み込みのための 4 つのメソッドが定義されています。

既定の ContentLoader プロパティ値は、アプリケーション パッケージ (.xap ファイル) からページを読み込む PageResourceContentLoader クラスのインスタンスです。 任意の URI 解決を実行するには、この機能を置き換える必要があります。 たとえば、必要なときにだけサーバーからページをダウンロードしたり、特定の URI を他の URI にリダイレクトしたりすることができます。

Silverlight 4 以降では、Frame クラスと NavigationService クラスにも Refresh メソッドがあります。 これを利用して、特定のページでのユーザー操作に応じて、同じ URI でも異なるコンテンツを提供できるナビゲーションの拡張機能を実現することができます。 たとえば、ユーザー認証を要求するページを取り入れたナビゲーション シナリオを実現できます。 INavigationContentLoader の実装については、「Additional Navigation Resources (ナビゲーションに関する追加リソース)」を参照してください。

コミュニティの追加

追加
表示:
© 2014 Microsoft