[C#/WINUI3/.NET8] 윈도우 왼쪽 패널 확장/축소 애니메이션 만들기

■ 윈도우의 왼쪽 패널을 확장하거나 축소시키는 애니메이션을 만드는 방법을 보여준다.

※ 비주얼 스튜디오에서 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}">
    <Grid>
        <Image
            Stretch="UniformToFill"
            Source="/Assets/house.jpg" />
        <Grid Name="outerGrid">
            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="columnDefinition1"
                    Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Grid Name="leftPanelGrid" Grid.Column="0"
                Width="400"
                Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}">
                <Grid.RenderTransform>
                    <TranslateTransform x:Name="translateTransform" />
                </Grid.RenderTransform>
                <StackPanel Margin="20">
                    <TextBlock
                        Foreground="Black"
                        FontSize="24"
                        Text="왼쪽 패널" />
                    <TextBlock
                        Margin="0 20 0 0"
                        TextWrapping="Wrap"
                        Foreground="Black"
                        FontSize="16"
                        Text="이곳에 원하는 내용을 넣으세요." />
                </StackPanel>
                <Button Name="toggleButton"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Top"
                    Margin="0 5 5 0"
                    Width="40"
                    Height="40"
                    Background="Transparent">
                    <FontIcon Name="toggleIcon"
                        FontFamily="Segoe MDL2 Assets"
                        FontSize="16"
                        Glyph="&#xF0D5;" />
                </Button>
            </Grid>
            <Border Grid.Column="1"
                Margin="50">
                <Border.Background>
                    <AcrylicBrush
                        TintColor="{ThemeResource SystemAccentColorLight3}"
                        TintOpacity="0.2"
                        FallbackColor="{ThemeResource SystemAccentColorLight3}" />
                </Border.Background>
                <StackPanel Margin="20">
                    <TextBlock
                        Foreground="Black"
                        FontSize="24"
                        Text="본문 패널" />
                    <TextBlock
                        Margin="0 20 0 0"
                        TextWrapping="Wrap"
                        Foreground="Black"
                        FontSize="16"
                        Text="이곳에 원하는 내용을 넣으세요." />
                </StackPanel>
            </Border>
        </Grid>
     </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}">

<Grid>

<Image

Stretch="UniformToFill"

Source="/Assets/house.jpg" />

<Grid.ColumnDefinitions>

<ColumnDefinition x:Name="columnDefinition1"

Width="Auto" />

</Grid.ColumnDefinitions>

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

Width="400"

Background="{ThemeResource AcrylicInAppFillColorDefaultBrush}">

<Grid.RenderTransform>

</Grid.RenderTransform>

<TextBlock

Foreground="Black"

FontSize="24"

Text="왼쪽 패널" />

<TextBlock

Margin="0 20 0 0"

TextWrapping="Wrap"

Foreground="Black"

FontSize="16"

Text="이곳에 원하는 내용을 넣으세요." />

</StackPanel>

<Button Name="toggleButton"

HorizontalAlignment="Right"

VerticalAlignment="Top"

Margin="0 5 5 0"

Width="40"

Height="40"

Background="Transparent">

<FontIcon Name="toggleIcon"

FontFamily="Segoe MDL2 Assets"

FontSize="16"

Glyph="" />

</Button>

</Grid>

<Border Grid.Column="1"

Margin="50">

<Border.Background>

<AcrylicBrush

TintColor="{ThemeResource SystemAccentColorLight3}"

TintOpacity="0.2"

FallbackColor="{ThemeResource SystemAccentColorLight3}" />

</Border.Background>

<TextBlock

Foreground="Black"

FontSize="24"

Text="본문 패널" />

<TextBlock

Margin="0 20 0 0"

TextWrapping="Wrap"

Foreground="Black"

FontSize="16"

Text="이곳에 원하는 내용을 넣으세요." />

</StackPanel>

</Border>

</Grid>

</Page>

▶ MainPage.xaml.cs


using System;
using System.Threading.Tasks;

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

