■ CollectionView 엘리먼트의 ItemsLayout 속성을 사용해 수직 리스트(VerticalList) 레이아웃을 설정하는 방법을 보여준다.
▶ Monkey.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 |
namespace TestProject; /// <summary> /// 원숭이 /// </summary> public class Monkey { //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region 명칭 - Name /// <summary> /// 명칭 /// </summary> public string Name { get; set; } #endregion #region 위치 - Location /// <summary> /// 위치 /// </summary> public string Location { get; set; } #endregion #region 이미지 URL - ImageURL /// <summary> /// 이미지 URL /// </summary> public string ImageURL { get; set; } #endregion } |
▶ ImageSourceConverter.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 |
using System.Globalization; namespace TestProject; /// <summary> /// 이미지 URL→이미지 소스 변환자 /// </summary> public class ImageSourceConverter : IValueConverter { //////////////////////////////////////////////////////////////////////////////////////////////////// Method ////////////////////////////////////////////////////////////////////////////////////////// Public #region 변환하기 - Convert(sourceValue, targetType, parameter, cultureInfo) /// <summary> /// 변환하기 /// </summary> /// <param name="sourceValue">소스 값</param> /// <param name="targetType">타겟 타입</param> /// <param name="parameter">매개 변수</param> /// <param name="cultureInfo">문화 정보</param> /// <returns>변환 값</returns> public object Convert(object sourceValue, Type targetType, object parameter, CultureInfo cultureInfo) { string imageURL = sourceValue as string; if(string.IsNullOrWhiteSpace(imageURL)) { return null; } return ImageSource.FromUri(new Uri(imageURL)); } #endregion #region 역변환하기 - ConvertBack(sourceValue, targetType, parameter, cultureInfo) /// <summary> /// 역변환하기 /// </summary> /// <param name="sourceValue">소스 값</param> /// <param name="targetType">타겟 타입</param> /// <param name="parameter">매개 변수</param> /// <param name="cultureInfo">문화 정보</param> /// <returns>역변환 값</returns> public object ConvertBack(object sourceValue, Type targetType, object parameter, CultureInfo cultureInfo) { throw new NotImplementedException(); } #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 |
<?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" ItemsLayout="VerticalList"> <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 |
namespace TestProject; /// <summary> /// 메인 페이지 /// </summary> public partial class MainPage : ContentPage { //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainPage() /// <summary> /// 생성자 /// </summary> public MainPage() { InitializeComponent(); List<Monkey> list = new List<Monkey>(); for(int i = 0; i < 10; i++) { list.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" } ); list.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" } ); list.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" } ); } this.collectionView.ItemsSource = list; } #endregion } |
