■ CollectionView 엘리먼트의 SelectionMode 속성을 사용해 복수 항목을 사전에 선택하는 방법을 보여준다.
▶ 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 |
<?xml version="1.0" encoding="utf-8" ?> <ContentPage x:Class="TestProject.MainPage" xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:TestProject"> <ContentPage.Resources> <local:ImageSourceConverter x:Key="ImageSourceConverterKey" /> </ContentPage.Resources> <CollectionView x:Name="collectionView" SelectionMode="Multiple" SelectedItems="{Binding SelectedMonkeyCollection}" ItemsSource="{Binding MonkeyCollection}"> <CollectionView.ItemTemplate> <DataTemplate> <Grid Padding="10" RowDefinitions="Auto" ColumnDefinitions="Auto,10,*"> <Image Grid.Column="0" WidthRequest="60" HeightRequest="60" Aspect="AspectFill" Source="{Binding ImageURL, Converter={StaticResource ImageSourceConverterKey}}" /> <StackLayout Grid.Column="2"> <Label FontAttributes="Bold" FontSize="16" Text="{Binding Name}" /> <Label VerticalOptions="End" FontAttributes="Italic" Text="{Binding Location}" /> </StackLayout> </Grid> </DataTemplate> </CollectionView.ItemTemplate> </CollectionView> </ContentPage> |
▶ 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 |
using System.Collections.ObjectModel; using System.ComponentModel; namespace TestProject; /// <summary> /// 메인 페이지 /// </summary> public partial class MainPage : ContentPage, INotifyPropertyChanged { //////////////////////////////////////////////////////////////////////////////////////////////////// Event ////////////////////////////////////////////////////////////////////////////////////////// Public #region 속성 변경시 - PropertyChanged /// <summary> /// 속성 변경시 /// </summary> public new event PropertyChangedEventHandler PropertyChanged; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Field ////////////////////////////////////////////////////////////////////////////////////////// Private #region Field /// <summary> /// 원숭이 컬렉션 /// </summary> private ObservableCollection<Monkey> monkeyCollection; /// <summary> /// 선택 원숭이 컬렉션 /// </summary> private ObservableCollection<object> selectedMonkeyCollection; #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 원숭이 컬렉션 - MonkeyCollection /// <summary> /// 원숭이 컬렉션 /// </summary> public ObservableCollection<Monkey> MonkeyCollection { get { return this.monkeyCollection; } set { if(this.monkeyCollection != value) { this.monkeyCollection = value; PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("MonkeyCollection")); } } } #endregion #region 선택 원숭이 컬렉션 - SelectedMonkeyCollection /// <summary> /// 선택 원숭이 컬렉션 /// </summary> public ObservableCollection<object> SelectedMonkeyCollection { get { return this.selectedMonkeyCollection; } set { if(this.selectedMonkeyCollection != value) { this.selectedMonkeyCollection = value; this.collectionView.UpdateSelectedItems(value); PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("SelectedMonkeyCollection")); } } } #endregion //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainPage() /// <summary> /// 생성자 /// </summary> public MainPage() { InitializeComponent(); ObservableCollection<Monkey> monkeyCollection = new ObservableCollection<Monkey>(); for(int i = 0; i < 10; i++) { monkeyCollection.Add ( new Monkey { Name = "Baboon", Location = "Africa and Asia", ImageURL = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg" } ); monkeyCollection.Add ( new Monkey { Name = "Capuchin Monkey", Location = "Central and South America", ImageURL = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Capuchin_Costa_Rica.jpg/200px-Capuchin_Costa_Rica.jpg" } ); monkeyCollection.Add ( new Monkey { Name = "Blue Monkey", Location = "Central and East Africa", ImageURL = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/BlueMonkey.jpg/220px-BlueMonkey.jpg" } ); } MonkeyCollection = monkeyCollection; SelectedMonkeyCollection = new ObservableCollection<object> { monkeyCollection[2], monkeyCollection[3], monkeyCollection[5] }; BindingContext = this; } #endregion } |
※ CollectionView.SelectedItems 속성은 OneWay 바인딩 모드로 설정되어 있다는 점에 주의한다.
