[C#/WINUI3/.NET8] Page 클래스 : PointerMoved 이벤트를 사용해 왼쪽 패널 표시 애니메이션 만들기

■ Page 클래스의 PointerMoved 이벤트를 사용해 왼쪽 패널 표시 애니메이션을 만드는 방법을 보여준다.

※ 마우스가 윈도우 좌측의 일정 공간 내에 진입시 왼쪽 패널이 FADE IN 애니메이션을 통해 서서히 표시된다.
※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다.
※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로 추가했다.

▶ MainPage.xaml


<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 Name="MainGrid"
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*"    />
        </Grid.ColumnDefinitions>
        <Grid Name="leftGrid" Grid.Column="0"
            Width="300"
            Background="LightGray"
            Opacity="0"
            Visibility="Collapsed">
            <TextBlock
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Text="왼쪽 패널" />
            <Button Name="closeButton"
                HorizontalAlignment="Right"
                VerticalAlignment="Top"
                Margin="10 10 10 10">
                <FontIcon
                    FontSize="12"
                    Glyph="&#xE8BB;"/>
            </Button>
        </Grid>
        <TextBlock Name="mainTextBlock" Grid.Column="1"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Text="메인 콘텐츠" />
    </Grid>
</Page>

<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 Name="MainGrid"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid Name="leftGrid" Grid.Column="0"

Width="300"

Background="LightGray"

Opacity="0"

Visibility="Collapsed">

<TextBlock

HorizontalAlignment="Center"

VerticalAlignment="Center"

Text="왼쪽 패널" />

<Button Name="closeButton"

HorizontalAlignment="Right"

VerticalAlignment="Top"

Margin="10 10 10 10">

<FontIcon

FontSize="12"

Glyph=""/>

</Button>

</Grid>

<TextBlock Name="mainTextBlock" Grid.Column="1"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Text="메인 콘텐츠" />

</Grid>

</Page>

▶ MainPage.xaml.cs


using System;

using Windows.Foundation;

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Microsoft.UI.Xaml.Input;
using Microsoft.UI.Xaml.Media.Animation;

namespace TestProject;

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

    #region 생성자 - MainPage()

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

        PointerMoved           += Page_PointerMoved;
        this.closeButton.Click += closeButton_Click;
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Private
    //////////////////////////////////////////////////////////////////////////////// Event

    #region 페이지 포인터 이동시 처리하기 - Page_PointerMoved(sender, e)

    /// <summary>
    /// 페이지 포인터 이동시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void Page_PointerMoved(object sender, PointerRoutedEventArgs e)
    {
        Point mousePoint = e.GetCurrentPoint(this).Position;

        if(mousePoint.X <= 50)
        {
            ShowLeftPanel();
        }
        else if(this.leftGrid.Opacity == 1 && mousePoint.X > this.leftGrid.ActualWidth)
        {
            HideLeftPanel();
        }
    }

    #endregion
    #region 닫기 버튼 클릭시 처리하기 - closeButton_Click(sender, e)

    /// <summary>
    /// 닫기 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void closeButton_Click(object sender, RoutedEventArgs e)
    {
        HideLeftPanel();
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////// Function

    #region 왼쪽 패널 표시하기 - ShowLeftPanel()

    /// <summary>
    /// 왼쪽 패널 표시하기
    /// </summary>
    private void ShowLeftPanel()
    {
        if (this.leftGrid.Visibility == Visibility.Collapsed)
        {
            this.leftGrid.Visibility = Visibility.Visible;

            DoubleAnimation fadeInAnimation = new DoubleAnimation
            {
                Duration = new Duration(TimeSpan.FromMilliseconds(300)),
                From     = 0,
                To       = 1
            };

            Storyboard.SetTarget(fadeInAnimation, this.leftGrid);
            Storyboard.SetTargetProperty(fadeInAnimation, "Opacity");

            Storyboard storyboard = new Storyboard();

            storyboard.Children.Add(fadeInAnimation);

            storyboard.Begin();
        }
    }

    #endregion
    #region 왼쪽 패널 숨기기 - HideLeftPanel()

    /// <summary>
    /// 왼쪽 패널 숨기기
    /// </summary>
    private void HideLeftPanel()
    {
        if(this.leftGrid.Visibility == Visibility.Visible)
        {
            DoubleAnimation fadeOutAnimation = new DoubleAnimation
            {
                Duration = new Duration(TimeSpan.FromMilliseconds(300)),
                From     = 1,
                To       = 0
            };

            Storyboard.SetTarget(fadeOutAnimation, this.leftGrid);
            Storyboard.SetTargetProperty(fadeOutAnimation, "Opacity");

            Storyboard storyboard = new Storyboard();

            storyboard.Children.Add(fadeOutAnimation);

            storyboard.Completed += (sender, e) => this.leftGrid.Visibility = Visibility.Collapsed;

            storyboard.Begin();
        }
    }

    #endregion
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

using System;

using Windows.Foundation;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Input;

using Microsoft.UI.Xaml.Media.Animation;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

PointerMoved += Page_PointerMoved;

this.closeButton.Click += closeButton_Click;

}

#endregion

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

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

//////////////////////////////////////////////////////////////////////////////// Event

#region 페이지 포인터 이동시 처리하기 - Page_PointerMoved(sender, e)

/// <summary>

/// 페이지 포인터 이동시 처리하기

/// </summary>

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

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

private void Page_PointerMoved(object sender, PointerRoutedEventArgs e)

{

Point mousePoint = e.GetCurrentPoint(this).Position;

if(mousePoint.X <= 50)

{

ShowLeftPanel();

}

else if(this.leftGrid.Opacity == 1 && mousePoint.X > this.leftGrid.ActualWidth)

{

HideLeftPanel();

}

#endregion

#region 닫기 버튼 클릭시 처리하기 - closeButton_Click(sender, e)

/// <summary>

/// 닫기 버튼 클릭시 처리하기

/// </summary>

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

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

private void closeButton_Click(object sender, RoutedEventArgs e)

{

HideLeftPanel();

}

#endregion

//////////////////////////////////////////////////////////////////////////////// Function

#region 왼쪽 패널 표시하기 - ShowLeftPanel()

/// <summary>

/// 왼쪽 패널 표시하기

/// </summary>

private void ShowLeftPanel()

{

if (this.leftGrid.Visibility == Visibility.Collapsed)

{

this.leftGrid.Visibility = Visibility.Visible;

DoubleAnimation fadeInAnimation = new DoubleAnimation

{

Duration = new Duration(TimeSpan.FromMilliseconds(300)),

From = 0,

To = 1

};

Storyboard.SetTarget(fadeInAnimation, this.leftGrid);

Storyboard.SetTargetProperty(fadeInAnimation, "Opacity");

Storyboard storyboard = new Storyboard();

storyboard.Children.Add(fadeInAnimation);

storyboard.Begin();

}

#endregion

#region 왼쪽 패널 숨기기 - HideLeftPanel()

/// <summary>

/// 왼쪽 패널 숨기기

/// </summary>

private void HideLeftPanel()

{

if(this.leftGrid.Visibility == Visibility.Visible)

{

DoubleAnimation fadeOutAnimation = new DoubleAnimation

{

Duration = new Duration(TimeSpan.FromMilliseconds(300)),

From = 1,

To = 0

};

Storyboard.SetTarget(fadeOutAnimation, this.leftGrid);

Storyboard.SetTargetProperty(fadeOutAnimation, "Opacity");

Storyboard storyboard = new Storyboard();

storyboard.Children.Add(fadeOutAnimation);

storyboard.Completed += (sender, e) => this.leftGrid.Visibility = Visibility.Collapsed;

storyboard.Begin();

}

#endregion

}

TestProject.zip