[C#/WINUI3/.NET6] ScrollView 클래스 : ScrollAnimationStarting 이벤트를 사용해 스크롤 애니메이션 처리하기

■ ScrollView 클래스의 ScrollAnimationStarting 이벤트를 사용해 스크롤 애니메이션을 처리하는 방법을 보여준다.

▶ 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 Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"    />
            <ColumnDefinition Width="10"   />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <ScrollView Name="scrollView" Grid.Column="0"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="400"
            Height="300"
            IsTabStop="True">
            <StackPanel>
                <Image Source="ms-appx:///IMAGE/grapes.jpg"   Stretch="Uniform" />
                <Image Source="ms-appx:///IMAGE/rainier.jpg"  Stretch="Uniform" />
                <Image Source="ms-appx:///IMAGE/sunset.jpg"   Stretch="Uniform" />
                <Image Source="ms-appx:///IMAGE/treetops.jpg" Stretch="Uniform" />
                <Image Source="ms-appx:///IMAGE/valley.jpg"   Stretch="Uniform" />
                <Image Source="ms-appx:///IMAGE/cliff.jpg"    Stretch="Uniform" />
                <Image Source="ms-appx:///IMAGE/grapes.jpg"   Stretch="Uniform" />
                <Image Source="ms-appx:///IMAGE/rainier.jpg"  Stretch="Uniform" />
                <Image Source="ms-appx:///IMAGE/sunset.jpg"   Stretch="Uniform" />
                <Image Source="ms-appx:///IMAGE/treetops.jpg" Stretch="Uniform" />
                <Image Source="ms-appx:///IMAGE/valley.jpg"   Stretch="Uniform" />
                <Image Source="ms-appx:///IMAGE/cliff.jpg"    Stretch="Uniform" />
            </StackPanel>
        </ScrollView>
        <Grid Grid.Column="2"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            RowDefinitions="Auto,Auto,Auto"
            ColumnDefinitions="Auto,*">
            <TextBlock Grid.Row="0" Grid.Column="0"
                HorizontalAlignment="Right"
                VerticalAlignment="Center"
                Text="Scroll with animation"/>
            <ComboBox Name="vcerticalAnimationComboBox" Grid.Row="0" Grid.Column="1"
                Margin="10 0 0 0"
                SelectedIndex="0">
                <ComboBoxItem>Default</ComboBoxItem>
                <ComboBoxItem>Accordion</ComboBoxItem>
                <ComboBoxItem>Teleportation</ComboBoxItem>
            </ComboBox>
            <TextBlock Grid.Row="1" Grid.Column="0"
                HorizontalAlignment="Right"
                VerticalAlignment="Center"
                Margin="0 10 0 0"
                Text="Animation duration (msec)" />
            <NumberBox Name="animationDurationNumberBox" Grid.Row="1" Grid.Column="1"
                Margin="10 10 0 0"
                Minimum="1000"
                Maximum="5000"
                Value="1500"
                SpinButtonPlacementMode="Inline"
                SmallChange="500"
                LargeChange="1000">
            </NumberBox>
            <Button Name="scrollButton" Grid.Row="2" Grid.ColumnSpan="2"
                HorizontalAlignment="Center"
                Margin="0 10 0 0"
                Padding="10"
                Content="Scroll with animation" />
        </Grid>
    </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.ColumnDefinitions>

</Grid.ColumnDefinitions>

<ScrollView Name="scrollView" Grid.Column="0"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="400"

Height="300"

IsTabStop="True">

</StackPanel>

</ScrollView>

<Grid Grid.Column="2"

HorizontalAlignment="Center"

VerticalAlignment="Center"

RowDefinitions="Auto,Auto,Auto"

ColumnDefinitions="Auto,*">

<TextBlock Grid.Row="0" Grid.Column="0"

HorizontalAlignment="Right"

VerticalAlignment="Center"

Text="Scroll with animation"/>

<ComboBox Name="vcerticalAnimationComboBox" Grid.Row="0" Grid.Column="1"

Margin="10 0 0 0"

SelectedIndex="0">

<ComboBoxItem>Default</ComboBoxItem>

<ComboBoxItem>Accordion</ComboBoxItem>

<ComboBoxItem>Teleportation</ComboBoxItem>

</ComboBox>

<TextBlock Grid.Row="1" Grid.Column="0"

HorizontalAlignment="Right"

VerticalAlignment="Center"

Margin="0 10 0 0"

Text="Animation duration (msec)" />

<NumberBox Name="animationDurationNumberBox" Grid.Row="1" Grid.Column="1"

Margin="10 10 0 0"

Minimum="1000"

Maximum="5000"

Value="1500"

SpinButtonPlacementMode="Inline"

SmallChange="500"

LargeChange="1000">

</NumberBox>

<Button Name="scrollButton" Grid.Row="2" Grid.ColumnSpan="2"

HorizontalAlignment="Center"

Margin="0 10 0 0"

Padding="10"

Content="Scroll with animation" />

</Grid>

</Page>

▶ MainPage.xaml.cs


using System;
using System.Numerics;

using Microsoft.UI.Composition;
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.scrollView.ScrollAnimationStarting += scrollView_ScrollAnimationStarting;
            this.scrollButton.Click                 += scrollButton_Click;
        }

        #endregion

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

        #region 스크롤 뷰 스크롤 애니메이션 시작시 처리하기 - scrollView_ScrollAnimationStarting(sender, e)

        /// <summary>
        /// 스크롤 뷰 스크롤 애니메이션 시작시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void scrollView_ScrollAnimationStarting(ScrollView sender, ScrollingScrollAnimationStartingEventArgs e)
        {
            Vector3KeyFrameAnimation animation1 = e.Animation as Vector3KeyFrameAnimation;

            if(animation1 != null)
            {
                if(this.vcerticalAnimationComboBox.SelectedIndex == 0)
                {
                    animation1.Duration = TimeSpan.FromMilliseconds(this.animationDurationNumberBox.Value);
                }
                else
                {
                    double targetVerticalOffset = GetTargetVerticalOffset();

                    float targetVerticalPosition = (float)targetVerticalOffset;

                    Vector3KeyFrameAnimation animation2 = animation1.Compositor.CreateVector3KeyFrameAnimation();

                    if(this.vcerticalAnimationComboBox.SelectedIndex == 1)
                    {
                        float deltaVerticalPosition = 0.1f * (float)(targetVerticalOffset - this.scrollView.VerticalOffset);

                        for(int step = 0; step < 3; step++)
                        {
                            animation2.InsertKeyFrame
                            (
                                1.0f - (0.4f / (float)Math.Pow(2, step)),
                                new Vector3
                                (
                                    (float)this.scrollView.HorizontalOffset,
                                    targetVerticalPosition + deltaVerticalPosition,
                                    0.0f
                                )
                            );

                            deltaVerticalPosition /= -2.0f;
                        }

                        animation2.InsertKeyFrame(1.0f, new Vector3((float)this.scrollView.HorizontalOffset, targetVerticalPosition, 0.0f));
                    }
                    else
                    {
                        float deltaVerticalPosition = (float)(targetVerticalOffset - this.scrollView.VerticalOffset);

                        CubicBezierEasingFunction startCubicBezierEasingFunction = animation1.Compositor.CreateCubicBezierEasingFunction
                        (
                            new Vector2(1.0f, 0.0f),
                            new Vector2(1.0f, 0.0f)
                        );

                        StepEasingFunction stepEasingFunction = animation1.Compositor.CreateStepEasingFunction(1);

                        CubicBezierEasingFunction endCubicBezierEasingFunction = animation1.Compositor.CreateCubicBezierEasingFunction
                        (
                            new Vector2(0.0f, 1.0f),
                            new Vector2(0.0f, 1.0f)
                        );

                        animation2.InsertKeyFrame
                        (
                            0.499999f,
                            new Vector3
                            (
                                (float)this.scrollView.HorizontalOffset,
                                targetVerticalPosition - 0.9f * deltaVerticalPosition,
                                0.0f
                            ),
                            startCubicBezierEasingFunction
                        );

                        animation2.InsertKeyFrame
                        (
                            0.5f,
                            new Vector3
                            (
                                (float)this.scrollView.HorizontalOffset,
                                targetVerticalPosition - 0.1f * deltaVerticalPosition,
                                0.0f
                            ),
                            stepEasingFunction
                        );

                        animation2.InsertKeyFrame
                        (
                            1.0f,
                            new Vector3
                            (
                                (float)this.scrollView.HorizontalOffset,
                                targetVerticalPosition,
                                0.0f
                            ),
                            endCubicBezierEasingFunction
                        );
                    }

                    animation2.Duration = TimeSpan.FromMilliseconds(this.animationDurationNumberBox.Value);

                    e.Animation = animation2;
                }
            }
        }

        #endregion
        #region Scroll with animation 버튼 클릭시 처리하기 - scrollButton_Click(sender, e)

        /// <summary>
        /// Scroll with animation 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void scrollButton_Click(object sender, RoutedEventArgs e)
        {
            if(this.scrollView != null)
            {
                this.scrollView.ScrollTo
                (
                    this.scrollView.HorizontalOffset,
                    GetTargetVerticalOffset(),
                    new ScrollingScrollOptions(ScrollingAnimationMode.Enabled, ScrollingSnapPointsMode.Ignore)
                );
            }
        }

        #endregion

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

        #region 타겟 수직 오프셋 구하기 - GetTargetVerticalOffset()

        /// <summary>
        /// 타겟 수직 오프셋 구하기
        /// </summary>
        /// <returns>타겟 수직 오프셋 구하기</returns>
        private double GetTargetVerticalOffset()
        {
            if(this.scrollView.VerticalOffset > this.scrollView.ScrollableHeight / 2.0)
            {
                return this.scrollView.ScrollableHeight / 5.0;
            }
            else
            {
                return 4.0 * this.scrollView.ScrollableHeight / 5.0;
            }
        }

        #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

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

