[C#/WPF/.NET8] Window 엘리먼트 : 로드시 UI 구성 요소 오른쪽에서 왼쪽으로 슬라이드 애니메이션 만들기

■ Window 엘리먼트 로드시 UI 구성 요소를 오른쪽에서 왼쪽으로 슬라이드하는 애니메이션을 만드는 방법을 보여준다.

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Window.Resources>
        <Storyboard x:Key="SlideInFromRightStoryboardKey">
            <ThicknessAnimation
                Storyboard.TargetProperty="Margin"
                Duration="00:00:00.5"
                From="800 0 -800 0"
                To="0">
                <ThicknessAnimation.EasingFunction>
                    <CubicEase EasingMode="EaseOut" />
                </ThicknessAnimation.EasingFunction>
            </ThicknessAnimation>
        </Storyboard>
    </Window.Resources>
    <Grid
        Margin="800 0 -800 0"
        Background="Transparent">
        <Grid.Triggers>
            <EventTrigger RoutedEvent="Loaded">
                <BeginStoryboard Storyboard="{StaticResource SlideInFromRightStoryboardKey}" />
            </EventTrigger>
        </Grid.Triggers>
        <Ellipse
            Width="300"
            Height="300"
            Fill="Blue" />
        <Ellipse
            Width="200"
            Height="200"
            Fill="Gold" />
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

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

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

Width="800"

Height="600"

Title="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<Window.Resources>

<ThicknessAnimation

Storyboard.TargetProperty="Margin"

Duration="00:00:00.5"

From="800 0 -800 0"

To="0">

<ThicknessAnimation.EasingFunction>

</ThicknessAnimation.EasingFunction>

</ThicknessAnimation>

</Storyboard>

</Window.Resources>

<Grid

Margin="800 0 -800 0"

Background="Transparent">

<Grid.Triggers>

</EventTrigger>

</Grid.Triggers>

<Ellipse

Width="300"

Height="300"

Fill="Blue" />

<Ellipse

Width="200"

Height="200"

Fill="Gold" />

</Grid>

</Window>

TestProject.zip