階層リンク バー

BreadcrumbBar は、現在の場所に至るページまたはフォルダーの直接パスを提供します。 これは、ユーザーの (ファイル システムまたはメニュー システム内の) ナビゲーション過程を固定して表示する必要がある場合や、ユーザーが前の場所に戻る必要がある場合によく使用されます。

これは適切なコントロールですか?

階層リンク バーを使用すると、ユーザーは、アプリまたはフォルダー間を移動するときにその場所を常に把握でき、パス内の前の場所にすばやくジャンプすることができます。

現在の位置へのパスが適切である場合は、BreadcrumbBar を使用します。 この UI は、フォルダー マネージャーや、ユーザーがアプリに到達するまでに多数のレベルを移動する場合によく使用されます。

階層リンク バーの UI

階層リンクバーには、各ノードが山かっこで区切られて水平に表示されます。

アプリのサイズを変更して、すべてのノードを表示できるだけ十分なスペースがなくなった場合は、階層リンクが折りたたまれ、左端のノードは省略記号に置き換えられます。 省略記号をクリックすると、折りたたまれたノードが表示されます。

構造

下の図では、BreadcrumbBar コントロールの各部分を示します。 軽量なスタイル設定を使用して、一部のパーツの外観を変更することができます。

推奨事項

• 多数のナビゲーション レベルがあり、ユーザーが以前のレベルに戻ることができるようにしたい場合は、階層リンク バーを使用します。
• ナビゲーション レベルが多くても 2 つしかない場合は、階層リンク バーを使用しないでください。 単純な "戻る" ナビゲーションで十分です。
• 現在の場所を、階層リンク バーの最後の項目として表示します。 ただし、通常は、ユーザーが現在の項目をクリックしたときにナビゲーションを実行しないようにします (ユーザーが現在のページまたはデータを再読み込みできるようにする場合は、専用の [再読み込み] オプションを指定することを検討してください)。

UWP と WinUI 2

重要

この記事の情報と例は、Windows アプリ SDKと WinUI 3 を使用するアプリ向けに最適化されていますが、一般に WinUI 2 を使用する UWP アプリに適用されます。 プラットフォーム固有の情報と例については、UWP API リファレンスを参照してください。

このセクションには、UWP または WinUI 2 アプリでコントロールを使用するために必要な情報が含まれています。

UWP アプリの BreadcrumbBar には、Windows UI ライブラリ 2 が必要です。 インストール手順などについて詳しくは、「Windows UI Library (Windows UI ライブラリ)」をご覧ください。 このコントロールの API は 、Microsoft.UI.Xaml.Controls 名前空間に存在します。

• WinUI 2 Apis:BreadcrumbBar クラス
• WinUI 2 ギャラリー アプリを開き、BreadcrumbBar の動作を確認します。 WinUI 2 ギャラリー アプリには、ほとんどの WinUI 2 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソース コードを取得します。

WinUI 2 でこの記事のコードを使用するには、XAML のエイリアスを使って (ここでは muxc を使用)、プロジェクトに含まれる Windows UI ライブラリ API を表します。 詳細については、「WinUI 2 の概要」を参照してください。

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:BreadcrumbBar />

階層リンク バーを作成する

• 重要な API:BreadcrumbBar クラス

WinUI 3 ギャラリー アプリを開き、BreadcrumbBar の動作を確認します。

WinUI 3 ギャラリー アプリには、ほとんどの WinUI 3 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソース コードを取得します。

次の例では、既定のスタイルを使用して階層リンク バーを作成する方法を示しています。 階層リンクバーは、アプリ UI の任意の場所に配置できます。 ItemsSource プロパティを設定して、階層リンクを設定します。 ここでは、階層リンク バーに表示される文字列の配列に設定されています。

<BreadcrumbBar x:Name="BreadcrumbBar1"/>

BreadcrumbBar1.ItemsSource = 
   new string[] { "Home", "Documents", "Design", "Northwind", "Images", "Folder1", "Folder2", "Folder3" };

ItemsSource

階層リンク バーには Items プロパティがありません。ItemsSource プロパティのみが含まれています。 つまり、XAML で階層リンクを設定したり、コードで Items コレクションに直接追加したりすることはできません。 代わりに、コレクションを作成し、コードで、またはデータ バインディングを使用して、ItemsSource プロパティをコレクションに接続します。

アプリのニーズに合わせた任意の種類のデータのコレクションに ItemsSource を設定できます。 コレクション内のデータ項目は、バーに階層リンクを表示するためにも、階層リンク バーの項目をクリックしたときに移動するためにも使用されます。 このページの例では、階層リンク バーに表示するラベルと、ナビゲーションに使用する情報を保持するデータ オブジェクトとを含んだ単純な struct (Crumb という名前) を作成します。

public readonly struct Crumb
{
    public Crumb(String label, object data)
    {
        Label = label;
        Data = data;
    }
    public string Label { get; }
    public object Data { get; }
    public override string ToString() => Label;
}

ItemTemplate

既定では、階層リンク バーには、コレクション内の各項目の文字列表現が表示されます。 コレクション内のデータ項目に適切な ToString オーバーライドがない場合は、ItemTemplate プロパティを使用して、階層リンク バーに項目を表示する方法を定義するデータ テンプレートを指定できます。

