ANIMTATION Archives - icodebroker

[C#/WINUI2.5] Vector3Transition 엘리먼트 사용하기

■ Vector3Transition 엘리먼트를 사용하는 방법을 보여준다. ▶ 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:muxc="using:Microsoft.UI.Xaml.Controls"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid Margin="50">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"    />
            <ColumnDefinition Width="50"   />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Rectangle Name="rectangle" Grid.Column="0"
            Width="50"
            Height="50"
            Fill="{ThemeResource SystemAccentColor}">
            <Rectangle.TranslationTransition>
                <Vector3Transition />
            </Rectangle.TranslationTransition>
        </Rectangle>
        <StackPanel Grid.Column="2"
            VerticalAlignment="Center"
            Spacing="10">
            <Button Content="이동 설정 : (0, 0, 0)"
                Tag="0"
                Click="setButton_Click" />
            <Button Content="이동 설정 : (100, 100, 100)"
                Tag="100"
                Click="setButton_Click" />
            <Button Content="이동 설정 : (200, 200, 200)"
                Tag="200"
                Click="setButton_Click" />
            <TextBlock Text="컴포넌트" />
            <CheckBox Name="scaleXCheckBox"
                IsChecked="True"
                Content="X축 애니메이션" />
            <CheckBox Name="scaleYCheckBox"
                IsChecked="True"
                Content="Y축 애니메이션" />
            <CheckBox Name="scaleZCheckBox"
                IsChecked="True"
                Content="Z축 애니메이션" />
            <muxc:NumberBox x:Name="numberBox"
                Header="이동 설정 (0.0 ~ 200.0)"
                Minimum="0"
                Maximum="200"
                Value="1"
                KeyDown="numberBox_KeyDown" />
            <Button
                Content="커스텀 이동 설정"
                Click="setButton_Click" />
        </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:muxc="using:Microsoft.UI.Xaml.Controls"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Rectangle Name="rectangle" Grid.Column="0"

Width="50"

Height="50"

Fill="{ThemeResource SystemAccentColor}">

<Rectangle.TranslationTransition>

</Rectangle.TranslationTransition>

</Rectangle>

<StackPanel Grid.Column="2"

VerticalAlignment="Center"

Spacing="10">

<Button Content="이동 설정 : (0, 0, 0)"

Tag="0"

Click="setButton_Click" />

<Button Content="이동 설정 : (100, 100, 100)"

Tag="100"

Click="setButton_Click" />

<Button Content="이동 설정 : (200, 200, 200)"

Tag="200"

Click="setButton_Click" />

<CheckBox Name="scaleXCheckBox"

IsChecked="True"

Content="X축 애니메이션" />

<CheckBox Name="scaleYCheckBox"

IsChecked="True"

Content="Y축 애니메이션" />

<CheckBox Name="scaleZCheckBox"

IsChecked="True"

Content="Z축 애니메이션" />

<muxc:NumberBox x:Name="numberBox"

Header="이동 설정 (0.0 ~ 200.0)"

Minimum="0"

Maximum="200"

Value="1"

KeyDown="numberBox_KeyDown" />

<Button

Content="커스텀 이동 설정"

Click="setButton_Click" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using Microsoft.UI.Xaml.Controls;
using System;
using System.Numerics;
using Windows.Foundation;
using Windows.Foundation.Metadata;
using Windows.Graphics.Display;
using Windows.System;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;

namespace TestProject
{
    /// <summary>
    /// 메인 페이지
    /// </summary>
    public sealed partial class MainPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "Vector3Transition 엘리먼트 사용하기";

            #endregion
        }

        #endregion

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

        #region 넘버 박스 키 DOWN 처리하기 - numberBox_KeyDown(sender, e)

        /// <summary>
        /// 넘버 박스 키 DOWN 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void numberBox_KeyDown(object sender, KeyRoutedEventArgs e)
        {
            if(e.Key == VirtualKey.Enter)
            {
                setButton_Click(null, null);
            }
        }

        #endregion
        #region 이동 설정 버튼 클릭시 처리하기 - setButton_Click(sender, e)

        /// <summary>
        /// 이동 설정 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void setButton_Click(object sender, RoutedEventArgs e)
        {
            if(!ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))
            {
                return;
            }

            Vector3Transition transition = this.rectangle.TranslationTransition;

            transition.Components = ((this.scaleXCheckBox.IsChecked == true) ? Vector3TransitionComponents.X : 0) |
                                    ((this.scaleYCheckBox.IsChecked == true) ? Vector3TransitionComponents.Y : 0) |
                                    ((this.scaleZCheckBox.IsChecked == true) ? Vector3TransitionComponents.Z : 0);

            Button button = sender as Button;

            float customValue;

            if(button != null && button.Tag != null)
            {
                customValue = Convert.ToSingle(button.Tag);
            }
            else
            {
                customValue = CheckValue(this.numberBox);
            }

            this.rectangle.Translation = new Vector3(customValue);
        }

        #endregion

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

        #region 값 체크하기 - CheckValue(numberBox)

        /// <summary>
        /// 값 체크하기
        /// </summary>
        /// <param name="numberBox">넘버 박스</param>
        /// <returns>값</returns>
        private float CheckValue(NumberBox numberBox)
        {
            if(double.IsNaN(numberBox.Value))
            {
                numberBox.Value = 0;
            }

            return (float)numberBox.Value;
        }

        #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

using Microsoft.UI.Xaml.Controls;

using System;

using System.Numerics;

using Windows.Foundation;

using Windows.Foundation.Metadata;

using Windows.Graphics.Display;

using Windows.System;

using Windows.UI.ViewManagement;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Input;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

//////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "Vector3Transition 엘리먼트 사용하기";

