■ CarouselView 클래스의 ItemTemplate 속성을 사용하는 방법을 보여준다.
▶ PhotoModel.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 PhotoModel { //////////////////////////////////////////////////////////////////////////////////////////////////// Property ////////////////////////////////////////////////////////////////////////////////////////// Public #region ID - ID /// <summary> /// ID /// </summary> public string ID { get; set; } #endregion #region 제목 - Title /// <summary> /// 제목 /// </summary> public string Title { get; set; } #endregion #region 이미지 소스 - ImageSource /// <summary> /// 이미지 소스 /// </summary> public ImageSource ImageSource { get; set; } #endregion } |
▶ MainPage.xaml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?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"> <Grid Margin="10" RowDefinitions="*,2*,*"> <CarouselView x:Name="carouselView" Grid.Row="1" BackgroundColor="Cornsilk" /> </Grid> </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 |
namespace TestProject; /// <summary> /// 메인 페이지 /// </summary> public partial class MainPage : ContentPage { //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainPage() /// <summary> /// 생성자 /// </summary> public MainPage() { InitializeComponent(); this.carouselView.ItemTemplate = new DataTemplate ( () => { #region ID 레이블을 설정한다. Label idLabel = new Label { HorizontalOptions = LayoutOptions.Center, FontSize = 16 }; idLabel.SetBinding(Label.TextProperty, "ID"); #endregion #region 제목 레이블을 설정한다. Label titleLabel = new Label { HorizontalOptions = LayoutOptions.Center, FontSize = 18, FontAttributes = FontAttributes.Bold }; titleLabel.SetBinding(Label.TextProperty, "Title"); #endregion #region 이미지 소스 이미지를 설정한다. Image imageSourceImage = new Image { HorizontalOptions = LayoutOptions.Center, WidthRequest = 200, HeightRequest = 200, Aspect = Aspect.Fill }; imageSourceImage.SetBinding(Image.SourceProperty, "ImageSource"); #endregion #region 스택 레이아웃을 설정한다. StackLayout stackLayout = new StackLayout { Spacing = 10 }; stackLayout.Children.Add(idLabel ); stackLayout.Children.Add(titleLabel ); stackLayout.Children.Add(imageSourceImage); #endregion #region 프레임을 설정한다. Frame frame = new Frame { HorizontalOptions = LayoutOptions.Center, VerticalOptions = LayoutOptions.Center, HeightRequest = 300, CornerRadius = 5, BorderColor = Colors.DarkGray, HasShadow = true }; frame.Content = stackLayout; #endregion #region 그리드를 설정한다. Grid grid = new Grid(); grid.Children.Add(frame); #endregion return grid; } ); List<PhotoModel> list = new List<PhotoModel>(); list.Add(new PhotoModel { ID = "0001", Title = "풍경1", ImageSource = ImageSource.FromFile("sample1.jpg") }); list.Add(new PhotoModel { ID = "0002", Title = "풍경2", ImageSource = ImageSource.FromFile("sample2.jpg") }); list.Add(new PhotoModel { ID = "0003", Title = "풍경3", ImageSource = ImageSource.FromFile("sample3.jpg") }); list.Add(new PhotoModel { ID = "0004", Title = "풍경4", ImageSource = ImageSource.FromFile("sample4.jpg") }); this.carouselView.ItemsSource = list; } #endregion } |
