BreadcrumbBar - Windows apps

[アーティクル]
07/04/2024

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

ノードを含むパンくずリスト: Home、Documents、Design、Northwind、Images、Folder1、Folder2、Folder3。アプリのサイズが変更されたため、パンくずリストが崩れ、省略記号が左端のノードに置き換えられます。次に、省略記号をクリックすると、リンクされたノードを含むポップアップが開きます。

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

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

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

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

ノードを含むパンくずリスト: Home、Documents、Design、Northwind、Images、Folder1、Folder2、Folder3。

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

パンくずリストのサイズが変更されたため、省略記号が左端のノードで置き換えられました。省略記号は、折りたたまれたノードを示すポップアップを開きます。

構造

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

ラベルが付いた部分があるパンくずリストの画像: 省略記号、シェブロン、パンくずリストバーの項目、現在の項目、省略記号のポップアップ、省略記号のドロップダウン項目

推奨事項

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

UWP と WinUI 2

重要

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

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

UWP アプリの BreadcrumbBar には WinUI 2 が必要です。インストール手順などの詳細については、「WinUI 2」を参照してください。このコントロールの 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;
}

次の方法で共有

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

構造

推奨事項

UWP と WinUI 2

ItemsSource

ItemTemplate

ItemClicked

ライトウェイトスタイル

コード例

その他のリソース

次の方法で共有

階層リンク バー

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

階層リンク バーの UI

構造

推奨事項

UWP と WinUI 2

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

ItemsSource

ItemTemplate

ItemClicked

ライトウェイト スタイル

コード例

関連記事

その他のリソース

階層リンクバー

階層リンクバーの UI

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

ライトウェイトスタイル