교육 팁

교육 팁은 상황에 맞는 정보를 제공하는 풍부한 콘텐츠의 반영구적 팝업 창입니다. 작업 환경을 개선할 수 있는 중요한 새 기능을 사용자에게 알리고 교육하는 데 주로 사용됩니다.

교육 팁은 빠르게 해제되거나 닫기 위해 명시적 작업이 필요할 수 있습니다. 교육 팁은 꼬리를 사용하여 특정 UI 요소를 대상으로 지정할 수 있으며, 꼬리 또는 대상 없이 사용할 수도 있습니다.

이것이 올바른 컨트롤인가요?

TeachingTip 컨트롤을 사용하여 새롭거나 중요한 업데이트 및 기능에 사용자의 관심을 집중시키거나, 작업 환경을 향상시킬 수 있는 비필수 옵션을 사용자에게 미리 알리거나, 작업 완료 방법을 사용자에게 알려줍니다.

교육 팁은 일시적이므로 사용자에게 오류 또는 중요한 상태 변경을 알릴 때 권장되는 컨트롤은 아닙니다.

Recommendations

• 팁은 영구적이지 않으며 애플리케이션 환경에 중요한 정보 또는 옵션을 포함하지 않아야 합니다.
• 교육 팁을 너무 자주 표시하지 않도록 합니다. 교육 팁은 긴 세션 동안이나 여러 세션에 걸쳐 배치될 때 각각 개별적으로 주목받을 가능성이 가장 높습니다.
• 팁을 간결하게 유지하고 주제를 명확히 드러냅니다. 연구에 따르면 사용자는 팁과 상호 작용할지 결정하기 전에 평균적으로 3 ~ 5개 단어만 읽으며 2-3개 단어만 이해한다고 합니다.
• 교육 팁의 게임 패드 액세스 가능성은 보장되지 않습니다. 게임 패드 입력을 예측하는 애플리케이션의 경우 게임 패드 및 리모컨 조작을 참조하세요. 앱 UI의 가능한 모든 구성을 사용하여 각 교육 팁의 게임 패드 액세스 가능성을 테스트하는 것이 좋습니다.
• 교육 팁이 xaml 루트를 벗어나도록 설정할 때에는 IsLightDismissEnabled 속성을 활성화하고 PreferredPlacement 모드를 xaml 루트의 중심에 가장 가깝게 설정하는 것이 권장됩니다.

열린 교육 팁 다시 구성

교육 팁이 열려 있으며 즉시 적용될 경우 일부 콘텐츠 및 속성을 다시 구성할 수 있습니다. 다른 콘텐츠 및 속성(예: 아이콘 속성), 작업 및 닫기 단추, 그리고 빠른 해제와 명시적 해제 간의 재구성을 통해 변경된 속성의 적용을 위해서는 교육 팁을 닫았다가 다시 열어야 합니다. 교육 팁을 열어 놓은 상태에서 해제 동작을 수동 해제에서 빠른 해제로 변경하면 빠른 해제 동작이 사용되기 전에 교육 팁의 닫기 단추가 제거되므로 팁이 화면에 표시된 상태를 계속 유지할 수 있습니다.

예시

교육 팁에는 다음과 같은 주목할 만한 구성을 포함하여 몇 가지 구성이 있을 수 있습니다.

교육 팁은 꼬리로 특정 UI 요소를 대상으로 지정하여 나타내는 정보의 컨텍스트 명확성을 높일 수 있습니다.

제공된 정보가 특정 UI 요소에 적용되지 않는 경우 해당 꼬리를 제거하여 대상이 없는 교육 팁을 만들 수 있습니다.

교육 팁은 사용자가 위쪽 모서리의 "X" 버튼이나 아래쪽의 "닫기" 버튼을 통해 해제할 수 있습니다. 교육 팁은 해제 단추가 없는 경우에 빠른 해제를 설정할 수 있으며, 사용자가 스크롤하거나 애플리케이션의 다른 요소와 상호 작용할 때 해제됩니다. 이러한 특성으로 인해, 팁을 스크롤 가능한 영역에 배치해야 하는 경우, 라이트 해제 팁이 가장 적합한 해결 방법입니다.

교육 팁 만들기

• 중요 API:TeachingTip 클래스

WinUI 갤러리 앱을 열고 작동 중인 TeachingTip을 확인합니다.

WinUI 3 갤러리 앱을 사용하면 WinUI 3 컨트롤, 기능 및 기능의 대화형 예제를 탐색하고 찾아볼 수 있습니다. 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가지 값인 left, right, top, bottom이 있으며 해당하는 값만 사용됩니다. 예를 들어, 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" 닫기 단추는 교육 팁의 제목 옆에 표시됩니다. 닫기 단추는 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>

Hero 콘텐츠

가장자리 간 콘텐츠는 HeroContent 속성을 설정하여 교육 팁에 추가할 수 있습니다. Hero 콘텐츠의 위치는 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 속성을 사용하고 PreferredPlacement 모드를 XAML 루트의 중심에 가장 가깝게 설정하여 사용자에게 최상의 환경을 제공하는 것이 좋습니다.

이전 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();
            }
        }
    }
}

UWP용 UWP 및 WinUI

중요합니다

이 문서의 정보 및 예제는 Windows 앱 SDK 및 WinUI 3를 사용하는 앱에 최적화되어 있지만 WinUI 2를 사용하는 UWP 앱에도 대체로 적용 가능합니다. 플랫폼별 정보 및 예제는 UWP API 참조를 확인하세요.

이 섹션에는 UWP 또는 WinUI 2 앱에서 컨트롤을 사용하는 데 필요한 정보가 있습니다.

UWP 앱용 TeachingTip에는 UWP용 WinUI가 필요합니다. 설치 지침을 비롯한 자세한 내용은 WinUI를 참조하세요. 이 컨트롤에 대한 API는 Microsoft.UI.Xaml.Controls 네임스페이스에 있습니다.

• UWP API용 WinUI:TeachingTip 클래스
• UWP 갤러리용 WinUI 앱을 열고 작동 중인 TeachingTip을 확인합니다. WinUI 2 갤러리 앱에는 대부분의 WinUI 2 컨트롤, 특징, 기능의 대화형 예제가 포함되어 있습니다. Microsoft Store에서 앱을 가져오거나 GitHub에서 소스 코드를 가져옵니다.

이 문서의 코드를 WinUI 2와 함께 사용하려면 XAML의 별칭(여기서는 muxc를 사용)을 사용하여 프로젝트에 포함된 Windows UI 라이브러리 API를 표현합니다. 자세한 내용은 WinUI 2 시작을 참조하세요.

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

<muxc:TeachingTip />

관련 문서

• 대화 상자 및 플라이아웃