■ ItemsRepeater 엘리먼트를 사용하는 방법을 보여준다.
▶ Bar.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 |
namespace TestProject { /// <summary> /// 막대 /// </summary> public class Bar { //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 길이 - Length /// <summary> /// 길이 /// </summary> public double Length { get; set; } #endregion #region 최대 길이 - MaximumLength /// <summary> /// 최대 길이 /// </summary> public int MaximumLength { get; set; } #endregion #region 높이 - Height /// <summary> /// 높이 /// </summary> public double Height { get; set; } #endregion #region 최대 높이 - MaximumHeight /// <summary> /// 최대 높이 /// </summary> public double MaximumHeight { get; set; } #endregion #region 반경 - Diameter /// <summary> /// 반경 /// </summary> public double Diameter { get; set; } #endregion #region 최대 반경 - MaximumDiameter /// <summary> /// 최대 반경 /// </summary> public double MaximumDiameter { get; set; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - Bar(length, maximumLength) /// <summary> /// 생성자 /// </summary> /// <param name="length">길이</param> /// <param name="maximumLength">최대 길이</param> public Bar(double length, int maximumLength) { Length = length; MaximumLength = maximumLength; Height = length / 4; MaximumHeight = maximumLength / 4; Diameter = length / 6; MaximumDiameter = maximumLength / 6; } #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 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 |
<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:local="using:TestProject" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FontFamily="나눔고딕코딩" FontSize="16"> <Page.Resources> <DataTemplate x:Key="HorizontalBarDataTemplateKey" x:DataType="local:Bar"> <Border Width="{x:Bind MaximumLength}" Background="{ThemeResource SystemChromeLowColor}"> <Rectangle HorizontalAlignment="Left" Width="{x:Bind Length}" Height="24" Fill="{ThemeResource SystemAccentColor}" /> </Border> </DataTemplate> <DataTemplate x:Key="VerticalBarDataTemplateKey" x:DataType="local:Bar"> <Border Height="{x:Bind MaximumHeight}" Background="{ThemeResource SystemChromeLowColor}"> <Rectangle VerticalAlignment="Top" Width="48" Height="{x:Bind Height}" Fill="{ThemeResource SystemAccentColor}" /> </Border> </DataTemplate> <DataTemplate x:Key="CircularDataTemplateKey" x:DataType="local:Bar"> <Grid> <Ellipse HorizontalAlignment="Center" VerticalAlignment="Center" Width="{x:Bind MaximumDiameter}" Height="{x:Bind MaximumDiameter}" Fill="{ThemeResource SystemChromeLowColor}" /> <Ellipse HorizontalAlignment="Center" VerticalAlignment="Center" Width="{x:Bind Diameter}" Height="{x:Bind Diameter}" Fill="{ThemeResource SystemAccentColor}" /> </Grid> </DataTemplate> <muxc:StackLayout x:Name="VerticalStackLayoutKey" Orientation="Vertical" Spacing="10" /> <muxc:StackLayout x:Name="HorizontalStackLayoutKey" Orientation="Horizontal" Spacing="10" /> <muxc:UniformGridLayout x:Name="UniformGridLayoutKey" MinRowSpacing="10" MinColumnSpacing="10" /> </Page.Resources> <Grid> <Grid HorizontalAlignment="Center" VerticalAlignment="Center"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto" /> <ColumnDefinition Width="50" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <ScrollViewer Grid.Column="0" Width="500" Height="400" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" HorizontalScrollMode="Auto" IsVerticalScrollChainingEnabled="False"> <muxc:ItemsRepeater Name="itemsRepeater" HorizontalAlignment="Left" VerticalAlignment="Top" Layout="{StaticResource VerticalStackLayoutKey}" ItemTemplate="{StaticResource HorizontalBarDataTemplateKey}" ItemsSource="{x:Bind barCollection}" /> </ScrollViewer> <StackPanel Grid.Column="2" Spacing="10"> <Button Name="addButton" MinWidth="150" Content="항목 추가" Click="addButton_Click" /> <Button Name="deleteButton" MinWidth="150" Content="항목 삭제" Click="deleteButton_Click" /> <muxc:RadioButtons Header="레이아웃"> <RadioButton Content="StackLayout - 수직" IsChecked="True" Tag="VerticalStackLayoutKey" Click="layoutRadioButton_Click" /> <RadioButton Content="StackLayout - 수평" Tag="HorizontalStackLayoutKey" Click="layoutRadioButton_Click" /> <RadioButton Content="UniformGridLayout" Tag="UniformGridLayoutKey" Click="layoutRadioButton_Click" /> </muxc:RadioButtons> </StackPanel> </Grid> </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 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 |
using Microsoft.UI.Xaml.Controls; using System; using System.Collections.ObjectModel; 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 Random random = new Random(); /// <summary> /// 최대 길이 /// </summary> private int maximumLength = 480; /// <summary> /// 막대 컬렉션 /// </summary> private ObservableCollection<Bar> barCollection; #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 = "ItemsRepeater 엘리먼트 사용하기"; #endregion this.barCollection = new ObservableCollection<Bar>(); this.barCollection.Add(new Bar(300, this.maximumLength)); this.barCollection.Add(new Bar(25 , this.maximumLength)); this.barCollection.Add(new Bar(175, this.maximumLength)); } #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.barCollection.Add(new Bar(this.random.Next(this.maximumLength), this.maximumLength)); this.deleteButton.IsEnabled = true; } #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.barCollection.Count > 0) { this.barCollection.RemoveAt(0); if(this.barCollection.Count == 0) { this.deleteButton.IsEnabled = false; } } } #endregion #region 레이아웃 라디오 버튼 클릭시 처리하기 - layoutRadioButton_Click(sender, e) /// <summary> /// 레이아웃 라디오 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void layoutRadioButton_Click(object sender, RoutedEventArgs e) { string itemTemplateKey = string.Empty; string layoutKey = ((FrameworkElement)sender).Tag as string; if(layoutKey.Equals(nameof(VerticalStackLayoutKey))) { itemTemplateKey = "HorizontalBarDataTemplateKey"; this.itemsRepeater.HorizontalAlignment = HorizontalAlignment.Left; this.itemsRepeater.VerticalAlignment = VerticalAlignment.Top; this.itemsRepeater.MaxWidth = this.maximumLength; } else if(layoutKey.Equals(nameof(HorizontalStackLayoutKey))) { itemTemplateKey = "VerticalBarDataTemplateKey"; this.itemsRepeater.HorizontalAlignment = HorizontalAlignment.Left; this.itemsRepeater.VerticalAlignment = VerticalAlignment.Center; this.itemsRepeater.MaxWidth = 6000; } else if(layoutKey.Equals(nameof(UniformGridLayoutKey))) { itemTemplateKey = "CircularDataTemplateKey"; this.itemsRepeater.HorizontalAlignment = HorizontalAlignment.Left; this.itemsRepeater.VerticalAlignment = VerticalAlignment.Top; this.itemsRepeater.MaxWidth = this.maximumLength; } this.itemsRepeater.Layout = Resources[layoutKey ] as VirtualizingLayout; this.itemsRepeater.ItemTemplate = Resources[itemTemplateKey] as DataTemplate; this.itemsRepeater.ItemsSource = this.barCollection; } #endregion } } |
