첨부 소스 코드는 나눔고딕코딩 폰트를 사용합니다.
728x90
반응형
728x170

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*,10,Auto,*">
        <CarouselView x:Name="carouselView" Grid.Row="1"
            BackgroundColor="Cornsilk"
            PeekAreaInsets="50"
            ItemsUpdatingScrollMode="KeepItemsInView">
            <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>
        <Button x:Name="addButton" Grid.Row="3"
            HorizontalOptions="Center"
            WidthRequest="100"
            Text="추가" />
    </Grid>
</ContentPage>

 

300x250

 

▶ MainPage.xaml.cs

using System.Collections.ObjectModel;

namespace TestProject;

/// <summary>
/// 메인 페이지
/// </summary>
public partial class MainPage : ContentPage
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Field
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region Field

    /// <summary>
    /// 컬렉션
    /// </summary>
    private ObservableCollection<PhotoModel> collection;

    /// <summary>
    /// 이미지 소스 배열
    /// </summary>
    private ImageSource[] imageSourceArray;

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Constructor
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 생성자 - MainPage()

    /// <summary>
    /// 생성자
    /// </summary>
    public MainPage()
    {
        InitializeComponent();

        this.imageSourceArray = new ImageSource[]
        {
            ImageSource.FromFile("sample1.jpg"),
            ImageSource.FromFile("sample2.jpg"),
            ImageSource.FromFile("sample3.jpg"),
            ImageSource.FromFile("sample4.jpg")
        };

        this.collection = new ObservableCollection<PhotoModel>();

        this.collection.Add(new PhotoModel { ID = "0001", Title = "풍경1", ImageSource = this.imageSourceArray[0] });
        this.collection.Add(new PhotoModel { ID = "0002", Title = "풍경2", ImageSource = this.imageSourceArray[1] });
        this.collection.Add(new PhotoModel { ID = "0003", Title = "풍경3", ImageSource = this.imageSourceArray[2] });
        this.collection.Add(new PhotoModel { ID = "0004", Title = "풍경4", ImageSource = this.imageSourceArray[3] });

        this.carouselView.ItemsSource = this.collection;

        this.addButton.Clicked += addButton_Clicked;
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Method
    ////////////////////////////////////////////////////////////////////////////////////////// Private
    //////////////////////////////////////////////////////////////////////////////// Event

    #region 추가 버튼 클릭시 처리하기 - addButton_Clicked(sender, e)

    /// <summary>
    /// 추가 버튼 클릭시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void addButton_Clicked(object sender, EventArgs e)
    {
        Random random = new Random(DateTime.Now.Millisecond);

        int id = this.collection.Count + 1;

        this.collection.Add(new PhotoModel { ID = GetRightString($"0000{id}", 4), Title = $"풍경{id}", ImageSource = this.imageSourceArray[random.Next(0, 3)] });
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////// Function

    #region 오른쪽 문자열 구하기 - GetRightString(source, length)

    /// <summary>
    /// 오른쪽 문자열 구하기
    /// </summary>
    /// <param name="source">소스 문자열</param>
    /// <param name="length">길이</param>
    /// <returns>오른쪽 문자열</returns>
    private string GetRightString(string source, int length)
    {
        if(source.Length > length)
        {
            return source.Substring(source.Length - length, length);
        }
        else
        {
            return source;
        }
    }

    #endregion
}
728x90
반응형
그리드형(광고전용)
Posted by icodebroker

댓글을 달아 주세요