次の方法で共有

InfoBar

  • [アーティクル]

InfoBar コントロールは、アプリ全体の状態メッセージを、非常に見やすくても邪魔にならないようにユーザーに表示するためのものです。 表示されるメッセージの種類を簡単に示すことができる組み込みの重大度レベルと、アクション ボタンやハイパーリンク ボタンに独自の呼び出しを含めるためのオプションがあります。 InfoBar は他の UI コンテンツとインラインで表示されるため、コントロールにはユーザーがそれを常に表示したり破棄したりできるようにするためのオプションがあります。

閉じるボタンとメッセージが表示された、既定の状態の InfoBar のサンプル

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

アプリケーションの状態が変化したときに、ユーザーが通知を受け取ったり、確認したり、操作を実行したりする必要があるときは、InfoBar コントロールを使用します。 既定では、通知はユーザーによって閉じられるまでコンテンツ エリアに表示されたままになりますが、必ずしもユーザー フローが中断されることはありません。

InfoBar は、レイアウトの領域を利用し、他の子要素と同じように動作します。 他のコンテンツを覆ったり、その手前にフローティングしたりすることはありません。

アプリの状態が変更されないユーザー操作、時間的制約のあるアラート、または重要ではないメッセージへの直接的な確認や応答には、InfoBar を使用しないでください。

解説

ユーザーによって閉じられる、またはアプリの認識やエクスペリエンスに直接的に影響するシナリオの状態が解消されたときに閉じられる、InfoBar を使用します。

次に例をいくつか示します。

  • インターネット接続の喪失
  • 特定のユーザー操作に関係のない、自動的にトリガーされたときのドキュメントの保存中のエラー
  • 録音しようとしたときにマイクが接続されていない
  • アプリケーションのサブスクリプションの有効期限が切れる

アプリの認識やエクスペリエンスに間接的に影響するシナリオに、ユーザーによって閉じられる InfoBar を使用します

次に例をいくつか示します。

  • 通話で記録が開始された
  • "リリース ノート" へのリンクで適用される更新
  • サービスの利用規約が更新され、確認が必要である
  • アプリ全体のバックアップが正常かつ非同期に完了した
  • アプリケーションのサブスクリプションの有効期限が近づいている

別のコントロールを使用する必要がある場合

ContentDialog、Flyout、または TeachingTip を使用する方が適切なシナリオもあります。

  • 通知を表示し続ける必要がないシナリオ (特定の UI 要素のコンテキストで情報を表示するときなど) の場合は、Flyout の方が適切なオプションです。
  • アプリケーションがユーザーの操作を確認するシナリオで、ユーザーが読む "必要がある" 情報を表示するときは、ContentDialog を使用します。
    • さらに、アプリの状態変化が非常に激しく、ユーザーがアプリと対話するためのすべての機能をブロックする必要がある場合は、ContentDialog を使用します。
  • 通知が短時間の状態を伝える一時的なものであるシナリオでは、TeachingTip の方が適切なオプションです。

適切な通知コントロールの選択の詳細については、ダイアログとポップアップに関する記事を参照してください。

推奨事項

表示と消去の使いやすさ

コンテンツの点滅

画面の点滅を防ぐため、InfoBar をビューに表示してすぐに消去しないようにする必要があります。 光過敏性のユーザーのため、そしてアプリケーションの使いやすさを向上させるため、ビジュアルが点滅しないようにします。

アプリの状態条件によりビューに自動的に表示されて消去される InfoBar の場合、コンテンツがすばやく表示または消去されたり、連続して何回も表示されたりするのを防ぐためのロジックを、アプリケーションに組み込むことをお勧めします。 ただし、一般に、このコントロールは表示期間の長い状態メッセージに使用する必要があります。

InfoBar の更新

コントロールが開かれた後、メッセージや重大度の更新など、さまざまなプロパティが変更されても、通知イベントは発生しません。 InfoBar の更新されたコンテンツのスクリーン リーダーを使用しているユーザーに通知する場合は、コントロールをいったん閉じてから再度開き、イベントをトリガーすることをお勧めします。

コンテンツをオフセットするインライン メッセージ

他の UI コンテンツとインラインで表示される InfoBar の場合、ページの残りの部分が要素の追加に応答してどのように反応するかに注意してください。

かなり高い InfoBar を使用すると、ページ上の他の要素のレイアウトが大幅に変更される可能性があります。 InfoBar がすばやく表示されたり消去されたりすると (特に連続して)、ユーザーは視覚状態の変化と混同する可能性があります。

色とアイコン

事前設定された重大度レベル以外で色とアイコンをカスタマイズするときは、標準のアイコンと色のセットからの暗黙的な意味に関するユーザーの予想に注意してください。

また、事前設定された重大度の色は、テーマの変更、ハイコントラスト モード、色の混乱のユーザー補助、および前景色とのコントラストに関して既に設計されています。 可能な限りこれらの色を使用し、さまざまな色の状態とユーザー補助機能に適合するように、アプリケーションにカスタム ロジックを含めることをお勧めします。

