[C#/WINUI3/.NET8] TeachingTip 엘리먼트 : PlacementMargin/PreferredPlacement/TailVisibility 속성을 사용해 Target 속성 설정없이 티칭팁 표시하기

■ TeachingTip 엘리먼트의 PlacementMargin/PreferredPlacement/TailVisibility 속성을 사용해 Target 속성 설정없이 티칭팁 표시하기

※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다.
※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로 추가했다.

▶ MainPage.xaml


<?xml version="1.0" encoding="utf-8"?>
<Page x:Class="TestProject.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <Button Name="showButton"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Padding="10"
            Content="티칭팁 표시" />
        <TeachingTip Name="teachingTip"
            Title="자동 저장"
            Subtitle="변경 사항을 작업 중에 자동으로 저장해서 변경 사항을 저장할 필요가 없습니다."
            PlacementMargin="100"
            PreferredPlacement="BottomRight"
            TailVisibility="Collapsed">
        </TeachingTip>
    </Grid>
</Page>

<?xml version="1.0" encoding="utf-8"?>

<Page x:Class="TestProject.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<Button Name="showButton"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Padding="10"

Content="티칭팁 표시" />

<TeachingTip Name="teachingTip"

Title="자동 저장"

Subtitle="변경 사항을 작업 중에 자동으로 저장해서 변경 사항을 저장할 필요가 없습니다."

PlacementMargin="100"

PreferredPlacement="BottomRight"

TailVisibility="Collapsed">

</TeachingTip>

</Grid>

</Page>

▶ MainPage.xaml.cs


using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

namespace TestProject;

/// <summary>
/// 메인 페이지
/// </summary>
public sealed partial class MainPage : Page
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - MainPage()

    /// <summary>
    /// 생성자
    /// </summary>
    public MainPage()
    {
        InitializeComponent();

        this.showButton.Click   += showButton_Click;
        this.teachingTip.Closed += teachingTip_Closed;
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 티칭팁 표시 버튼 클릭시 처리하기 - showButton_Click(sender, e)

    /// <summary>
    /// 티칭팁 표시 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void showButton_Click(object sender, RoutedEventArgs e)
    {
        this.showButton.IsEnabled = false;
        this.teachingTip.IsOpen   = true;
    }

    #endregion
    #region 티칭팁 닫힌 경우 처리하기 - teachingTip_Closed(sender, e)

    /// <summary>
    /// 티칭팁 닫힌 경우 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void teachingTip_Closed(TeachingTip sender, TeachingTipClosedEventArgs e)
    {
        this.showButton.IsEnabled = true;
    }

    #endregion
}

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.showButton.Click += showButton_Click;

this.teachingTip.Closed += teachingTip_Closed;

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructor

////////////////////////////////////////////////////////////////////////////////////////// Public

#region 티칭팁 표시 버튼 클릭시 처리하기 - showButton_Click(sender, e)

/// <summary>

/// 티칭팁 표시 버튼 클릭시 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void showButton_Click(object sender, RoutedEventArgs e)

{

this.showButton.IsEnabled = false;

this.teachingTip.IsOpen = true;

}

#endregion

#region 티칭팁 닫힌 경우 처리하기 - teachingTip_Closed(sender, e)

/// <summary>

/// 티칭팁 닫힌 경우 처리하기

/// </summary>

/// <param name="sender">이벤트 발생자</param>

/// <param name="e">이벤트 인자</param>

private void teachingTip_Closed(TeachingTip sender, TeachingTipClosedEventArgs e)

{

this.showButton.IsEnabled = true;

}

#endregion

}

TestProject.zip