[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

 

▶ PhotoDataTemplateSelector.cs

namespace TestProject
{
    /// <summary>
    /// 사진 데이터 템플리트 선택자
    /// </summary>
    public class PhotoDataTemplateSelector : DataTemplateSelector
    {
        //////////////////////////////////////////////////////////////////////////////////////////////////// Property
        ////////////////////////////////////////////////////////////////////////////////////////// Public

        #region 템플리트1 - Template1

        /// <summary>
        /// 템플리트1
        /// </summary>
        public DataTemplate Template1 { get; set; }

        #endregion
        #region 템플리트2 - Template2

        /// <summary>
        /// 템플리트2
        /// </summary>
        public DataTemplate Template2 { get; set; }

        #endregion

        //////////////////////////////////////////////////////////////////////////////////////////////////// Method
        ////////////////////////////////////////////////////////////////////////////////////////// Protected

        #region 템플리트 선택시 처리하기 - OnSelectTemplate(item, container)

        /// <summary>
        /// 템플리트 선택시 처리하기
        /// </summary>
        /// <param name="item">항목</param>
        /// <param name="container">컨테이너</param>
        /// <returns>데이터 템플리트</returns>
        protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
        {
            PhotoModel photo = item as PhotoModel;

            if(photo.ID == "0001" || photo.ID == "0003")
            {
                return Template1;
            }
            else
            {
                return Template2;
            }
        }

        #endregion
    }
}

 

300x250

 

▶ 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"
    xmlns:local="clr-namespace:TestProject">
    <ContentPage.Resources>
        <DataTemplate x:Key="DataTemplateKey1">
            <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>
        <DataTemplate x:Key="DataTemplateKey2">
            <Grid>
                <Frame
                    HorizontalOptions="Center"
                    HeightRequest="300"
                    CornerRadius="5"
                    BorderColor="Red"
                    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>
        <local:PhotoDataTemplateSelector x:Key="PhotoDataTemplateSelectorKey"
            Template1="{StaticResource DataTemplateKey1}"
            Template2="{StaticResource DataTemplateKey2}" />
    </ContentPage.Resources>
    <Grid
        Margin="10"
        RowDefinitions="*,2*,*">
        <CarouselView x:Name="carouselView" Grid.Row="1"
            BackgroundColor="Cornsilk"
            ItemTemplate="{StaticResource PhotoDataTemplateSelectorKey}" />
    </Grid>
</ContentPage>

 

반응형

 

▶ MainPage.xaml.cs

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
}