■ CarouselView 엘리먼트의 PeekAreaInsets 속성을 사용해 인접 항목 부분을 표시하는 방법을 보여준다.
▶ 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 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 |
<?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" PeekAreaInsets="50"> <CarouselView.ItemTemplate> <DataTemplate> <Grid> <Frame HorizontalOptions="Center" HeightRequest="300" CornerRadius="5" BorderColor="DarkGray" HasShadow="True"> <StackLayout Spacing="10"> <Label HorizontalOptions="Center" FontSize="16" Text="{Binding ID}" /> <Label HorizontalOptions="Center" FontSize="18" FontAttributes="Bold" Text="{Binding Title}" /> <Image HorizontalOptions="Center" WidthRequest="200" HeightRequest="200" Aspect="Fill" Source="{Binding ImageSource}" /> </StackLayout> </Frame> </Grid> </DataTemplate> </CarouselView.ItemTemplate> </CarouselView> </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 |
namespace TestProject; /// <summary> /// 메인 페이지 /// </summary> public partial class MainPage : ContentPage { //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor ////////////////////////////////////////////////////////////////////////////////////////// Public #region 생성자 - MainPage() /// <summary> /// 생성자 /// </summary> public MainPage() { InitializeComponent(); 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 } |
