■ ExpressionAnimation 클래스를 사용해 크기에 따라 새로운 레이아웃을 만드는 방법을 보여준다.
▶ MainPage.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?xml version="1.0" encoding="utf-8"?> <Page x:Class="TestProject.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Grid Margin="10"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="10" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <Grid Name="layoutGrid" Grid.Column="0" Width="200" Height="200" /> <Slider Name="radiusSlider" Grid.Column="2" HorizontalAlignment="Center" VerticalAlignment="Center" Header="Change radius" Width="150" Minimum="200" Maximum="400" /> </Grid> </Page> |
▶ MainPage.xaml.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
using Microsoft.UI.Composition; using Microsoft.UI.Xaml; using Microsoft.UI.Xaml.Automation; using Microsoft.UI.Xaml.Controls; using Microsoft.UI.Xaml.Controls.Primitives; using Microsoft.UI.Xaml.Media; namespace TestProject { /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 합성자 /// </summary> private Compositor compositor = CompositionTarget.GetCompositorForCurrentThread(); #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainPage() /// <summary> /// 생성자 /// </summary> public MainPage() { InitializeComponent(); Loaded += Page_Loaded; this.radiusSlider.ValueChanged += radiusSlider_ValueChanged; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private //////////////////////////////////////////////////////////////////////////////// Event #region 페이지 로드시 처리하기 - Page_Loaded(sender, e) /// <summary> /// 페이지 로드시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void Page_Loaded(object sender, RoutedEventArgs e) { string radius = "(layoutGrid.ActualSize.X / 2)"; string theta = ".02 * " + radius + " + ((2 * Pi) / buttonCount) * index"; string xOffset = radius; string yOffset = "0"; string expression = string.Format("Vector3({0} * cos({1}) + {2}, {0} * sin({1}) + {3}, 0)", radius, theta, xOffset, yOffset); int buttonCount = 8; for(int i = 0; i < buttonCount; i++) { Button button = new Button() { Content = "Button" }; AutomationProperties.SetName(button, "Button " + i); this.layoutGrid.Children.Add(button); ExpressionAnimation animation = this.compositor.CreateExpressionAnimation(); animation.Expression = expression; animation.SetScalarParameter("index", i + 1); animation.SetScalarParameter("buttonCount", buttonCount); animation.Target = "Translation"; animation.SetExpressionReferenceParameter("layoutGrid", this.layoutGrid); button.StartAnimation(animation); } } #endregion #region 반경 슬라이더 값 변경시 처리하기 - radiusSlider_ValueChanged(sender, e) /// <summary> /// 반경 슬라이더 값 변경시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void radiusSlider_ValueChanged(object sender, RangeBaseValueChangedEventArgs e) { if(this.layoutGrid == null) { return; } this.layoutGrid.Width = this.layoutGrid.Height = e.NewValue; } #endregion } } |
