[C#/MAUI/.NET6] LinearItemsLayout 엘리먼트 : ItemSpacing 속성을 사용해 CarouselView 객체의 항목 간격 설정하기

■ LinearItemsLayout 엘리먼트의 ItemSpacing 속성을 사용해 CarouselView 객체의 항목 간격을 설정하는 방법을 보여준다.

▶ 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
}

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


<?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="200">
            <CarouselView.ItemsLayout>
                <LinearItemsLayout
                    Orientation="Horizontal"
                    ItemSpacing="10" />
            </CarouselView.ItemsLayout>
            <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>

<?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="200">

<CarouselView.ItemsLayout>

<LinearItemsLayout

Orientation="Horizontal"

ItemSpacing="10" />

</CarouselView.ItemsLayout>

<CarouselView.ItemTemplate>

<Grid>

<Frame

HorizontalOptions="Center"

HeightRequest="300"

CornerRadius="5"

BorderColor="DarkGray"

HasShadow="True">

<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


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
}

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

}

TestProject.zip