■ GridView 엘리먼트의 ItemTemplate/AllowDrop/CanDragItems/CanReorderItems/IsItemClickEnabled/FlowDirection/SelectionMode 속성을 사용하는 방법을 보여준다.
▶ CustomDataObject.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 |
using System; using System.Collections.Generic; namespace TestProject { /// <summary> /// 커스텀 데이터 객체 /// </summary> public class CustomDataObject { //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 제목 - Title /// <summary> /// 제목 /// </summary> public string Title { get; set; } #endregion #region 이미지 위치 - ImageLocation /// <summary> /// 이미지 위치 /// </summary> public string ImageLocation { get; set; } #endregion #region 조회수 - Views /// <summary> /// 조회수 /// </summary> public string Views { get; set; } #endregion #region 좋아요 - Likes /// <summary> /// 좋아요 /// </summary> public string Likes { get; set; } #endregion #region 설명 - Description /// <summary> /// 설명 /// </summary> public string Description { get; set; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - CustomDataObject() /// <summary> /// 생성자 /// </summary> public CustomDataObject() { } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Static //////////////////////////////////////////////////////////////////////////////// Public #region 커스텀 데이터 객체 리스트 구하기 - GetCustomDataObjectList(includeAllItems) /// <summary> /// 커스텀 데이터 객체 리스트 구하기 /// </summary> /// <param name="includeAllItems">모든 항목 포함 여부</param> /// <returns>커스텀 데이터 객체 리스트</returns> public static List<CustomDataObject> GetCustomDataObjectList(bool includeAllItems = false) { string[] dummyTextArray = new string[] { @"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id facilisis lectus. Cras nec convallis ante, quis pulvinar tellus. Integer dictum accumsan pulvinar. Pellentesque eget enim sodales sapien vestibulum consequat.", @"Nullam eget mattis metus. Donec pharetra, tellus in mattis tincidunt, magna ipsum gravida nibh, vitae lobortis ante odio vel quam.", @"Quisque accumsan pretium ligula in faucibus. Mauris sollicitudin augue vitae lorem cursus condimentum quis ac mauris. Pellentesque quis turpis non nunc pretium sagittis. Nulla facilisi. Maecenas eu lectus ante. Proin eleifend vel lectus non tincidunt. Fusce condimentum luctus nisi, in elementum ante tincidunt nec.", @"Aenean in nisl at elit venenatis blandit ut vitae lectus. Praesent in sollicitudin nunc. Pellentesque justo augue, pretium at sem lacinia, scelerisque semper erat. Ut cursus tortor at metus lacinia dapibus.", @"Ut consequat magna luctus justo egestas vehicula. Integer pharetra risus libero, et posuere justo mattis et.", @"Proin malesuada, libero vitae aliquam venenatis, diam est faucibus felis, vitae efficitur erat nunc non mauris. Suspendisse at sodales erat.", @"Aenean vulputate, turpis non tincidunt ornare, metus est sagittis erat, id lobortis orci odio eget quam. Suspendisse ex purus, lobortis quis suscipit a, volutpat vitae turpis.", @"Duis facilisis, quam ut laoreet commodo, elit ex aliquet massa, non varius tellus lectus et nunc. Donec vitae risus ut ante pretium semper. Phasellus consectetur volutpat orci, eu dapibus turpis. Fusce varius sapien eu mattis pharetra.", }; Random random = new Random(); int count = includeAllItems ? 13 : 8; List<CustomDataObject> targetList = new List<CustomDataObject>(); for(int i = 0; i < count; i++) { targetList.Add ( new CustomDataObject() { Title = $"Item {i + 1}", ImageLocation = $"/IMAGE/LandscapeImage{i + 1:d2}.jpg", Views = random.Next(100, 999).ToString(), Likes = random.Next(10, 99).ToString(), Description = dummyTextArray[i % dummyTextArray.Length], } ); } return targetList; } #endregion } } |
▶ MainWindow.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 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 |
<?xml version="1.0" encoding="utf-8"?> <Window x:Class="TestProject.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:TestProject" Title="TestProject"> <Border Name="border" Margin="10" BorderThickness="1" BorderBrush="Black"> <Border.Resources> <DataTemplate x:Key="ImageDataTemplateKey" x:DataType="local:CustomDataObject"> <Image Width="190" Height="130" Stretch="UniformToFill" Source="{x:Bind ImageLocation}" /> </DataTemplate> <DataTemplate x:Key="IconTextDataTemplateKey" x:DataType="local:CustomDataObject"> <RelativePanel Width="280" MinHeight="160"> <Image Name="image" Width="18" Margin="0 5 0 0" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignTopWithPanel="True" Stretch="Uniform" Source="{x:Bind ImageLocation}" /> <TextBlock Name="titleTextBlock" Style="{StaticResource BaseTextBlockStyle}" Margin="10 0 0 0" RelativePanel.RightOf="image" RelativePanel.AlignTopWithPanel="True" Text="{x:Bind Title}" /> <TextBlock Style="{StaticResource CaptionTextBlockStyle}" Margin="0 5 10 0" RelativePanel.Below="titleTextBlock" TextWrapping="Wrap" TextTrimming="WordEllipsis" Text="{x:Bind Description}" /> </RelativePanel> </DataTemplate> <DataTemplate x:Key="ImageTextDataTemplateKey" x:DataType="local:CustomDataObject"> <Grid Width="280"> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image Grid.Column="0" VerticalAlignment="Top" Height="100" Stretch="Fill" Source="{x:Bind ImageLocation}" /> <StackPanel Grid.Column="1" Margin="10 0 0 10"> <TextBlock Style="{ThemeResource SubtitleTextBlockStyle}" Margin="0 0 0 10" Text="{x:Bind Title}" /> <StackPanel Orientation="Horizontal"> <TextBlock Style="{ThemeResource CaptionTextBlockStyle}" Text="{x:Bind Views}" /> <TextBlock Style="{ThemeResource CaptionTextBlockStyle}" Text=" Views" /> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Style="{ThemeResource CaptionTextBlockStyle}" Text="{x:Bind Likes}" /> <TextBlock Style="{ThemeResource CaptionTextBlockStyle}" Text=" Likes" /> </StackPanel> </StackPanel> </Grid> </DataTemplate> <DataTemplate x:Key="TextDataTemplateKey" x:DataType="local:CustomDataObject"> <StackPanel Width="240" Orientation="Horizontal"> <TextBlock Style="{StaticResource TitleTextBlockStyle}" Margin="10 0 0 0" Text="{x:Bind Title}" /> </StackPanel> </DataTemplate> </Border.Resources> <Grid Margin="10"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> <ColumnDefinition Width="Auto" /> </Grid.ColumnDefinitions> <GridView Name="gridView" Grid.Row="0" Grid.Column="0" ItemTemplate="{StaticResource ImageDataTemplateKey}" AllowDrop="{x:Bind allowDropCheckBox.IsChecked.Value, Mode=OneWay}" CanDragItems="{x:Bind canDragItemsCheckBox.IsChecked.Value, Mode=OneWay}" CanReorderItems="{x:Bind canReorderItemsCheckBox.IsChecked.Value, Mode=OneWay}" IsItemClickEnabled="{x:Bind isItemClickEnabledCheckBox.IsChecked.Value, Mode=OneWay}" FlowDirection="LeftToRight" /> <StackPanel Grid.Row="1" Grid.Column="0"> <TextBlock Name="countClickedTextBlock" /> <TextBlock Name="countSelectedTextBlock" /> </StackPanel> <StackPanel Grid.Row="0" Grid.RowSpan="2" Grid.Column="1" Margin="10 0 0 0"> <RadioButtons Header="ItemTemplate"> <RadioButton GroupName="Template" Tag="ImageDataTemplateKey" IsChecked="True" Content="Image" Checked="templateRadioButton_Checked" /> <RadioButton GroupName="Template" Tag="IconTextDataTemplateKey" Content="Icon/Text" Checked="templateRadioButton_Checked" /> <RadioButton GroupName="Template" Tag="ImageTextDataTemplateKey" Content="Image/Text" Checked="templateRadioButton_Checked" /> <RadioButton GroupName="Template" Tag="TextDataTemplateKey" Content="Text" Checked="templateRadioButton_Checked" /> </RadioButtons> <StackPanel> <ToggleButton Name="reverseFlowDirectionToggleButton" Margin="0 10 0 0" Content="Reverse FlowDirection" /> <TextBlock Margin="0 10 0 0" Text="GridView Properties" /> <CheckBox Name="isItemClickEnabledCheckBox" Margin="0 5 0 0" Content="IsItemClickEnabled" /> <CheckBox Name="canDragItemsCheckBox" Margin="0 5 0 0" Content="CanDragItems" /> <CheckBox Name="canReorderItemsCheckBox" Margin="0 5 0 0" Content="CanReorderItems" /> <CheckBox Name="allowDropCheckBox" Margin="0 5 0 0" Content="AllowDrop" /> <ComboBox Name="selectionModeComboBox" Margin="0 5 0 0" Header="SelectionMode" SelectedIndex="1"> <x:String>None</x:String> <x:String>Single</x:String> <x:String>Multiple</x:String> <x:String>Extended</x:String> </ComboBox> </StackPanel> </StackPanel> </Grid> </Border> </Window> |
▶ MainWindow.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 174 |
using System.Collections.Generic; using System.Collections.ObjectModel; using Microsoft.UI.Xaml; using Microsoft.UI.Xaml.Controls; namespace TestProject { /// <summary> /// 메인 윈도우 /// </summary> public sealed partial class MainWindow : Window { //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainWindow() /// <summary> /// 생성자 /// </summary> public MainWindow() { InitializeComponent(); List<CustomDataObject> sourceList = CustomDataObject.GetCustomDataObjectList(); ObservableCollection<CustomDataObject> sourceCollection = new ObservableCollection<CustomDataObject>(sourceList); this.gridView.ItemsSource = sourceCollection; this.gridView.ItemClick += gridView_ItemClick; this.gridView.SelectionChanged += gridView_SelectionChanged; this.reverseFlowDirectionToggleButton.Click += reverseFlowDirectionToggleButton_Click; this.isItemClickEnabledCheckBox.Click += isItemClickEnabledCheckBox_Click; this.selectionModeComboBox.SelectionChanged += selectionModeComboBox_SelectionChanged; } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Private #region 그리드 뷰 항목 클릭시 처리하기 - gridView_ItemClick(sender, e) /// <summary> /// 그리드 뷰 항목 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void gridView_ItemClick(object sender, ItemClickEventArgs e) { this.countClickedTextBlock.Text = $"You clicked {(e.ClickedItem as CustomDataObject).Title}."; } #endregion #region 그리드 뷰 선택 변경시 처리하기 - gridView_SelectionChanged(sender, e) /// <summary> /// 그리드 뷰 선택 변경시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void gridView_SelectionChanged(object sender, SelectionChangedEventArgs e) { if(sender is GridView gridView) { this.countSelectedTextBlock.Text = $"You have selected {this.gridView.SelectedItems.Count} item(s)."; } } #endregion #region 템플리트 라디오 버튼 체크시 처리하기 - templateRadioButton_Checked(sender, e) /// <summary> /// 템플리트 라디오 버튼 체크시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void templateRadioButton_Checked(object sender, RoutedEventArgs e) { object tag = (sender as FrameworkElement).Tag; if(tag != null) { string templateName = tag.ToString(); this.gridView.ItemTemplate = (DataTemplate)this.border.Resources[templateName]; } } #endregion #region Reverse FlowDirection 토글 버튼 클릭시 처리하기 - reverseFlowDirectionToggleButton_Click(sender, e) /// <summary> /// Reverse FlowDirection 토글 버튼 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void reverseFlowDirectionToggleButton_Click(object sender, RoutedEventArgs e) { if(this.gridView.FlowDirection == FlowDirection.LeftToRight) { this.gridView.FlowDirection = FlowDirection.RightToLeft; } else { this.gridView.FlowDirection = FlowDirection.LeftToRight; } } #endregion #region IsItemClickEnabled 체크 박스 클릭시 처리하기 - isItemClickEnabledCheckBox_Click(sender, e) /// <summary> /// IsItemClickEnabled 체크 박스 클릭시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void isItemClickEnabledCheckBox_Click(object sender, RoutedEventArgs e) { this.countClickedTextBlock.Text = string.Empty; } #endregion #region 선택 모드 콤보 박스 선택 변경시 처리하기 - selectionModeComboBox_SelectionChanged(sender, e) /// <summary> /// 선택 모드 콤보 박스 선택 변경시 처리하기 /// </summary> /// <param name="sender">이벤트 발생자</param> /// <param name="e">이벤트 인자</param> private void selectionModeComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e) { if(this.gridView != null) { string colorName = e.AddedItems[0].ToString(); switch(colorName) { case "None" : this.gridView.SelectionMode = ListViewSelectionMode.None; this.countSelectedTextBlock.Text = string.Empty; break; case "Single" : this.gridView.SelectionMode = ListViewSelectionMode.Single; break; case "Multiple" : this.gridView.SelectionMode = ListViewSelectionMode.Multiple; break; case "Extended" : this.gridView.SelectionMode = ListViewSelectionMode.Extended; break; } } } #endregion } } |
