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

TestProject.zip
0.15MB

▶ 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>
        <local:ImageSourceConverter x:Key="ImageSourceConverterKey" />
    </ContentPage.Resources>
    <CollectionView x:Name="collectionView"
        SelectionMode="Multiple"
        SelectedItems="{Binding SelectedMonkeyCollection}"
        ItemsSource="{Binding MonkeyCollection}">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid
                    Padding="10"
                    RowDefinitions="Auto"
                    ColumnDefinitions="Auto,10,*">
                    <Image Grid.Column="0"
                        WidthRequest="60"
                        HeightRequest="60"
                        Aspect="AspectFill"
                        Source="{Binding ImageURL, Converter={StaticResource ImageSourceConverterKey}}" />
                    <StackLayout Grid.Column="2">
                        <Label
                            FontAttributes="Bold"
                            FontSize="16"
                            Text="{Binding Name}" />
                        <Label
                            VerticalOptions="End"
                            FontAttributes="Italic"
                            Text="{Binding Location}" />
                    </StackLayout>
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

 

728x90

 

▶ MainPage.xaml.cs

using System.Collections.ObjectModel;
using System.ComponentModel;

namespace TestProject;

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

    #region 속성 변경시 - PropertyChanged

    /// <summary>
    /// 속성 변경시
    /// </summary>
    public new event PropertyChangedEventHandler PropertyChanged;

    #endregion

    //////////////////////////////////////////////////////////////////////////////////////////////////// Field
    ////////////////////////////////////////////////////////////////////////////////////////// Private

    #region Field

    /// <summary>
    /// 원숭이 컬렉션
    /// </summary>
    private ObservableCollection<Monkey> monkeyCollection;

    /// <summary>
    /// 선택 원숭이 컬렉션
    /// </summary>
    private ObservableCollection<object> selectedMonkeyCollection;

    #endregion

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

    #region 원숭이 컬렉션 - MonkeyCollection

    /// <summary>
    /// 원숭이 컬렉션
    /// </summary>
    public ObservableCollection<Monkey> MonkeyCollection
    {
        get
        {
            return this.monkeyCollection;
        }
        set
        {
            if(this.monkeyCollection != value)
            {
                this.monkeyCollection = value;

                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("MonkeyCollection"));
            }
        }
    }

    #endregion
    #region 선택 원숭이 컬렉션 - SelectedMonkeyCollection

    /// <summary>
    /// 선택 원숭이 컬렉션
    /// </summary>
    public ObservableCollection<object> SelectedMonkeyCollection
    {
        get
        {
            return this.selectedMonkeyCollection;
        }
        set
        {
            if(this.selectedMonkeyCollection != value)
            {
                this.selectedMonkeyCollection = value;

                this.collectionView.UpdateSelectedItems(value);

                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("SelectedMonkeyCollection"));
            }
        }
    }

    #endregion

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

    #region 생성자 - MainPage()

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

        ObservableCollection<Monkey> monkeyCollection = new ObservableCollection<Monkey>();

        for(int i = 0; i < 10; i++)
        {
            monkeyCollection.Add
            (
                new Monkey
                {
                    Name     = "Baboon",
                    Location = "Africa and Asia",
                    ImageURL = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Papio_anubis_%28Serengeti%2C_2009%29.jpg/200px-Papio_anubis_%28Serengeti%2C_2009%29.jpg"
                }
            );

            monkeyCollection.Add
            (
                new Monkey
                {
                    Name     = "Capuchin Monkey",
                    Location = "Central and South America",
                    ImageURL = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Capuchin_Costa_Rica.jpg/200px-Capuchin_Costa_Rica.jpg"
                }
            );

            monkeyCollection.Add
            (
                new Monkey
                {
                    Name     = "Blue Monkey",
                    Location = "Central and East Africa",
                    ImageURL = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/BlueMonkey.jpg/220px-BlueMonkey.jpg"
                }
            );
        }

        MonkeyCollection = monkeyCollection;

        SelectedMonkeyCollection = new ObservableCollection<object> { monkeyCollection[2], monkeyCollection[3], monkeyCollection[5] };

        BindingContext = this;
    }

    #endregion
}

※ CollectionView.SelectedItems 속성은 OneWay 바인딩 모드로 설정되어 있다는 점에 주의한다.

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

댓글을 달아 주세요