#endregion

}

#endregion

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

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

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

#region 넘버 박스 키 DOWN 처리하기 - numberBox_KeyDown(sender, e)

/// <summary>

/// 넘버 박스 키 DOWN 처리하기

/// </summary>

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

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

private void numberBox_KeyDown(object sender, KeyRoutedEventArgs e)

{

if(e.Key == VirtualKey.Enter)

{

setButton_Click(null, null);

}

#endregion

#region 이동 설정 버튼 클릭시 처리하기 - setButton_Click(sender, e)

/// <summary>

/// 이동 설정 버튼 클릭시 처리하기

/// </summary>

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

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

private void setButton_Click(object sender, RoutedEventArgs e)

{

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

{

return;

}

Vector3Transition transition = this.rectangle.TranslationTransition;

transition.Components = ((this.scaleXCheckBox.IsChecked == true) ? Vector3TransitionComponents.X : 0) |

((this.scaleYCheckBox.IsChecked == true) ? Vector3TransitionComponents.Y : 0) |

((this.scaleZCheckBox.IsChecked == true) ? Vector3TransitionComponents.Z : 0);

Button button = sender as Button;

float customValue;

if(button != null && button.Tag != null)

{

customValue = Convert.ToSingle(button.Tag);

}

else

{

customValue = CheckValue(this.numberBox);

}

this.rectangle.Translation = new Vector3(customValue);

}

#endregion

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

#region 값 체크하기 - CheckValue(numberBox)

/// <summary>

/// 값 체크하기

/// </summary>

/// <param name="numberBox">넘버 박스</param>

/// <returns>값</returns>

private float CheckValue(NumberBox numberBox)

{

if(double.IsNaN(numberBox.Value))

{

numberBox.Value = 0;

}

return (float)numberBox.Value;

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] Vector3Transition 엘리먼트 사용하기

■ Vector3Transition 엘리먼트를 사용하는 방법을 보여준다. ▶ 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:muxc="using:Microsoft.UI.Xaml.Controls"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid Margin="50">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"    />
            <ColumnDefinition Width="50"   />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Rectangle Name="rectangle" Grid.Column="0"
            Width="50"
            Height="50"
            Fill="{ThemeResource SystemAccentColor}">
            <Rectangle.ScaleTransition>
                <Vector3Transition />
            </Rectangle.ScaleTransition>
        </Rectangle>
        <StackPanel Grid.Column="2"
            VerticalAlignment="Center"
            Spacing="10">
            <Button Content="배율 설정 : (0.5, 0.5, 0.5)"
                Tag="0.5"
                Click="setButton_Click" />
            <Button Content="배율 설정 : (1.0, 1.0, 1.0)"
                Tag="1.0"
                Click="setButton_Click" />
            <Button Content="배율 설정 : (2.0, 2.0, 2.0)"
                Tag="2.0"
                Click="setButton_Click" />
            <TextBlock Text="컴포넌트" />
            <CheckBox Name="scaleXCheckBox"
                IsChecked="True"
                Content="X축 애니메이션" />
            <CheckBox Name="scaleYCheckBox"
                IsChecked="True"
                Content="Y축 애니메이션" />
            <CheckBox Name="scaleZCheckBox"
                IsChecked="True"
                Content="Z축 애니메이션" />
            <muxc:NumberBox x:Name="numberBox"
                Header="배율 설정 (0.0 ~ 5.0)"
                Minimum="0"
                Maximum="5"
                Value="1"
                KeyDown="numberBox_KeyDown" />
            <Button
                Content="커스텀 배율 설정"
                Click="setButton_Click" />
        </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:muxc="using:Microsoft.UI.Xaml.Controls"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Rectangle Name="rectangle" Grid.Column="0"

Width="50"

Height="50"

Fill="{ThemeResource SystemAccentColor}">

<Rectangle.ScaleTransition>

</Rectangle.ScaleTransition>

</Rectangle>

<StackPanel Grid.Column="2"

VerticalAlignment="Center"

Spacing="10">

<Button Content="배율 설정 : (0.5, 0.5, 0.5)"

Tag="0.5"

Click="setButton_Click" />

<Button Content="배율 설정 : (1.0, 1.0, 1.0)"

Tag="1.0"

Click="setButton_Click" />

<Button Content="배율 설정 : (2.0, 2.0, 2.0)"

Tag="2.0"

Click="setButton_Click" />

<CheckBox Name="scaleXCheckBox"

IsChecked="True"

Content="X축 애니메이션" />

<CheckBox Name="scaleYCheckBox"

IsChecked="True"

Content="Y축 애니메이션" />

<CheckBox Name="scaleZCheckBox"

IsChecked="True"

Content="Z축 애니메이션" />

<muxc:NumberBox x:Name="numberBox"

Header="배율 설정 (0.0 ~ 5.0)"

Minimum="0"

Maximum="5"

Value="1"

KeyDown="numberBox_KeyDown" />

<Button

Content="커스텀 배율 설정"

Click="setButton_Click" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using Microsoft.UI.Xaml.Controls;
using System;
using System.Numerics;
using Windows.Foundation;
using Windows.Foundation.Metadata;
using Windows.Graphics.Display;
using Windows.System;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;

namespace TestProject
{
    /// <summary>
    /// 메인 페이지
    /// </summary>
    public sealed partial class MainPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "Vector3Transition 엘리먼트 사용하기";

            #endregion
        }

        #endregion

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

        #region 넘버 박스 키 DOWN 처리하기 - numberBox_KeyDown(sender, e)

        /// <summary>
        /// 넘버 박스 키 DOWN 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void numberBox_KeyDown(object sender, KeyRoutedEventArgs e)
        {
            if(e.Key == VirtualKey.Enter)
            {
                setButton_Click(null, null);
            }
        }

        #endregion
        #region 배율 설정 버튼 클릭시 처리하기 - setButton_Click(sender, e)

        /// <summary>
        /// 배율 설정 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void setButton_Click(object sender, RoutedEventArgs e)
        {
            if(!ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))
            {
                return;
            }

            Vector3Transition transition = this.rectangle.ScaleTransition;

            transition.Components = ((this.scaleXCheckBox.IsChecked == true) ? Vector3TransitionComponents.X : 0) |
                                    ((this.scaleYCheckBox.IsChecked == true) ? Vector3TransitionComponents.Y : 0) |
                                    ((this.scaleZCheckBox.IsChecked == true) ? Vector3TransitionComponents.Z : 0);

            Button button = sender as Button;

            float customValue;

            if(button != null && button.Tag != null)
            {
                customValue = Convert.ToSingle(button.Tag);
            }
            else
            {
                customValue = CheckValue(this.numberBox);
            }

            this.rectangle.Scale = new Vector3(customValue);
        }

        #endregion

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

        #region 값 체크하기 - CheckValue(numberBox)

        /// <summary>
        /// 값 체크하기
        /// </summary>
        /// <param name="numberBox">넘버 박스</param>
        /// <returns>값</returns>
        private float CheckValue(NumberBox numberBox)
        {
            if(double.IsNaN(numberBox.Value))
            {
                numberBox.Value = 0;
            }

            return (float)numberBox.Value;
        }

        #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

