[C#/MAUI/.NET6] CarouselView 클래스 : ItemTemplate 속성 사용하기

TestProject.zip

0.26MB

▶ PhotoModel.cs

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
}

 

728x90

 

▶ MainPage.xaml

<?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>

 

300x250

 

▶ MainPage.xaml.cs

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
}