教育のヒント

教育のヒントは、コンテキスト情報を提供する半永続的で内容豊富なポップアップです。 これはユーザーのエクスペリエンスを高める可能性がある重要および新規の機能についてユーザーに通知したり、リマインドしたり、説明したりする場合によく使用されます。

ティーチングティップは、軽くタップして閉じることができる場合や、閉じるために明示的な操作を必要とする場合があります。 教育のヒントはテールを使用して特定の UI 要素をターゲットにすることができますが、テールやターゲットがなくても使用できます。

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

TeachingTip コントロールを使用して、新しい更新プログラムや重要な更新プログラムや機能にユーザーの注意を向けたり、ユーザーのエクスペリエンスを向上させる重要でないオプションをユーザーに通知したり、タスクの完了方法をユーザーに教えたりします。

教育のヒントは一時的なものであるため、エラーまたは重要な状態変更をユーザーに知らせるためのコントロールとしては推奨されません。

推奨事項

• ヒントは一時的なものであるため、アプリケーションのエクスペリエンスにとって重要な情報やオプションを含めるべきではありません。
• 教育のヒントを過剰な頻度で表示しないようにしてください。 ティーチングティップは、長いセッション全体または複数のセッションで段階的に提示されると、それぞれに注意が注がれる可能性が最も高くなります。
• ヒントは簡潔にし、トピックを明確にしてください。 調査によると、ユーザーはヒントを活用するかどうかを決める前に、平均して 3 つから 5 つの単語しか読まず、2 つから 3 つの単語しか理解していません。
• 教育用ヒントをゲームパッドで利用しやすいかどうかは保証されません。 ゲームパッドの入力を予測するアプリケーションについては、 ゲームパッドとリモート コントロールの操作に関するページを参照してください。 アプリの UI で考えられるすべての構成を使用して、それぞれの教育のヒントについてのゲームパッドのアクセシビリティをテストすることをお勧めします。
• XAML ルートをエスケープするティーチング チップを有効にする際は、IsLightDismissEnabled プロパティも有効にし、PreferredPlacement モードを XAML ルートのほぼ中央に設定することをお勧めします。

開いている教育のヒントを再構成する

一部のコンテンツおよびプロパティは、教育のヒントが開いているときに再構成でき、すぐに有効になります。 アイコン プロパティ、アクション ボタン、閉じるボタン、および簡易非表示と明示的非表示との間での再構成など、その他のコンテンツおよびプロパティの場合はいずれも、これらのプロパティの変更を有効にするには、教育のヒントを閉じて再び開く必要があります。 教育のヒントが開いているときに手動非表示から簡易非表示に非表示動作を変更すると、簡易非表示の動作が有効になる前に、教育のヒントから閉じるボタンが削除され、ヒントが画面に表示されたままになることがあるため注意してください。

例示

教育のヒントには、以下の主なものを含むいくつかの構成を指定できます。

教育のヒントは、特定の UI 要素とその矢印を対象にして、表示されている情報のコンテキストの明確さを強化できます。

表示される情報が特定の UI 要素に関連しない場合、テールを削除することによって、ターゲットを指定しない教育のヒントを作成できます。

教育のヒントでは、ユーザーが上の隅にある [X] ボタンまたは下部にある [閉じる] ボタンを使用して閉じることを必須にできます。 教育のヒントでは、簡易非表示を有効にすることもでき、この場合は閉じるボタンが表示されません。代わりに、教育のヒントは、ユーザーがスクロールしたりアプリケーションの他の要素とやり取りしたりすると閉じられます。 この振る舞いのため、スクロール可能な領域にヒントを配置する必要がある場合は、ライトディスミスのヒントが最適なソリューションとなります。

教育のヒントを作成する

• 重要な API:TeachingTip クラス

WinUI 3 ギャラリー アプリを開き、動作中の TeachingTip を確認する

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