標準アイコンと色に関する UX ガイダンスを参照して、メッセージが明確かつわかりやすくユーザーに伝えられていることを確認してください。

重要度

タイトル、メッセージ、またはカスタム コンテンツで伝達される情報と一致しない通知の場合に、Severity プロパティを設定しないでください。

付随する情報は、その重大度を使用するために次の情報を伝達することを目的としたものである必要があります。

  • エラー: 発生したエラーまたは問題。
  • 警告: 将来の問題の原因となる可能性のある状態。
  • 成功: 実行時間の長いタスクまたはバックグラウンド タスクが完了した。
  • 既定: ユーザーの注意が必要な一般的な情報。

通知の意味を示す UI コンポーネントが、アイコンと色だけであってはなりません。 通知のタイトルやメッセージのテキストを使用して、情報を表示する必要があります。

メッセージ

通知内のテキストは、すべての言語で一定の長さではありません。 Title と Message プロパティの場合、通知が 2 行目に拡張されるかどうかに影響する可能性があります。 メッセージの長さや他の UI 要素が特定の言語に設定されることに基づいて配置しないようにすることをお勧めします。

右から左 (RTL) または左から右 (LTR) の言語との間でローカライズする場合、通知は標準的なミラーリングの動作に従います。 アイコンは、方向性がある場合にのみミラー化されます。

通知でのテキストのローカライズの詳細については、レイアウトとフォントの調整および RTL のサポートに関するガイダンスを参照してください。

UWP と WinUI 2

重要

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

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

UWP アプリの InfoBar には WinUI 2 が必要です。 インストール手順などの詳細については、「WinUI 2」を参照してください。 このコントロールの API は、Microsoft.UI.Xaml.Controls 名前空間に存在します。

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

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

<muxc:InfoBar />

InfoBar を作成する

WinUI 3 ギャラリー アプリを開いて InfoBarh の動作を確認します。

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

次の XAML は、情報通知の既定のスタイルを使用するインラインの InfoBar を記述するものです。 情報バーは、他の要素と同じように配置することができ、基本レイアウトの動作に従います。 たとえば、垂直方向の StackPanel で使用すると、InfoBar は横方向に広がり、使用可能な幅いっぱいに表示されます。

既定では、InfoBar は表示されません。 InfoBar を表示するには、XAML または分離コードで IsOpen プロパティを true に設定します。

<InfoBar x:Name="UpdateAvailableNotification"
    Title="Update available."
    Message="Restart the application to apply the latest update.">
</InfoBar>

public MainPage()
{
    this.InitializeComponent();

    if(IsUpdateAvailable())
    {
        UpdateAvailableNotification.IsOpen = true;
    }
}

閉じるボタンとメッセージが表示された、既定の状態の InfoBar のサンプル

定義済みの重大度レベルの使用

Severity プロパティを使用して情報バーの種類を設定し、通知の重要度に応じて、一貫性のある状態の色、アイコン、支援技術を自動的に設定できます。 Severity が設定されていない場合は、既定の情報スタイルが適用されます。

<InfoBar x:Name="SubscriptionExpiringNotification"
    Severity="Warning"
    Title="Your subscription is expiring in 3 days."
    Message="Renew your subscription to keep all functionality" />

閉じるボタンとメッセージが表示された、警告状態の InfoBar のサンプル

InfoBar でのプログラムによる終了

InfoBar は、ユーザーが閉じるボタンを使用することで、またはプログラムにより、閉じることができます。 状態が解決されるまで通知を表示したままにする必要があり、ユーザーが情報バーを閉じることができないようにする場合は、IsClosable プロパティを false に設定できます。

このプロパティの既定値は true であり、"X" の形状をした閉じるボタンが表示されます。

<InfoBar x:Name="NoInternetNotification"
    Severity="Error"
    Title="No Internet"
    Message="Reconnect to continue working."
    IsClosable="False" />

閉じるボタンが表示されていないエラー状態の InfoBar のサンプル

カスタマイズ: 背景色とアイコン

定義済みの重大度レベル以外では、Background および IconSource プロパティを設定して、アイコンと背景色をカスタマイズできます。 InfoBar の支援技術の設定は、定義されている重要度のままになるか、定義されていない場合は既定値になります。

カスタムの背景色は、標準の Background プロパティを使用して設定でき、重大度によって設定される色は上書きされます。 独自の色を設定するときは、コンテンツの読みやすさとアクセシビリティを念頭に置いてください。

カスタム アイコンは、IconSource プロパティを使用して設定できます。 既定では、アイコンは表示されます (コントロールが折りたたまれていない場合)。 このアイコンは、IsIconVisible プロパティを false に設定することによって削除できます。 カスタム アイコンの場合、推奨されるアイコンのサイズは 20px です。

<InfoBar x:Name="CallRecordingNotification"
    Title="Recording started"
    Message="Your call has begun recording."
    Background="{StaticResource LavenderBackgroundBrush}">
    <InfoBar.IconSource>
        <SymbolIconSource Symbol="Phone" />
    </InfoBar.IconSource>
