[C#/WINUI3/.NET8] FlyoutBase 엘리먼트 : AttachedFlyout 첨부 속성을 사용해 Flyout 엘리먼트 설정하기 2

■ FlyoutBase 엘리먼트의 AttachedFlyout 첨부 속성을 사용해 Flyout 엘리먼트를 설정하는 방법을 보여준다.

※ 비주얼 스튜디오에서 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">
    <Page.Resources>
        <Flyout x:Key="ImagePreviewFlyoutKey"
            Placement="Right">
            <Image
                MaxWidth="400"
                MaxHeight="400"
                Stretch="Uniform"
                Source="{Binding Path=Source}" />
        </Flyout>
    </Page.Resources>
    <StackPanel
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        Margin="50"
        Spacing="10">
        <Image
            Width="100"
            Height="100"
            DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"
            FlyoutBase.AttachedFlyout="{StaticResource ImagePreviewFlyoutKey}"
            Source="Assets/cliff.jpg"
            Tapped="image_Tapped" />
        <Image
            Width="100"
            Height="100"
            DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"
            FlyoutBase.AttachedFlyout="{StaticResource ImagePreviewFlyoutKey}"
            Source="Assets/grapes.jpg"
            Tapped="image_Tapped" />
        <Image
            Width="100"
            Height="100"
            DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"
            FlyoutBase.AttachedFlyout="{StaticResource ImagePreviewFlyoutKey}"
            Source="Assets/rainier.jpg"
            Tapped="image_Tapped" />
    </StackPanel>
</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">

<Page.Resources>

<Flyout x:Key="ImagePreviewFlyoutKey"

Placement="Right">

<Image

MaxWidth="400"

MaxHeight="400"

Stretch="Uniform"

Source="{Binding Path=Source}" />

</Flyout>

</Page.Resources>

<StackPanel

HorizontalAlignment="Left"

VerticalAlignment="Top"

Margin="50"

Spacing="10">

<Image

Width="100"

Height="100"

DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"

FlyoutBase.AttachedFlyout="{StaticResource ImagePreviewFlyoutKey}"

Source="Assets/cliff.jpg"

Tapped="image_Tapped" />

<Image

Width="100"

Height="100"

DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"

FlyoutBase.AttachedFlyout="{StaticResource ImagePreviewFlyoutKey}"

Source="Assets/grapes.jpg"

Tapped="image_Tapped" />

<Image

Width="100"

Height="100"

DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"

FlyoutBase.AttachedFlyout="{StaticResource ImagePreviewFlyoutKey}"

Source="Assets/rainier.jpg"

Tapped="image_Tapped" />

</StackPanel>

</Page>

▶ MainPage.xaml.cs


using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Controls.Primitives;
using Microsoft.UI.Xaml.Input;

namespace TestProject;

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

    #region 생성자 - MainPage()

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

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region 이미지 탭 처리하기 - image_Tapped(sender, e)

    /// <summary>
    /// 이미지 탭 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void image_Tapped(object sender, TappedRoutedEventArgs e)
    {
        FlyoutBase.ShowAttachedFlyout(sender as FrameworkElement);
    }

    #endregion
}

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Controls.Primitives;

using Microsoft.UI.Xaml.Input;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

}

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Method

////////////////////////////////////////////////////////////////////////////////////////// Private

#region 이미지 탭 처리하기 - image_Tapped(sender, e)

/// <summary>

/// 이미지 탭 처리하기

/// </summary>

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

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

private void image_Tapped(object sender, TappedRoutedEventArgs e)

{

FlyoutBase.ShowAttachedFlyout(sender as FrameworkElement);

}

#endregion

}

TestProject.zip