ここでは、タイトルとサブタイトルが付いた TeachingTip の既定の外観を示す、ターゲットを指定した教育のヒント コントロールの XAML を扱います。 なお、ティーチングチップは要素ツリーまたはコードビハインドの任意の場所に存在することがあります。 以下の例では ResourceDictionary 内に配置されます。

<Button x:Name="SaveButton" Content="Save">
    <Button.Resources>
        <TeachingTip x:Name="AutoSaveTip"
            Target="{x:Bind SaveButton}"
            Title="Save automatically"
            Subtitle="When you save your file to OneDrive, we save your changes as you go - so you never have to.">
        </TeachingTip>
    </Button.Resources>
</Button>

public MainPage()
{
    this.InitializeComponent();

    if(!HaveExplainedAutoSave())
    {
        AutoSaveTip.IsOpen = true;
        SetHaveExplainedAutoSave();
    }
}

ボタンと教育のヒントを含むページが表示される場合の結果を次に示します。

上記の例では、 Title プロパティと Subtitle プロパティを使用して、教育ヒントのタイトルとサブタイトルを設定します。 Target プロパティは、"SaveButton" に設定され、それ自体とボタンの間の視覚的な接続を確立します。 教示のヒントを表示するには、 その IsOpen プロパティを true に設定します。

ターゲット非指定のヒント

すべてのヒントが画面の要素に関連しているわけではありません。 これらのシナリオではターゲットを設定しないでください。代わりに、教育のヒントは XAML ルートの端を基準として表示されます。 ただし、 TailVisibility プロパティを "Collapsed" に設定することで、UI 要素に対する相対的な配置を保持しながら、教育チップの末尾を削除できます。 次の例は、ターゲット非指定の教育のヒントを表しています。

<Button x:Name="SaveButton" Content="Save" />

<TeachingTip x:Name="AutoSaveTip"
    Title="Saving automatically"
    Subtitle="We save your changes as you go - so you never have to.">
</TeachingTip>

この例では、TeachingTip が ResourceDictionary やコード ビハインドではなく要素ツリー内にあることに注意してください。 これは動作に影響せず、TeachingTip は開いたときにのみ表示され、レイアウト スペースを占有しません。

推奨される配置

教育のヒントは PreferredPlacement プロパティを使用して、ポップアップの FlyoutPlacementMode 配置動作を複製します。 既定の配置モードでは、ターゲット指定の教育のヒントはターゲットの上に配置しようとし、ターゲット非指定の教育のヒントは XAML ルートの下部中央に配置しようとします。 ポップアップと同様に、優先配置モードでは教育のヒントを表示するスペースがない場合は、別の配置モードが自動的に選択されます。

ゲームパッドの入力を予測するアプリケーションについては、 ゲームパッドとリモート コントロールの操作に関するページを参照してください。 アプリの UI で考えられるすべての構成を使用して、それぞれの教育のヒントについてのゲームパッドのアクセシビリティをテストすることをお勧めします。

PreferredPlacement が "BottomLeft" に設定されたターゲット指定の教育のヒントは、テールがターゲットの下部中央に配置され、教育のヒントの本文が左寄せされた状態で表示されます。

<Button x:Name="SaveButton" Content="Save">
    <Button.Resources>
        <TeachingTip x:Name="AutoSaveTip"
            Target="{x:Bind SaveButton}"
            Title="Saving automatically"
            Subtitle="We save your changes as you go - so you never have to."
            PreferredPlacement="BottomLeft">
        </TeachingTip>
    </Button.Resources>
</Button>

PreferredPlacement が "BottomLeft" に設定されたターゲット非指定の教育のヒントが、XAML ルートの左下隅に表示されます。

<Button x:Name="SaveButton" Content="Save" />

<TeachingTip x:Name="AutoSaveTip"
    Title="Saving automatically"
    Subtitle="We save your changes as you go - so you never have to."
    PreferredPlacement="BottomLeft">
</TeachingTip>

次の図は、ターゲット指定の教育のヒントに対して設定できる 13 個の PreferredPlacement モードすべての結果を示しています。

次の図は、ターゲット非指定の教育のヒントに対して設定できる 13 個の PreferredPlacement モードすべての結果を示しています。