using Microsoft.UI.Xaml.Controls;

using System;

using System.Numerics;

using Windows.Foundation;

using Windows.Foundation.Metadata;

using Windows.Graphics.Display;

using Windows.System;

using Windows.UI.ViewManagement;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Input;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

//////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "Vector3Transition 엘리먼트 사용하기";

#endregion

}

#endregion

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

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

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

#region 넘버 박스 키 DOWN 처리하기 - numberBox_KeyDown(sender, e)

/// <summary>

/// 넘버 박스 키 DOWN 처리하기

/// </summary>

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

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

private void numberBox_KeyDown(object sender, KeyRoutedEventArgs e)

{

if(e.Key == VirtualKey.Enter)

{

setButton_Click(null, null);

}

#endregion

#region 배율 설정 버튼 클릭시 처리하기 - setButton_Click(sender, e)

/// <summary>

/// 배율 설정 버튼 클릭시 처리하기

/// </summary>

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

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

private void setButton_Click(object sender, RoutedEventArgs e)

{

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

{

return;

}

Vector3Transition transition = this.rectangle.ScaleTransition;

transition.Components = ((this.scaleXCheckBox.IsChecked == true) ? Vector3TransitionComponents.X : 0) |

((this.scaleYCheckBox.IsChecked == true) ? Vector3TransitionComponents.Y : 0) |

((this.scaleZCheckBox.IsChecked == true) ? Vector3TransitionComponents.Z : 0);

Button button = sender as Button;

float customValue;

if(button != null && button.Tag != null)

{

customValue = Convert.ToSingle(button.Tag);

}

else

{

customValue = CheckValue(this.numberBox);

}

this.rectangle.Scale = new Vector3(customValue);

}

#endregion

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

#region 값 체크하기 - CheckValue(numberBox)

/// <summary>

/// 값 체크하기

/// </summary>

/// <param name="numberBox">넘버 박스</param>

/// <returns>값</returns>

private float CheckValue(NumberBox numberBox)

{

if(double.IsNaN(numberBox.Value))

{

numberBox.Value = 0;

}

return (float)numberBox.Value;

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] ScalarTransition 엘리먼트 사용하기

■ ScalarTransition 엘리먼트를 사용하는 방법을 보여준다. ▶ 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:muxc="using:Microsoft.UI.Xaml.Controls"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid Margin="50">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"    />
            <ColumnDefinition Width="50"   />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Rectangle Name="rectangle" Grid.Column="0"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="50"
            Height="50">
            <Rectangle.Fill>
                <LinearGradientBrush
                    StartPoint="0.5 0"
                    EndPoint="0.5 1">
                    <GradientStop Color="LightGray"                         Offset="0.0" />
                    <GradientStop Color="{ThemeResource SystemAccentColor}" Offset="1.0" />
                </LinearGradientBrush>
            </Rectangle.Fill>
            <Rectangle.RotationTransition>
                <ScalarTransition />
            </Rectangle.RotationTransition>
        </Rectangle>
        <StackPanel Grid.Column="2"
            VerticalAlignment="Center"
            Spacing="10">
            <muxc:NumberBox Name="numberBox"
                Header="회전 (0.0 ~ 360.0)"
                Minimum="0"
                Maximum="360"
                Value="45"
                KeyDown="numberBox_KeyDown" />
            <Button
                Width="100"
                Height="30"
                Content="회전 설정"
                Click="setButton_Click" />
        </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:muxc="using:Microsoft.UI.Xaml.Controls"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Rectangle Name="rectangle" Grid.Column="0"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="50"

Height="50">

<Rectangle.Fill>

<LinearGradientBrush

StartPoint="0.5 0"

EndPoint="0.5 1">

</LinearGradientBrush>

</Rectangle.Fill>

<Rectangle.RotationTransition>

</Rectangle.RotationTransition>

</Rectangle>

<StackPanel Grid.Column="2"

VerticalAlignment="Center"

Spacing="10">

<muxc:NumberBox Name="numberBox"

Header="회전 (0.0 ~ 360.0)"

Minimum="0"

Maximum="360"

Value="45"

KeyDown="numberBox_KeyDown" />

<Button

Width="100"

Height="30"

Content="회전 설정"

Click="setButton_Click" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using Microsoft.UI.Xaml.Controls;
using System.Numerics;
using Windows.Foundation;
using Windows.Foundation.Metadata;
using Windows.Graphics.Display;
using Windows.System;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;

namespace TestProject
{
    /// <summary>
    /// 메인 페이지
    /// </summary>
    public sealed partial class MainPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "ScalarTransition 엘리먼트 사용하기";

            #endregion
        }

        #endregion

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

        #region 넘버 박스 키 DOWN 처리하기 - numberBox_KeyDown(sender, e)

        /// <summary>
        /// 넘버 박스 키 DOWN 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void numberBox_KeyDown(object sender, KeyRoutedEventArgs e)
        {
            if(e.Key == VirtualKey.Enter)
            {
                setButton_Click(null, null);
            }
        }

        #endregion
        #region 회전 설정 버튼 클릭시 처리하기 - setButton_Click(sender, e)

        /// <summary>
        /// 회전 설정 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void setButton_Click(object sender, RoutedEventArgs e)
        {
            if(!ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))
            {
                return;
            }

            this.rectangle.CenterPoint = new Vector3
            (
                (float)this.rectangle.ActualWidth  / 2,
                (float)this.rectangle.ActualHeight / 2,
                0f
            );

            this.rectangle.Rotation = CheckValue(this.numberBox);
        }

        #endregion

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

        #region 값 체크하기 - CheckValue(numberBox)

        /// <summary>
        /// 값 체크하기
        /// </summary>
        /// <param name="numberBox">넘버 박스</param>
        /// <returns>값</returns>
        private float CheckValue(NumberBox numberBox)
        {
            if(double.IsNaN(numberBox.Value))
            {
                numberBox.Value = 0;
            }

            return (float)numberBox.Value;
        }

        #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

