[C#/MAUI/.NET6] CarouselView 엘리먼트 : EmptyViewTemplate 속성을 사용해 데이터가 없는 경우 표시하기

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

 

▶ FilterData.cs

namespace TestProject;

/// <summary>
/// 필터 데이터
/// </summary>
public class FilterData : BindableObject
{
    //////////////////////////////////////////////////////////////////////////////////////////////////// Bindable Property
    ////////////////////////////////////////////////////////////////////////////////////////// Static
    //////////////////////////////////////////////////////////////////////////////// Public

    #region 필터 속성 - FilterProperty

    /// <summary>
    /// 필터 속성
    /// </summary>
    public static readonly BindableProperty FilterProperty = BindableProperty.Create
    (
        nameof(Filter),
        typeof(string),
        typeof(FilterData),
        null
    );

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Property
    ////////////////////////////////////////////////////////////////////////////////////////// Public

    #region 필터 - Filter

    /// <summary>
    /// 필터
    /// </summary>
    public string Filter
    {
        get
        {
            return (string)GetValue(FilterProperty);
        }
        set
        {
            SetValue(FilterProperty, value);
        }
    }

    #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">
    <Grid
        Margin="10"
        RowDefinitions="*,Auto,10,2*,*">
        <SearchBar x:Name="searchBar" Grid.Row="1"
            Placeholder="Filter" />
        <CarouselView Grid.Row="3"
            BackgroundColor="Cornsilk">
            <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.EmptyView>
                <local:FilterData x:Name="filterData" />
            </CarouselView.EmptyView>
            <CarouselView.EmptyViewTemplate>
                <DataTemplate>
                    <Grid>
                        <Frame
                            WidthRequest="300"
                            HeightRequest="300"
                            CornerRadius="5"
                            BorderColor="DarkGray"
                            HasShadow="True">
                            <Label
                                LineBreakMode="WordWrap"
                                HorizontalTextAlignment="Center"
                                VerticalTextAlignment="Center"
                                FontSize="16"
                                FontAttributes="Bold"
                                Text="{Binding Filter, StringFormat='일치하는 항목이 없습니다 : {0}'}" />
                        </Frame>
                    </Grid>
                </DataTemplate>
            </CarouselView.EmptyViewTemplate>
        </CarouselView>
    </Grid>
</ContentPage>

 

 

▶ MainPage.xaml.cs

namespace TestProject;

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

    #region 생성자 - MainPage()

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

        this.searchBar.TextChanged += searchBar_TextChanged;
    }

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Methiod
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region 탐색바 텍스트 변경시 처리하기 - searchBar_TextChanged(sender, e)

    /// <summary>
    /// 탐색바 텍스트 변경시 처리하기
    /// </summary>
    /// <param name="sender">이벤트 발생자</param>
    /// <param name="e">이벤트 인자</param>
    private void searchBar_TextChanged(object sender, TextChangedEventArgs e)
    {
        this.filterData.Filter = this.searchBar.Text;

        UpdateChildrenLayout();
    }

    #endregion
}