■ WrapLayout 엘리먼트의 HorizontalSpacing/VerticalSpacing 속성을 사용해 방향 접근 방식의 레이아웃을 설정하는 방법을 보여준다.
※ 비주얼 스튜디오에서 TestProject(Unpackaged) 모드로 빌드한다.
※ TestProject.csproj 프로젝트 파일에서 WindowsPackageType 태그를 None으로 추가했다.
▶ ColorItem.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 |
using Windows.UI; namespace TestProject; /// <summary> /// 색상 항목 /// </summary> public class ColorItem { //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 인덱스 - Index /// <summary> /// 인덱스 /// </summary> public int Index { get; internal set; } #endregion #region 너비 - Width /// <summary> /// 너비 /// </summary> public int Width { get; internal set; } #endregion #region 높이 - Height /// <summary> /// 높이 /// </summary> public int Height { get; internal set; } #endregion #region 색상 - Color /// <summary> /// 색상 /// </summary> public Color Color { get; internal set; } #endregion } |
▶ 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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<?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" xmlns:muxc="using:Microsoft.UI.Xaml.Controls" xmlns:ctwc="using:CommunityToolkit.WinUI.Controls" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Page.Resources> <DataTemplate x:Key="ItemDataTemplateKey"> <Border Width="{Binding Width}" Height="48" CornerRadius="{StaticResource ControlCornerRadius}"> <Border.Background> <SolidColorBrush Color="{Binding Color}" /> </Border.Background> <TextBlock Margin="5 5 5 5" FontSize="16" Text="{Binding Index}" /> </Border> </DataTemplate> </Page.Resources> <Grid Margin="10"> <ScrollViewer> <muxc:ItemsRepeater ItemTemplate="{StaticResource ItemDataTemplateKey}" ItemsSource="{x:Bind ColorItemCollection, Mode=OneWay}"> <muxc:ItemsRepeater.Layout> <ctwc:WrapLayout HorizontalSpacing="10" VerticalSpacing="10" /> </muxc:ItemsRepeater.Layout> </muxc:ItemsRepeater> </ScrollViewer> </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 |
using System; using System.Collections.ObjectModel; using Windows.UI; using Microsoft.UI.Xaml.Controls; namespace TestProject; /// <summary> /// 메인 페이지 /// </summary> public sealed partial class MainPage : Page { //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Public #region Field /// <summary> /// 색상 항목 컬렉션 /// </summary> public ObservableCollection<ColorItem> ColorItemCollection = new(); #endregion ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 난수기 /// </summary> private Random random; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainPage() /// <summary> /// 생성자 /// </summary> public MainPage() { InitializeComponent(); this.random = new Random(DateTime.Now.Millisecond); for(int i = 0; i < this.random.Next(100, 200); i++) { ColorItem colotItem = new ColorItem { Index = i, Width = this.random.Next(50, 250), Height = this.random.Next(50, 250), Color = Color.FromArgb ( 255, (byte)this.random.Next(0, 255), (byte)this.random.Next(0, 255), (byte)this.random.Next(0, 255) ) }; ColorItemCollection.Add(colotItem); } } #endregion } |