using Microsoft.UI.Xaml.Controls;

using System.Numerics;

using Windows.Foundation;

using Windows.Foundation.Metadata;

using Windows.Graphics.Display;

using Windows.System;

using Windows.UI.ViewManagement;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Input;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

//////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "ScalarTransition 엘리먼트 사용하기";

#endregion

}

#endregion

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

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

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

#region 넘버 박스 키 DOWN 처리하기 - numberBox_KeyDown(sender, e)

/// <summary>

/// 넘버 박스 키 DOWN 처리하기

/// </summary>

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

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

private void numberBox_KeyDown(object sender, KeyRoutedEventArgs e)

{

if(e.Key == VirtualKey.Enter)

{

setButton_Click(null, null);

}

#endregion

#region 회전 설정 버튼 클릭시 처리하기 - setButton_Click(sender, e)

/// <summary>

/// 회전 설정 버튼 클릭시 처리하기

/// </summary>

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

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

private void setButton_Click(object sender, RoutedEventArgs e)

{

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

{

return;

}

this.rectangle.CenterPoint = new Vector3

(

(float)this.rectangle.ActualWidth / 2,

(float)this.rectangle.ActualHeight / 2,

);

this.rectangle.Rotation = CheckValue(this.numberBox);

}

#endregion

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

#region 값 체크하기 - CheckValue(numberBox)

/// <summary>

/// 값 체크하기

/// </summary>

/// <param name="numberBox">넘버 박스</param>

/// <returns>값</returns>

private float CheckValue(NumberBox numberBox)

{

if(double.IsNaN(numberBox.Value))

{

numberBox.Value = 0;

}

return (float)numberBox.Value;

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] ScalarTransition 엘리먼트 사용하기

■ ScalarTransition 엘리먼트를 사용하는 방법을 보여준다. ▶ 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:muxc="using:Microsoft.UI.Xaml.Controls"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid Margin="50">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"    />
            <ColumnDefinition Width="50"   />
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Rectangle Name="rectangle" Grid.Column="0"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="50"
            Height="50"
            Fill="{ThemeResource SystemAccentColor}"
            Opacity="0.5">
            <Rectangle.OpacityTransition>
                <ScalarTransition />
            </Rectangle.OpacityTransition>
        </Rectangle>
        <StackPanel Grid.Column="2"
            VerticalAlignment="Center"
            Spacing="10">
            <muxc:NumberBox Name="numberBox"
                Header="불투명도 (0.0 ~ 1.0)"
                Minimum="0"
                Maximum="1"
                Value="0.5"
                KeyDown="numberBox_KeyDown" />
            <Button
                Width="120"
                Height="30"
                Content="불투명도 설정"
                Click="setButton_Click" />
        </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:muxc="using:Microsoft.UI.Xaml.Controls"

Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Rectangle Name="rectangle" Grid.Column="0"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="50"

Height="50"

Fill="{ThemeResource SystemAccentColor}"

Opacity="0.5">

<Rectangle.OpacityTransition>

</Rectangle.OpacityTransition>

</Rectangle>

<StackPanel Grid.Column="2"

VerticalAlignment="Center"

Spacing="10">

<muxc:NumberBox Name="numberBox"

Header="불투명도 (0.0 ~ 1.0)"

Minimum="0"

Maximum="1"

Value="0.5"

KeyDown="numberBox_KeyDown" />

<Button

Width="120"

Height="30"

Content="불투명도 설정"

Click="setButton_Click" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using Microsoft.UI.Xaml.Controls;
using Windows.Foundation;
using Windows.Foundation.Metadata;
using Windows.Graphics.Display;
using Windows.System;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;

namespace TestProject
{
    /// <summary>
    /// 메인 페이지
    /// </summary>
    public sealed partial class MainPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "ScalarTransition 엘리먼트 사용하기";

            #endregion
        }

        #endregion

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

        #region 넘버 박스 키 DOWN 처리하기 - numberBox_KeyDown(sender, e)

        /// <summary>
        /// 넘버 박스 키 DOWN 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void numberBox_KeyDown(object sender, KeyRoutedEventArgs e)
        {
            if(e.Key == VirtualKey.Enter)
            {
                setButton_Click(null, null);
            }
        }

        #endregion
        #region 불투명도 설정 버튼 클릭시 처리하기 - setButton_Click(sender, e)

        /// <summary>
        /// 불투명도 설정 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void setButton_Click(object sender, RoutedEventArgs e)
        {
            if(!ApiInformation.IsApiContractPresent("Windows.Foundation.UniversalApiContract", 7))
            {
                return;
            }

            double value = CheckValue(this.numberBox);

            this.rectangle.Opacity = value;
        }

        #endregion

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

        #region 값 체크하기 - CheckValue(numberBox)

        /// <summary>
        /// 값 체크하기
        /// </summary>
        /// <param name="numberBox">넘버 박스</param>
        /// <returns>값</returns>
        private double CheckValue(NumberBox numberBox)
        {
            if(double.IsNaN(numberBox.Value))
            {
                numberBox.Value = 0;
            }

            return numberBox.Value;
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

using Microsoft.UI.Xaml.Controls;

using Windows.Foundation;

using Windows.Foundation.Metadata;

using Windows.Graphics.Display;

using Windows.System;

using Windows.UI.ViewManagement;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Input;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

//////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "ScalarTransition 엘리먼트 사용하기";

#endregion

}

#endregion

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

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

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

#region 넘버 박스 키 DOWN 처리하기 - numberBox_KeyDown(sender, e)

/// <summary>

/// 넘버 박스 키 DOWN 처리하기

/// </summary>

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

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

private void numberBox_KeyDown(object sender, KeyRoutedEventArgs e)

{

if(e.Key == VirtualKey.Enter)

{

setButton_Click(null, null);

}

#endregion

#region 불투명도 설정 버튼 클릭시 처리하기 - setButton_Click(sender, e)

/// <summary>

/// 불투명도 설정 버튼 클릭시 처리하기

/// </summary>

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

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

private void setButton_Click(object sender, RoutedEventArgs e)

{

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

{

return;

}

double value = CheckValue(this.numberBox);

this.rectangle.Opacity = value;

}

#endregion

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

#region 값 체크하기 - CheckValue(numberBox)

/// <summary>

/// 값 체크하기

/// </summary>

/// <param name="numberBox">넘버 박스</param>

/// <returns>값</returns>

private double CheckValue(NumberBox numberBox)

{

if(double.IsNaN(numberBox.Value))

{

numberBox.Value = 0;

}

return numberBox.Value;

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] PopupThemeTransition 엘리먼트 사용하기

■ PopupThemeTransition 엘리먼트를 사용하는 방법을 보여준다. ▶ 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 Background="CadetBlue">
        <Button Name="showPopupButton"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="100"
            Height="30"
            Content="팝업 표시"
            Click="showPopupButton_Click" />
        <Popup Name="popup"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Width="200"
            Height="200">
            <Popup.ChildTransitions>
                <TransitionCollection>
                    <PopupThemeTransition />
                </TransitionCollection>
            </Popup.ChildTransitions>
            <Grid>
                <Ellipse
                    Width="200"
                    Height="200"
                    StrokeThickness="2"
                    Stroke="{ThemeResource SystemControlForegroundChromeGrayBrush}"
                    Fill="{ThemeResource FlyoutBackgroundThemeBrush}" />
                <StackPanel
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Width="200"
                    Spacing="5">
                    <TextBlock
                        HorizontalAlignment="Center"
                        Margin="10"
                        TextAlignment="Center"
                        TextWrapping="WrapWholeWords"
                        Text="PopupThemeTransition 엘리먼트를 사용한 팝업 입니다." />
                    <Button Name="closePopupButton"
                        HorizontalAlignment="Center"
                        Width="100"
                        Height="30"
                        Content="팝업 닫기"
                        Click="closePopupButton_Click" />
                </StackPanel>
            </Grid>
        </Popup>
    </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">

<Button Name="showPopupButton"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="100"

Height="30"

Content="팝업 표시"

Click="showPopupButton_Click" />

<Popup Name="popup"

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="200"

Height="200">

<Popup.ChildTransitions>

</TransitionCollection>

</Popup.ChildTransitions>

<Grid>

<Ellipse

Width="200"

Height="200"

StrokeThickness="2"

Stroke="{ThemeResource SystemControlForegroundChromeGrayBrush}"

Fill="{ThemeResource FlyoutBackgroundThemeBrush}" />

<StackPanel

HorizontalAlignment="Center"

VerticalAlignment="Center"

Width="200"

Spacing="5">

<TextBlock

HorizontalAlignment="Center"

Margin="10"

TextAlignment="Center"

TextWrapping="WrapWholeWords"

Text="PopupThemeTransition 엘리먼트를 사용한 팝업 입니다." />

<Button Name="closePopupButton"

HorizontalAlignment="Center"

Width="100"

Height="30"

Content="팝업 닫기"

Click="closePopupButton_Click" />

</StackPanel>

</Grid>

</Popup>

</Grid>

</Page>

▶ MainPage.xaml.cs


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

namespace TestProject
{
    /// <summary>
    /// 메인 페이지
    /// </summary>
    public sealed partial class MainPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "PopupThemeTransition 엘리먼트 사용하기";

            #endregion
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region 팝업 표시 버튼 클릭시 처리하기 - showPopupButton_Click(sender, e)

        /// <summary>
        /// 팝업 표시 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void showPopupButton_Click(object sender, RoutedEventArgs e)
        {
            this.popup.IsOpen = true;

            this.closePopupButton.Focus(FocusState.Programmatic);
        }

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

        /// <summary>
        /// 팝업 닫기 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void closePopupButton_Click(object sender, RoutedEventArgs e)
        {
            this.popup.IsOpen = false;

            this.showPopupButton.Focus(FocusState.Programmatic);
        }

        #endregion
    }
}

using Windows.Foundation;

using Windows.Graphics.Display;

using Windows.UI.ViewManagement;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

//////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "PopupThemeTransition 엘리먼트 사용하기";

#endregion

}