</InfoBar>

カスタムの背景色、カスタム アイコン、閉じるボタンが表示されている既定状態の InfoBar のサンプル

アクションの追加 ボタン

ButtonBase を継承する独自のボタンを定義し、ActionButton プロパティでそれを設定することにより、アクション ボタンを追加できます。 一貫性とアクセシビリティのため、Button および HyperlinkButton 型のアクション ボタンには、カスタム スタイル設定が適用されます。 ActionButton プロパティとは別に、カスタム コンテンツを使用してアクション ボタンを追加することができ、それはメッセージの下に表示されます。

<InfoBar x:Name="NoInternetNotification"
    Severity="Error"
    Title="No Internet"
    Message="Reconnect to continue working.">
    <InfoBar.ActionButton>
        <Button Content="Network Settings" Click="InternetInfoBarButton_Click" />
    </InfoBar.ActionButton>
</InfoBar>

1 行のメッセージとアクション ボタンが表示されて一ル、エラー状態の InfoBar のサンプル

<InfoBar x:Name="TermsAndConditionsUpdatedNotification"
    Title="Terms and Conditions Updated"
    Message="Dismissal of this message implies agreement to the updated Terms and Conditions. Please view the changes on our website.">
    <InfoBar.ActionButton>
        <HyperlinkButton Content="Terms and Conditions Sep 2020"
            NavigateUri="https://www.example.com"
            Click="UpdateInfoBarHyperlinkButton_Click" />
    </InfoBar.ActionButton>
</InfoBar>

複数行に展開されたメッセージとハイパーリンクが表示されている InfoBar のサンプル

右揃えアクション ボタン

既定で、アクション ボタンはメッセージのすぐ右の使用可能な領域に左揃えで表示されます。 必要に応じて、ボタンの HorizontalAlignment を "right" に設定することにより、[閉じる] ボタンのすぐ左に、単一行の水平レイアウトでこのボタンを配置できます。

<InfoBar x:Name="RightAlignedButtonNotification"
    Title="Title"
    Message="Essential app message">
    <InfoBar.ActionButton>
        <Button Content="Hello" HorizontalAlignment="Right"/>
    </InfoBar.ActionButton>
</InfoBar>

右揃えのアクション ボタンを含む InfoBar のサンプル

コンテンツの折り返し

カスタム コンテンツを除く InfoBar のコンテンツを横 1 行に収めることができない場合は、垂直方向にレイアウトされます。 Title、Message、ActionButton (ある場合) は、それぞれ別の行に表示されます。

<InfoBar x:Name="BackupCompleteNotification"
    Severity="Success"
    Title="Backup complete: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
    Message="All documents were uploaded successfully. Ultrices sagittis orci a scelerisque. Aliquet risus feugiat in ante metus dictum at tempor commodo. Auctor augue mauris augue neque gravida.">
    <InfoBar.ActionButton>
        <Button Content="Action"
            Click="BackupInfoBarButton_Click" />
    </InfoBar.ActionButton>
</InfoBar>

成功状態の複数行のタイトルとメッセージが表示された InfoBar のサンプル

カスタム コンテンツ

Content プロパティを使用して、XAML コンテンツを InfoBar に追加できます。 それは、他のコントロール コンテンツの下の独自の行に表示されます。 InfoBar は、定義されているコンテンツに合わせて拡張されます。

<InfoBar x:Name="BackupInProgressNotification"
    Title="Backup in progress"
    Message="Your documents are being saved to the cloud"
    IsClosable="False">
    <InfoBar.Content>
        <ProgressBar IsIndeterminate="True" Margin="0,0,0,6" MaxWidth="200"/>
    </InfoBar.Content>
</InfoBar>

不確定の進行状況バーが表示された既定の状態の InfoBar のサンプル

ライトウェイト スタイル

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

詳細については、スタイル設定コントロールに関する記事の「軽量なスタイル設定」セクションを参照してください。

たとえば、次のようにすると、ページ上のすべての情報 InfoBar の背景色が青になります。

<Page.Resources>
    <x:SolidColorBrush x:Key="InfoBarInformationalSeverityBackgroundBrush" Color="LightBlue"></x:SolidColorBrush>
</Page.Resources>

クローズの取り消し

Closing イベントを使用して、InfoBar のクローズをキャンセルしたり延期したりすることができます。 これは InfoBar を開いたままにしたり、カスタム アクションの実行の時間を確保したりするために使用できます。 InfoBar のクローズがキャンセルされると、IsOpen は true に戻ります。 プログラムによるクローズもキャンセルできます。

<InfoBar x:Name="UpdateAvailable"
    Title="Update Available"
    Message="Please close this tip to apply required security updates to this application"
    Closing="InfoBar_Closing">
</InfoBar>

public void InfoBar_Closing(InfoBar sender, InfoBarClosingEventArgs args)
{
    if (args.Reason == InfoBarCloseReason.CloseButton) 
    {
        if (!ApplyUpdates()) 
        {
            // could not apply updates - do not close
            args.Cancel = true;
        }
    }
}