たとえば、階層リンク コレクションが StorageFolder オブジェクトのリストであるとすると、データ テンプレートを指定し、次のように DisplayName プロパティにバインドすることができます。

ObservableCollection<StorageFolder> Breadcrumbs = 
    new ObservableCollection<StorageFolder>();

<BreadcrumbBar x:Name="FolderBreadcrumbBar"
            ItemsSource="{x:Bind Breadcrumbs}">
    <BreadcrumbBar.ItemTemplate>
        <DataTemplate x:DataType="StorageFolder">
            <TextBlock Text="{x:Bind DisplayName}"/>
        </DataTemplate>
    </BreadcrumbBar.ItemTemplate>
</BreadcrumbBar>

ItemClicked

ユーザーが階層リンク バーでクリックした項目に移動するように、ItemClicked イベントを操作します。 現在の場所は、通常、階層リンク バーの最後の項目として表示されるため、現在の場所を再度読み込む必要がない場合は、イベント ハンドラーにチェックを含める必要があります。

次の例では、インデックスをチェックして、クリックした項目がコレクションの最後の項目 (これが現在の場所) であるかどうかを調べています。 その場合、移動は行われません。

// Breadcrumbs is set as BreadcrumbBar1.ItemsSource.
List<Crumb> Breadcrumbs = new List<Crumb>();

...

private void BreadcrumbBar1_ItemClicked(muxc.BreadcrumbBar sender, muxc.BreadcrumbBarItemClickedEventArgs args)
{
    if (args.Index < Breadcrumbs.Count - 1)
    {
        var crumb = (Crumb)args.Item;
        Frame.Navigate((Type)crumb.Data);
    }
}

軽量なスタイル設定

既定の Style と ControlTemplate を変更して、コントロールに固有の外観を与えることができます。 利用可能なテーマ リソースの一覧については、BreadcrumbBar API ドキュメントの「コントロール スタイルとテンプレート」を参照してください。 詳細については、スタイル設定コントロールに関する記事の「軽量なスタイル設定」セクションを参照してください。

コード例

この例では、単純なファイル エクスプローラー シナリオで階層リンク バーを使用する方法を示しています。 リスト ビューには、選択した画像または音楽ライブラリの内容が表示され、ユーザーはサブフォルダーにドリルダウンできます。 階層リンク バーは、リスト ビューのヘッダーに配置され、現在のフォルダーへのパスが表示されます。

<Grid>
   <ListView x:Name="FolderListView" Margin="24,0"
             IsItemClickEnabled="True" 
             ItemClick="FolderListView_ItemClick">
      <ListView.Header>
         <BreadcrumbBar x:Name="FolderBreadcrumbBar"
                             ItemsSource="{x:Bind Breadcrumbs}"
                             ItemClicked="FolderBreadcrumbBar_ItemClicked">
         </BreadcrumbBar>
      </ListView.Header>
      <ListView.ItemTemplate>
         <DataTemplate>
            <TextBlock Text="{Binding Name}"/>
            </DataTemplate>
      </ListView.ItemTemplate>
   </ListView>
</Grid>

public sealed partial class MainPage : Page
{
    List<IStorageItem> Items;
    ObservableCollection<object> Breadcrumbs = 
        new ObservableCollection<object>();

    public MainPage()
    {
        this.InitializeComponent();
        InitializeView();
    }

    private void InitializeView()
    {
        // Start with Pictures and Music libraries.
        Items = new List<IStorageItem>();
        Items.Add(KnownFolders.PicturesLibrary);
        Items.Add(KnownFolders.MusicLibrary);
        FolderListView.ItemsSource = Items;

        Breadcrumbs.Clear();
        Breadcrumbs.Add(new Crumb("Home", null));
    }

    private async void FolderBreadcrumbBar_ItemClicked(muxc.BreadcrumbBar sender, muxc.BreadcrumbBarItemClickedEventArgs args)
    {
        // Don't process last index (current location)
        if (args.Index < Breadcrumbs.Count - 1)
        {
            // Home is special case.
            if (args.Index == 0)
            {
                InitializeView();
            }
            // Go back to the clicked item.
            else
            {
                var crumb = (Crumb)args.Item;
                await GetFolderItems((StorageFolder)crumb.Data);

                // Remove breadcrumbs at the end until 
                // you get to the one that was clicked.
                while (Breadcrumbs.Count > args.Index + 1)
                {
                    Breadcrumbs.RemoveAt(Breadcrumbs.Count - 1);
                }
            }
        }
    }

    private async void FolderListView_ItemClick(object sender, ItemClickEventArgs e)
    {
        // Ignore if a file is clicked.
        // If a folder is clicked, drill down into it.
        if (e.ClickedItem is StorageFolder)
        {
            StorageFolder folder = e.ClickedItem as StorageFolder;
            await GetFolderItems(folder);
            Breadcrumbs.Add(new Crumb(folder.DisplayName, folder));
        }
    }

    private async Task GetFolderItems(StorageFolder folder)
    {
        IReadOnlyList<IStorageItem> itemsList = await folder.GetItemsAsync();
        FolderListView.ItemsSource = itemsList;
    }
}

public readonly struct Crumb
{
    public Crumb(String label, object data)
    {
        Label = label;
        Data = data;
    }
    public string Label { get; }
    public object Data { get; }
    public override string ToString() => Label;
}

関連記事

• ナビゲーション デザインの基本
• NavigationView
• BreadcrumbBar クラス