#endregion

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

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

#region 팝업 표시 버튼 클릭시 처리하기 - showPopupButton_Click(sender, e)

/// <summary>

/// 팝업 표시 버튼 클릭시 처리하기

/// </summary>

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

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

private void showPopupButton_Click(object sender, RoutedEventArgs e)

{

this.popup.IsOpen = true;

this.closePopupButton.Focus(FocusState.Programmatic);

}

#endregion

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

/// <summary>

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

/// </summary>

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

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

private void closePopupButton_Click(object sender, RoutedEventArgs e)

{

this.popup.IsOpen = false;

this.showPopupButton.Focus(FocusState.Programmatic);

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] AddDeleteThemeTransition 엘리먼트 사용하기

■ AddDeleteThemeTransition 엘리먼트를 사용하는 방법을 보여준다. ▶ 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>
        <Grid Margin="100">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="50"   />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Border Grid.Column="0"
                BorderThickness="1"
                BorderBrush="Black">
                <ListView Name="listView">
                    <ListView.ItemContainerTransitions>
                        <TransitionCollection>
                            <AddDeleteThemeTransition />
                        </TransitionCollection>
                    </ListView.ItemContainerTransitions>
                </ListView>
            </Border>
            <StackPanel Grid.Column="2"
                VerticalAlignment="Center"
                Spacing="10">
                <Button
                    Width="100"
                    Height="30"
                    Content="추가"
                    Click="addButton_Click" />
                <Button
                    Width="100"
                    Height="30"
                    Content="삭제"
                    Click="deleteButton_Click" />
                <Button
                    Width="100"
                    Height="30"
                    Content="추가/삭제"
                    Click="addDeleteButton_Click" />
            </StackPanel>
        </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}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Border Grid.Column="0"

