[C#/WINUI2.5] ExpressionAnimation 클래스 사용하기

■ ExpressionAnimation 클래스를 사용하는 방법을 보여준다.

▶ DoubleToThicknessConverter.cs


using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Data;

namespace TestProject
{
    /// <summary>
    /// 실수→두께 변환자
    /// </summary>
    public class DoubleToThicknessConverter : IValueConverter
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 변환하기 - Convert(sourceValue, targetType, parameter, language)

        /// <summary>
        /// 변환하기
        /// </summary>
        /// <param name="sourceValue">소스 값</param>
        /// <param name="targetType">타겟 타입</param>
        /// <param name="parameter">매개 변수</param>
        /// <param name="language">언어</param>
        /// <returns>변환 값</returns>
        public object Convert(object sourceValue, Type targetType, object parameter, string language)
        {
            if(sourceValue is double?)
            {
                return new Thickness((double)sourceValue);
            }

            return false;
        }

        #endregion
        #region 역변환하기 - ConvertBack(sourceValue, targetType, parameter, language)

        /// <summary>
        /// 역변환하기
        /// </summary>
        /// <param name="sourceValue">소스 값</param>
        /// <param name="targetType">타겟 타입</param>
        /// <param name="parameter">매개 변수</param>
        /// <param name="language">언어</param>
        /// <returns>역변환 값</returns>
        public object ConvertBack(object sourceValue, Type targetType, object parameter, string language)
        {
            throw new NotImplementedException();
        }

        #endregion
    }
}

using System;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Data;

namespace TestProject

{

/// <summary>

/// 실수→두께 변환자

/// </summary>

public class DoubleToThicknessConverter : IValueConverter

{

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

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

#region 변환하기 - Convert(sourceValue, targetType, parameter, language)

/// <summary>

/// 변환하기

/// </summary>

/// <param name="sourceValue">소스 값</param>

/// <param name="targetType">타겟 타입</param>

/// <param name="parameter">매개 변수</param>

/// <param name="language">언어</param>

/// <returns>변환 값</returns>

public object Convert(object sourceValue, Type targetType, object parameter, string language)

{

if(sourceValue is double?)

{

return new Thickness((double)sourceValue);

}

return false;

}

#endregion

#region 역변환하기 - ConvertBack(sourceValue, targetType, parameter, language)

/// <summary>

/// 역변환하기

/// </summary>

/// <param name="sourceValue">소스 값</param>

/// <param name="targetType">타겟 타입</param>

/// <param name="parameter">매개 변수</param>

/// <param name="language">언어</param>

/// <returns>역변환 값</returns>

public object ConvertBack(object sourceValue, Type targetType, object parameter, string language)

{

throw new NotImplementedException();

}

#endregion

}

▶ 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"
    xmlns:local="using:TestProject"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Page.Resources>
        <local:DoubleToThicknessConverter x:Key="DoubleToThicknessConverterKey" />
    </Page.Resources>
    <Grid
        Margin="50"
        Loaded="grid_Loaded">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"    />
            <ColumnDefinition Width="50"   />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0">
            <Grid HorizontalAlignment="Left">
                <TextBlock Name="textBlock"
                    Margin="{x:Bind marginSlider.Value, Converter={StaticResource DoubleToThicknessConverterKey}, Mode=OneWay}"
                    Width="300"
                    TextWrapping="WrapWholeWords"
                    FontSize="{x:Bind fontSizeSlider.Value, Mode=OneWay}">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </TextBlock>
                <Popup Name="popup"
                    Margin="5">
                    <Grid
                        MinWidth="50"
                        MaxWidth="200"
                        MinHeight="50"
                        BorderThickness="2"
                        BorderBrush="{ThemeResource SystemControlForegroundChromeGrayBrush}"
                        Background="{ThemeResource FlyoutBackgroundThemeBrush}">
                        <TextBlock
                            Style="{ThemeResource CaptionTextBlockStyle}"
                            VerticalAlignment="Center"
                            Margin="5"
                            TextWrapping="WrapWholeWords"
                            Text="I am always right aligned center to the target." />
                    </Grid>
                </Popup>
            </Grid>
        </StackPanel>
        <StackPanel Grid.Column="2"
            MinWidth="150">
            <Slider Name="fontSizeSlider"
                Header="Change font size"
                Minimum="12"
                Maximum="24"
                Value="12" />
            <Slider Name="marginSlider"
                Header="Change text margin"
                Minimum="0"
                Maximum="100"
                Value="0" />
        </StackPanel>
    </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"

xmlns:local="using:TestProject"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Page.Resources>

<local:DoubleToThicknessConverter x:Key="DoubleToThicknessConverterKey" />

</Page.Resources>

<Grid

Margin="50"

Loaded="grid_Loaded">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<TextBlock Name="textBlock"

Margin="{x:Bind marginSlider.Value, Converter={StaticResource DoubleToThicknessConverterKey}, Mode=OneWay}"

Width="300"

TextWrapping="WrapWholeWords"

FontSize="{x:Bind fontSizeSlider.Value, Mode=OneWay}">

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</TextBlock>

<Popup Name="popup"

Margin="5">

<Grid

MinWidth="50"

MaxWidth="200"

MinHeight="50"

BorderThickness="2"

BorderBrush="{ThemeResource SystemControlForegroundChromeGrayBrush}"

Background="{ThemeResource FlyoutBackgroundThemeBrush}">

<TextBlock

Style="{ThemeResource CaptionTextBlockStyle}"

VerticalAlignment="Center"

Margin="5"

TextWrapping="WrapWholeWords"

Text="I am always right aligned center to the target." />

</Grid>

</Popup>

</Grid>

</StackPanel>

<StackPanel Grid.Column="2"

MinWidth="150">

<Slider Name="fontSizeSlider"

Header="Change font size"

Minimum="12"

Maximum="24"

Value="12" />

<Slider Name="marginSlider"

Header="Change text margin"

Minimum="0"

Maximum="100"

Value="0" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using Windows.Foundation;
using Windows.Foundation.Metadata;
using Windows.Graphics.Display;
using Windows.UI.Composition;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

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