using System;

using System.Numerics;

using Microsoft.UI.Composition;

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.scrollView.ScrollAnimationStarting += scrollView_ScrollAnimationStarting;

this.scrollButton.Click += scrollButton_Click;

}

#endregion

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

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

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

#region 스크롤 뷰 스크롤 애니메이션 시작시 처리하기 - scrollView_ScrollAnimationStarting(sender, e)

/// <summary>

/// 스크롤 뷰 스크롤 애니메이션 시작시 처리하기

/// </summary>

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

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

private void scrollView_ScrollAnimationStarting(ScrollView sender, ScrollingScrollAnimationStartingEventArgs e)

{

Vector3KeyFrameAnimation animation1 = e.Animation as Vector3KeyFrameAnimation;

if(animation1 != null)

{

if(this.vcerticalAnimationComboBox.SelectedIndex == 0)

{

animation1.Duration = TimeSpan.FromMilliseconds(this.animationDurationNumberBox.Value);

}

else

{

double targetVerticalOffset = GetTargetVerticalOffset();

float targetVerticalPosition = (float)targetVerticalOffset;

Vector3KeyFrameAnimation animation2 = animation1.Compositor.CreateVector3KeyFrameAnimation();

if(this.vcerticalAnimationComboBox.SelectedIndex == 1)

{

float deltaVerticalPosition = 0.1f * (float)(targetVerticalOffset - this.scrollView.VerticalOffset);

for(int step = 0; step < 3; step++)

{

animation2.InsertKeyFrame

(

1.0f - (0.4f / (float)Math.Pow(2, step)),

new Vector3

(

(float)this.scrollView.HorizontalOffset,

targetVerticalPosition + deltaVerticalPosition,

0.0f

)

);

deltaVerticalPosition /= -2.0f;

}

animation2.InsertKeyFrame(1.0f, new Vector3((float)this.scrollView.HorizontalOffset, targetVerticalPosition, 0.0f));

}

else

{

float deltaVerticalPosition = (float)(targetVerticalOffset - this.scrollView.VerticalOffset);

CubicBezierEasingFunction startCubicBezierEasingFunction = animation1.Compositor.CreateCubicBezierEasingFunction

(

new Vector2(1.0f, 0.0f),

new Vector2(1.0f, 0.0f)

);

StepEasingFunction stepEasingFunction = animation1.Compositor.CreateStepEasingFunction(1);

CubicBezierEasingFunction endCubicBezierEasingFunction = animation1.Compositor.CreateCubicBezierEasingFunction

(

new Vector2(0.0f, 1.0f),

new Vector2(0.0f, 1.0f)

);

animation2.InsertKeyFrame

(

0.499999f,

new Vector3

(

(float)this.scrollView.HorizontalOffset,

targetVerticalPosition - 0.9f * deltaVerticalPosition,

0.0f

startCubicBezierEasingFunction

);

animation2.InsertKeyFrame

(

0.5f,

new Vector3

(

(float)this.scrollView.HorizontalOffset,

targetVerticalPosition - 0.1f * deltaVerticalPosition,

0.0f

stepEasingFunction

);

animation2.InsertKeyFrame

(

1.0f,

new Vector3

(

(float)this.scrollView.HorizontalOffset,

targetVerticalPosition,

0.0f

endCubicBezierEasingFunction

);

}

animation2.Duration = TimeSpan.FromMilliseconds(this.animationDurationNumberBox.Value);

e.Animation = animation2;

}

#endregion

#region Scroll with animation 버튼 클릭시 처리하기 - scrollButton_Click(sender, e)

/// <summary>

/// Scroll with animation 버튼 클릭시 처리하기

/// </summary>

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

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

private void scrollButton_Click(object sender, RoutedEventArgs e)

{

if(this.scrollView != null)

{

this.scrollView.ScrollTo

(

this.scrollView.HorizontalOffset,

GetTargetVerticalOffset(),

new ScrollingScrollOptions(ScrollingAnimationMode.Enabled, ScrollingSnapPointsMode.Ignore)

);

}

#endregion

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

#region 타겟 수직 오프셋 구하기 - GetTargetVerticalOffset()

/// <summary>

/// 타겟 수직 오프셋 구하기

/// </summary>

/// <returns>타겟 수직 오프셋 구하기</returns>

private double GetTargetVerticalOffset()

{

if(this.scrollView.VerticalOffset > this.scrollView.ScrollableHeight / 2.0)

{

return this.scrollView.ScrollableHeight / 5.0;

}

else

{

return 4.0 * this.scrollView.ScrollableHeight / 5.0;

}

#endregion

}

TestProject.zip