BorderThickness="1"

BorderBrush="Black">

<ListView.ItemContainerTransitions>

</TransitionCollection>

</ListView.ItemContainerTransitions>

</ListView>

</Border>

<StackPanel Grid.Column="2"

VerticalAlignment="Center"

Spacing="10">

<Button

Width="100"

Height="30"

Content="추가"

Click="addButton_Click" />

<Button

Width="100"

Height="30"

Content="삭제"

Click="deleteButton_Click" />

<Button

Width="100"

Height="30"

Content="추가/삭제"

Click="addDeleteButton_Click" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using Windows.Foundation;
using Windows.Graphics.Display;
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 int itemCount = 10;

        #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 = "AddDeleteThemeTransition 엘리먼트 사용하기";

            #endregion

            for(int i = 0; i < this.itemCount; i++)
            {
                this.listView.Items.Add(new ListViewItem() { Content = "항목 " + i });
            }
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region 추가 버튼 클릭시 처리하기 - addButton_Click(sender, e)

        /// <summary>
        /// 추가 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void addButton_Click(object sender, RoutedEventArgs e)
        {
            this.listView.Items.Add(new ListViewItem() { Content = "새 항목 " +  this.itemCount.ToString()});

            this.itemCount++;
        }

        #endregion
        #region 삭제 버튼 클릭시 처리하기 - deleteButton_Click(sender, e)

        /// <summary>
        /// 삭제 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void deleteButton_Click(object sender, RoutedEventArgs e)
        {
            if(this.listView.Items.Count > 0)
            {
                this.listView.Items.RemoveAt(0);
            }
        }

        #endregion
        #region 추가/삭제 버튼 클릭시 처리하기 - addDeleteButton_Click(sender, e)

        /// <summary>
        /// 추가/삭제 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void addDeleteButton_Click(object sender, RoutedEventArgs e)
        {
            addButton_Click(sender, e);
            deleteButton_Click(sender, e);
        }

        #endregion
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

using Windows.Foundation;

using Windows.Graphics.Display;

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 int itemCount = 10;

#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 = "AddDeleteThemeTransition 엘리먼트 사용하기";

#endregion

for(int i = 0; i < this.itemCount; i++)

{

this.listView.Items.Add(new ListViewItem() { Content = "항목 " + i });

}

#endregion

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

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

#region 추가 버튼 클릭시 처리하기 - addButton_Click(sender, e)

/// <summary>

/// 추가 버튼 클릭시 처리하기

/// </summary>

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

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

private void addButton_Click(object sender, RoutedEventArgs e)

{

this.listView.Items.Add(new ListViewItem() { Content = "새 항목 " + this.itemCount.ToString()});

this.itemCount++;

}

#endregion

#region 삭제 버튼 클릭시 처리하기 - deleteButton_Click(sender, e)

/// <summary>

/// 삭제 버튼 클릭시 처리하기

/// </summary>

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

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

private void deleteButton_Click(object sender, RoutedEventArgs e)