        #region Field

        /// <summary>
        /// 작성자
        /// </summary>
        private Compositor compositor = Window.Current.Compositor;

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 생성자 - MainPage()

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

            #region 윈도우 크기를 설정한다.

            double width  = 800d;
            double height = 600d;

            double dpi = (double)DisplayInformation.GetForCurrentView().LogicalDpi;

            ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize;

            Size windowSize = new Size(width * 96d / dpi, height * 96d / dpi);

            ApplicationView.PreferredLaunchViewSize = windowSize;

            Window.Current.Activate();

            ApplicationView.GetForCurrentView().TryResizeView(windowSize);

            #endregion
            #region 윈도우 제목을 설정한다.

            ApplicationView.GetForCurrentView().Title = "ExpressionAnimation 클래스 사용하기";

            #endregion
        }

        #endregion

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

        #region 그리드 로드시 처리하기 - grid_Loaded(sender, e)

        /// <summary>
        /// 그리드 로드시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void grid_Loaded(object sender, RoutedEventArgs e)
        {
            if(!ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 8))
            {
                return;
            }

            ExpressionAnimation animation = this.compositor.CreateExpressionAnimation();

            animation.Expression = "Vector3(textBlock.ActualOffset.X + textBlock.ActualSize.X, textBlock.ActualOffset.Y + textBlock.ActualSize.Y / 2 - 25, 0)";
            animation.Target     = "Translation";

            animation.SetExpressionReferenceParameter("textBlock", this.textBlock);

            this.popup.StartAnimation(animation);

            this.popup.IsOpen = true;
        }

        #endregion
    }
}

100

101

using Windows.Foundation;

using Windows.Foundation.Metadata;

using Windows.Graphics.Display;

using Windows.UI.Composition;

using Windows.UI.ViewManagement;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

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

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

#region Field

/// <summary>

/// 작성자

/// </summary>

private Compositor compositor = Window.Current.Compositor;

#endregion

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

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

#region 생성자 - MainPage()

/// <summary>

/// 생성자

/// </summary>

public MainPage()

{

InitializeComponent();

#region 윈도우 크기를 설정한다.

double width = 800d;

double height = 600d;

double dpi = (double)DisplayInformation.GetForCurrentView().LogicalDpi;

ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize;

Size windowSize = new Size(width * 96d / dpi, height * 96d / dpi);

ApplicationView.PreferredLaunchViewSize = windowSize;

Window.Current.Activate();

ApplicationView.GetForCurrentView().TryResizeView(windowSize);

#endregion

#region 윈도우 제목을 설정한다.

ApplicationView.GetForCurrentView().Title = "ExpressionAnimation 클래스 사용하기";

#endregion

}

#endregion

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

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

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

#region 그리드 로드시 처리하기 - grid_Loaded(sender, e)

/// <summary>

/// 그리드 로드시 처리하기

/// </summary>

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

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

private void grid_Loaded(object sender, RoutedEventArgs e)

{

if(!ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 8))

{

return;

}

ExpressionAnimation animation = this.compositor.CreateExpressionAnimation();

animation.Expression = "Vector3(textBlock.ActualOffset.X + textBlock.ActualSize.X, textBlock.ActualOffset.Y + textBlock.ActualSize.Y / 2 - 25, 0)";

animation.Target = "Translation";

animation.SetExpressionReferenceParameter("textBlock", this.textBlock);

this.popup.StartAnimation(animation);

this.popup.IsOpen = true;

}

#endregion

}

TestProject.zip