配置の余白を追加する

PlacementMargin プロパティを使用して、対象指定された教育ヒントをターゲットから離す距離と、ターゲット以外の教育ヒントを xaml ルートの端から離す距離を制御できます。 Margin と同様に、PlacementMargin には左、右、上、下の 4 つの値があるため、関連する値のみが使用されます。 たとえば、PlacementMargin.Left は、ヒントがターゲットの左側にある場合や、XAML ルートの左端にある場合に適用されます。

次の例では、PlacementMargin の Left/Top/Right/Bottom がすべて 80 に設定された場合の、ターゲットを特定しないヒントが示されています。

<Button x:Name="SaveButton" Content="Save" />

<TeachingTip x:Name="AutoSaveTip"
    Title="Saving automatically"
    Subtitle="We save your changes as you go - so you never have to."
    PreferredPlacement="BottomLeft"
    PlacementMargin="80">
</TeachingTip>

コンテンツを追加する

Content プロパティを使用して、教育のヒントに コンテンツ を追加できます。 教育のヒントのサイズで収納できるコンテンツよりも多くのコンテンツを表示する場合、ユーザーがコンテンツ領域をスクロールできるスクロール バーが自動的に有効になります。

<Button x:Name="SaveButton" Content="Save">
    <Button.Resources>
        <TeachingTip x:Name="AutoSaveTip"
            Target="{x:Bind SaveButton}"
            Title="Saving automatically"
            Subtitle="We save your changes as you go - so you never have to.">
                <StackPanel>
                    <CheckBox x:Name="HideTipsCheckBox" Content="Don't show tips at start up" IsChecked="{x:Bind HidingTips, Mode=TwoWay}" />
                    <TextBlock>You can change your tip preferences in <Hyperlink NavigateUri="app:/item/SettingsPage">Settings</Hyperlink> if you change your mind.</TextBlock>
                </StackPanel>
        </TeachingTip>
    </Button.Resources>
</Button>

ボタンを追加する

既定では、標準の閉じるボタン "X" が、教育のヒントのタイトルの横に表示されます。 Close ボタンは CloseButtonContent プロパティを使用してカスタマイズできます。この場合、ボタンは教育ヒントの下部に移動されます。

注: 簡易非表示が有効なヒントの場合、閉じるボタンは表示されません

ActionButtonContent プロパティ (および必要に応じて ActionButtonCommand プロパティと ActionButtonCommandParameter プロパティ) を設定することで、カスタム アクション ボタンを追加できます。

<Button x:Name="SaveButton" Content="Save">
    <Button.Resources>
        <TeachingTip x:Name="AutoSaveTip"
            Target="{x:Bind SaveButton}"
            Title="Saving automatically"
            Subtitle="We save your changes as you go - so you never have to."
            ActionButtonContent="Disable"
            ActionButtonCommand="{x:Bind DisableAutoSaveCommand}"
            CloseButtonContent="Got it!">
                <StackPanel>
                    <CheckBox x:Name="HideTipsCheckBox" Content="Don't show tips at start up" IsChecked="{x:Bind HidingTips, Mode=TwoWay}" />
                    <TextBlock>You can change your tip preferences in <Hyperlink NavigateUri="app:/item/SettingsPage">Settings</Hyperlink> if you change your mind.</TextBlock>
                </StackPanel>
        </TeachingTip>
    </Button.Resources>
</Button>

ヒーロー コンテンツ

Edge から Edge へのコンテンツは、 HeroContent プロパティを設定することで、教育のヒントに追加できます。 HeroContentPlacement プロパティを設定することで、ヒーロー コンテンツの場所を教育ヒントの上部または下部に設定できます。

<Button x:Name="SaveButton" Content="Save">
    <Button.Resources>
        <TeachingTip x:Name="AutoSaveTip"
            Target="{x:Bind SaveButton}"
            Title="Saving automatically"
            Subtitle="We save your changes as you go - so you never have to.">
            <TeachingTip.HeroContent>
                <Image Source="Assets/cloud.png" />
            </TeachingTip.HeroContent>
        </TeachingTip>
    </Button.Resources>