{

if(this.listView.Items.Count > 0)

{

this.listView.Items.RemoveAt(0);

}

#endregion

#region 추가/삭제 버튼 클릭시 처리하기 - addDeleteButton_Click(sender, e)

/// <summary>

/// 추가/삭제 버튼 클릭시 처리하기

/// </summary>

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

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

private void addDeleteButton_Click(object sender, RoutedEventArgs e)

{

addButton_Click(sender, e);

deleteButton_Click(sender, e);

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] ContentThemeTransition 엘리먼트 사용하기

■ ContentThemeTransition 엘리먼트를 사용하는 방법을 보여준다. ▶ 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>
        <Grid Margin="100">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="50"   />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Border Grid.Column="0"
                BorderThickness="1"
                BorderBrush="Black">
                <ListView Name="listView">
                    <ListView.ItemContainerTransitions>
                        <TransitionCollection>
                            <ContentThemeTransition />
                        </TransitionCollection>
                    </ListView.ItemContainerTransitions>
                </ListView>
            </Border>
            <Button Grid.Column="2"
                VerticalAlignment="Center"
                Width="100"
                Height="30"
                Content="업데이트"
                Click="updateButton_Click" />
        </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}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Border Grid.Column="0"

BorderThickness="1"

BorderBrush="Black">

<ListView.ItemContainerTransitions>

</TransitionCollection>

</ListView.ItemContainerTransitions>

</ListView>

</Border>

<Button Grid.Column="2"

VerticalAlignment="Center"

Width="100"

Height="30"

Content="업데이트"

Click="updateButton_Click" />

</Grid>

</Page>

▶ MainPage.xaml.cs


using System;
using System.Collections.Generic;
using Windows.Foundation;
using Windows.Graphics.Display;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace TestProject
{
    /// <summary>
    /// 메인 페이지
    /// </summary>
    public sealed partial class MainPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "ContentThemeTransition 엘리먼트 사용하기";

            #endregion

            SetListViewData();
        }

        #endregion

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

        #region 업데이트 버튼 클릭시 처리하기 - updateButton_Click(sender, e)

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

        #endregion

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

        #region 리스트 뷰 데이터 설정하기 - SetListViewData()

        /// <summary>
        /// 리스트 뷰 데이터 설정하기
        /// </summary>
        private void SetListViewData()
        {
            List<string> list = new List<string>();

            for (int i = 0; i < 5; i++)
            {
                list.Add($"항목 : {DateTime.Now}");
            }

            this.listView.ItemsSource = list;
        }

        #endregion
    }
}

using System;

using System.Collections.Generic;

using Windows.Foundation;

using Windows.Graphics.Display;

using Windows.UI.ViewManagement;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

//////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "ContentThemeTransition 엘리먼트 사용하기";

#endregion

SetListViewData();

}

#endregion

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

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

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

#region 업데이트 버튼 클릭시 처리하기 - updateButton_Click(sender, e)

/// <summary>

/// 업데이트 버튼 클릭시 처리하기

/// </summary>

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

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

private void updateButton_Click(object sender, RoutedEventArgs e)

{

SetListViewData();

}

#endregion

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

#region 리스트 뷰 데이터 설정하기 - SetListViewData()

/// <summary>

/// 리스트 뷰 데이터 설정하기

/// </summary>

private void SetListViewData()

{

List<string> list = new List<string>();

for (int i = 0; i < 5; i++)

{

list.Add($"항목 : {DateTime.Now}");

}

this.listView.ItemsSource = list;

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] RepositionThemeTransition 엘리먼트 사용하기

■ RepositionThemeTransition 엘리먼트를 사용하는 방법을 보여준다. ▶ 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>
        <Grid Margin="100">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="50"   />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>
                <Rectangle Grid.Column="0"
                    Margin="5"
                    Width="75"
                    Height="75"
                    Fill="Red" />
                <Rectangle Name="rectangle2" Grid.Column="1"
                    Margin="5"
                    Width="75"
                    Height="75"
                    Fill="Green" />
                <Rectangle Grid.Column="2"
                    Margin="5"
                    Width="75"
                    Height="75"
                    Fill="Blue">
                    <Rectangle.Transitions>
                        <TransitionCollection>
                            <RepositionThemeTransition />
                        </TransitionCollection>
                    </Rectangle.Transitions>
                </Rectangle>
            </Grid>
            <Button Grid.Column="2"
                VerticalAlignment="Center"
                Width="100"
                Height="30"
                Content="재배치"
                Click="repositionButton_Click" />
        </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}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<Rectangle Grid.Column="0"

Margin="5"

Width="75"

Height="75"

Fill="Red" />

<Rectangle Name="rectangle2" Grid.Column="1"

Margin="5"

Width="75"

Height="75"

Fill="Green" />

<Rectangle Grid.Column="2"

Margin="5"

Width="75"

Height="75"

Fill="Blue">

<Rectangle.Transitions>

</TransitionCollection>

</Rectangle.Transitions>

</Rectangle>

</Grid>

<Button Grid.Column="2"

VerticalAlignment="Center"

Width="100"

Height="30"

Content="재배치"

Click="repositionButton_Click" />

</Grid>

</Page>

▶ MainPage.xaml.cs


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

namespace TestProject
{
    /// <summary>
    /// 메인 페이지
    /// </summary>
    public sealed partial class MainPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "RepositionThemeTransition 엘리먼트 사용하기";

            #endregion
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region 재배치 버튼 클릭시 처리하기 - repositionButton_Click(sender, e)

        /// <summary>
        /// 재배치 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void repositionButton_Click(object sender, RoutedEventArgs e)
        {
            this.rectangle2.Visibility = (this.rectangle2.Visibility == Visibility.Visible) ? Visibility.Collapsed : Visibility.Visible;
        }

        #endregion
    }
}

using Windows.Foundation;

using Windows.Graphics.Display;

using Windows.UI.ViewManagement;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

//////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "RepositionThemeTransition 엘리먼트 사용하기";

#endregion

}

#endregion

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

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

#region 재배치 버튼 클릭시 처리하기 - repositionButton_Click(sender, e)