namespace TestProject;

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

    #region Field

    /// <summary>
    /// 패널 확장 여부
    /// </summary>
    private bool isPanelExpanded = true;

    /// <summary>
    /// 패널 접을 경우 너비
    /// </summary>
    private const double PANEL_COLLAPSED_WIDTH = 55;

    /// <summary>
    /// 패널 애니메이션 경과 시간
    /// </summary>
    private const int PANEL_ANIMATION_DURATION = 300;

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructir
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - MainPage()

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

        this.toggleButton.Click += toggleButton_Click;
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Prvate

    #region 토글 버튼 클릭시 처리하기 - toggleButton_Click(sender, e)

    /// <summary>
    /// 토글 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private async void toggleButton_Click(object sender, RoutedEventArgs e)
    {
        if(!this.isPanelExpanded)
        {
            this.outerGrid.ColumnDefinitions[0].Width = new GridLength(1, GridUnitType.Auto);
        }

        double targetX = this.isPanelExpanded ? -(this.leftPanelGrid.ActualWidth - PANEL_COLLAPSED_WIDTH) : 0;

        DoubleAnimation doubleAnimation = new DoubleAnimation
        {
            EasingFunction = new CubicEase { EasingMode = EasingMode.EaseInOut },
            Duration       = TimeSpan.FromMilliseconds(PANEL_ANIMATION_DURATION),
            To             = targetX
        };

        Storyboard.SetTarget(doubleAnimation, this.translateTransform);
        Storyboard.SetTargetProperty(doubleAnimation, "X");

        Storyboard storyboard = new Storyboard();

        storyboard.Children.Add(doubleAnimation);

        storyboard.Begin();

        this.isPanelExpanded = !this.isPanelExpanded;

        this.toggleIcon.Glyph = this.isPanelExpanded ? "\uF0D5" : "\uF0D6";

        await Task.Delay(PANEL_ANIMATION_DURATION);

        if(!this.isPanelExpanded)
        {
            this.outerGrid.ColumnDefinitions[0].Width = new GridLength(PANEL_COLLAPSED_WIDTH);
        }
    }

    #endregion
}

100

101

102

103

104

using System;

using System.Threading.Tasks;

using Microsoft.UI.Xaml;

using Microsoft.UI.Xaml.Controls;

using Microsoft.UI.Xaml.Media.Animation;

namespace TestProject;

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

//////////////////////////////////////////////////////////////////////////////////////////////////// Field

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

#region Field

/// <summary>

/// 패널 확장 여부

/// </summary>

private bool isPanelExpanded = true;

/// <summary>

/// 패널 접을 경우 너비

/// </summary>

private const double PANEL_COLLAPSED_WIDTH = 55;

/// <summary>

/// 패널 애니메이션 경과 시간

/// </summary>

private const int PANEL_ANIMATION_DURATION = 300;

#endregion

//////////////////////////////////////////////////////////////////////////////////////////////////// Constructir

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

this.toggleButton.Click += toggleButton_Click;

}

#endregion

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

////////////////////////////////////////////////////////////////////////////////////////// Prvate

#region 토글 버튼 클릭시 처리하기 - toggleButton_Click(sender, e)

/// <summary>

/// 토글 버튼 클릭시 처리하기

/// </summary>

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

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

private async void toggleButton_Click(object sender, RoutedEventArgs e)

{

if(!this.isPanelExpanded)

{

this.outerGrid.ColumnDefinitions[0].Width = new GridLength(1, GridUnitType.Auto);

}

double targetX = this.isPanelExpanded ? -(this.leftPanelGrid.ActualWidth - PANEL_COLLAPSED_WIDTH) : 0;

DoubleAnimation doubleAnimation = new DoubleAnimation

{

EasingFunction = new CubicEase { EasingMode = EasingMode.EaseInOut },

Duration = TimeSpan.FromMilliseconds(PANEL_ANIMATION_DURATION),

To = targetX

};

Storyboard.SetTarget(doubleAnimation, this.translateTransform);

Storyboard.SetTargetProperty(doubleAnimation, "X");

Storyboard storyboard = new Storyboard();

storyboard.Children.Add(doubleAnimation);

storyboard.Begin();

this.isPanelExpanded = !this.isPanelExpanded;

this.toggleIcon.Glyph = this.isPanelExpanded ? "\uF0D5" : "\uF0D6";

await Task.Delay(PANEL_ANIMATION_DURATION);

if(!this.isPanelExpanded)

{

this.outerGrid.ColumnDefinitions[0].Width = new GridLength(PANEL_COLLAPSED_WIDTH);

}

#endregion

}

TestProject.zip