</Button>

アイコンを追加する

IconSource プロパティを使用して、タイトルとサブタイトルの横に アイコン を追加できます。 推奨されるアイコンのサイズは 16px、24px、および 32px です。

<Button x:Name="SaveButton" Content="Save">
    <Button.Resources>
        <TeachingTip x:Name="AutoSaveTip"
            Target="{x:Bind SaveButton}"
            Title="Saving automatically"
            Subtitle="We save your changes as you go - so you never have to."
            <TeachingTip.IconSource>
                <SymbolIconSource Symbol="Save" />
            </TeachingTip.IconSource>
        </TeachingTip>
    </Button.Resources>
</Button>

ライトディスマスを有効にする

既定ではライト・ディスミス機能は無効になっていますが、IsLightDismissEnabled プロパティを設定することで有効にできます。このプロパティを設定すると、ユーザーがスクロールしたりアプリケーションの他の要素と対話したりすると、教育ヒントが非表示になります。 この振る舞いのため、スクロール可能な領域にヒントを配置する必要がある場合は、ライトディスミスのヒントが最適なソリューションとなります。

ライトディスミスが有効なティーチングチップでは、ユーザーにライトディスミスの動作を示すために、閉じるボタンが自動的に削除されます。

<Button x:Name="SaveButton" Content="Save" />

<TeachingTip x:Name="AutoSaveTip"
    Title="Saving automatically"
    Subtitle="We save your changes as you go - so you never have to."
    IsLightDismissEnabled="True">
</TeachingTip>

XAML ルート境界を抜け出す

Windows 10 バージョン 1903 (ビルド 18362) 以降では、ShouldConstrainToRootBounds プロパティを設定することで、XAML ルートや画面の境界を超えてティーチングヒントを表示できます。 このプロパティを有効にすると、教育のヒントは XAML ルートの境界の内側または画面に留まろうとせず、設定された PreferredPlacement モードの位置に常に配置されます。 最適なユーザー エクスペリエンスを確保するには、IsLightDismissEnabled プロパティを有効にして、XAML ルートの中央に最も近い PreferredPlacement モードを設定することをお勧めします。

以前のバージョンのWindowsでは、このプロパティは無視され、教育のヒントは常に XAML ルートの境界内にとどまります。

<Button x:Name="SaveButton" Content="Save" />

<TeachingTip x:Name="AutoSaveTip"
    Title="Saving automatically"
    Subtitle="We save your changes as you go - so you never have to."
    PreferredPlacement="BottomRight"
    PlacementMargin="-80,-50,0,0"
    ShouldConstrainToRootBounds="False">
</TeachingTip>

クロージングのキャンセルおよび延期

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

注

教育のヒントの完全な表示を許可する配置オプションが存在しない場合、教育のヒントは、使用可能な閉じるボタンのない状態で表示されるのではなく、閉じることを強制するためにイベントのライフ サイクルを通じて繰り返されます。 アプリが Closing イベントをキャンセルした場合、教育のヒントは使用可能な閉じるボタンがない状態で開いたままになることがあります。

<TeachingTip x:Name="EnableNewSettingsTip"
    Title="New ways to protect your privacy!"
    Subtitle="Please close this tip and review our updated privacy policy and privacy settings."
    Closing="OnTipClosing">
</TeachingTip>

private void OnTipClosing(muxc.TeachingTip sender, muxc.TeachingTipClosingEventArgs args)
{
    if (args.Reason == muxc.TeachingTipCloseReason.CloseButton)
    {
        using(args.GetDeferral())
        {
            bool success = UpdateUserSettings(User thisUsersID);
            if(!success)
            {
                // We were not able to update the settings!
                // Don't close the tip and display the reason why.
                args.Cancel = true;
                ShowLastErrorMessage();
            }
        }
    }
}

関連資料

• ダイアログとポップアップ