/// <summary>

/// 재배치 버튼 클릭시 처리하기

/// </summary>

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

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

private void repositionButton_Click(object sender, RoutedEventArgs e)

{

this.rectangle2.Visibility = (this.rectangle2.Visibility == Visibility.Visible) ? Visibility.Collapsed : Visibility.Visible;

}

#endregion

}

TestProject.zip

[C#/WINUI2.5] EntranceThemeTransition 엘리먼트 : IsStaggeringEnabled 속성 사용하기

■ EntranceThemeTransition 엘리먼트의 IsStaggeringEnabled 속성을 사용하는 방법을 보여준다. ▶ 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>
        <Grid Margin="30">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="50"   />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>
            <StackPanel Name="stackPanel" Grid.Row="0"
                Orientation="Horizontal">
                <StackPanel.ChildrenTransitions>
                    <TransitionCollection>
                        <EntranceThemeTransition IsStaggeringEnabled="True" />
                    </TransitionCollection>
                </StackPanel.ChildrenTransitions>
                <Rectangle Margin="5" Width="50" Height="50" Fill="LightBlue" />
                <Rectangle Margin="5" Width="50" Height="50" Fill="LightBlue" />
                <Rectangle Margin="5" Width="50" Height="50" Fill="LightBlue" />
                <Rectangle Margin="5" Width="50" Height="50" Fill="LightBlue" />
                <Rectangle Margin="5" Width="50" Height="50" Fill="LightBlue" />
            </StackPanel>
            <StackPanel Grid.Column="2"
                VerticalAlignment="Center"
                Spacing="10">
                <Button Content="1개 추가"
                    Width="100"
                    Height="30"
                    Tag="1"
                    Click="addButton_Click" />
                <Button Content="5개 추가"
                    Width="100"
                    Height="30"
                    Tag="5"
                    Click="addButton_Click" />
                <Button Content="모두 지우기"
                    Width="100"
                    Height="30"
                    Click="clearAllButton_Click" />
            </StackPanel>
        </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}"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<StackPanel Name="stackPanel" Grid.Row="0"

Orientation="Horizontal">

<StackPanel.ChildrenTransitions>

</TransitionCollection>

</StackPanel.ChildrenTransitions>

</StackPanel>

<StackPanel Grid.Column="2"

VerticalAlignment="Center"

Spacing="10">

<Button Content="1개 추가"

Width="100"

Height="30"

Tag="1"

Click="addButton_Click" />

<Button Content="5개 추가"

Width="100"

Height="30"

Tag="5"

Click="addButton_Click" />

<Button Content="모두 지우기"

Width="100"

Height="30"

Click="clearAllButton_Click" />

</StackPanel>

</Grid>

</Page>

▶ MainPage.xaml.cs


using System;
using Windows.Foundation;
using Windows.Graphics.Display;
using Windows.UI.ViewManagement;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Shapes;

namespace TestProject
{
    /// <summary>
    /// 메인 페이지
    /// </summary>
    public sealed partial class MainPage : Page
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "EntranceThemeTransition 엘리먼트 : IsStaggeringEnabled 속성 사용하기";

            #endregion
        }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Private

        #region 추가 버튼 클릭시 처리하기 - addButton_Click(sender, e)

        /// <summary>
        /// 추가 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void addButton_Click(object sender, RoutedEventArgs e)
        {
            int value = Convert.ToInt32((sender as Button).Tag);

            for(int i = 0; i < value; i++)
            {
                this.stackPanel.Children.Add
                (
                    new Rectangle()
                    {
                        Width  = 50,
                        Height = 50,
                        Margin = new Thickness(5),
                        Fill   = new SolidColorBrush(Windows.UI.Colors.LightBlue)
                    }
                );
            }
        }

        #endregion
        #region 모두 지우기 버튼 클릭시 처리하기 - clearAllButton_Click(sender, e)

        /// <summary>
        /// 모두 지우기 버튼 클릭시 처리하기
        /// </summary>
        /// <param name="sender">이벤트 발생자</param>
        /// <param name="e">이벤트 인자</param>
        private void clearAllButton_Click(object sender, RoutedEventArgs e)
        {
            this.stackPanel.Children.Clear();
        }

        #endregion
    }
}

100

101

102

using System;

using Windows.Foundation;

using Windows.Graphics.Display;

using Windows.UI.ViewManagement;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Shapes;

namespace TestProject

{

/// <summary>

/// 메인 페이지

/// </summary>

public sealed partial class MainPage : Page

{

//////////////////////////////////////////////////////////////////////////////////////////////////// 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 = "EntranceThemeTransition 엘리먼트 : IsStaggeringEnabled 속성 사용하기";

#endregion

}

#endregion

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

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

#region 추가 버튼 클릭시 처리하기 - addButton_Click(sender, e)

/// <summary>

/// 추가 버튼 클릭시 처리하기

/// </summary>

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

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

private void addButton_Click(object sender, RoutedEventArgs e)

{

int value = Convert.ToInt32((sender as Button).Tag);

for(int i = 0; i < value; i++)

{

this.stackPanel.Children.Add

(

new Rectangle()

{

Width = 50,

Height = 50,

Margin = new Thickness(5),

Fill = new SolidColorBrush(Windows.UI.Colors.LightBlue)

}

);

}

#endregion

#region 모두 지우기 버튼 클릭시 처리하기 - clearAllButton_Click(sender, e)

/// <summary>

/// 모두 지우기 버튼 클릭시 처리하기

/// </summary>

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

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

private void clearAllButton_Click(object sender, RoutedEventArgs e)

{

this.stackPanel.Children.Clear();

}

#endregion

}

TestProject.zip