.NET MAUI CollectionView Kullanımı

Merhabalar,

Bugün .NET MAUI kullanarak geliştirdiğimiz uygulamalarımızda yatay bir şekilde nasıl listeleme yapabileceğimizi ve bu liste içerisindeki birkaç özelliğe değineceğim.

Öncelikle modellerimizi oluşturmakla başlayalım

    public class ItemModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Image { get; set; }
    }
    public class MainPageViewModel
    {
        private IList<ItemModel> _list;
        public IList<ItemModel> List
        {
            get
            {
                if (_list == null)
                    _list = new ObservableCollection<ItemModel>();
                return _list;
            }
            set
            {
                _list = value;
            }
        }

        void Bind()
        {
            List.Clear();
            for (int i = 1; i <= 20; i++)
            {
                List.Add(new ItemModel
                {
                    Id = i,
                    Name = Guid.NewGuid().ToString(),
                    Image = $"https://picsum.photos/id/{i}/200/300?grayscale&blur=2"
                });
            }
        }

        public ICommand OnSelectedCommand => new Command((o) =>
        {
            if (o != null && o is ItemModel item)
            {
                List.Remove(item);
            }
        });

        public MainPageViewModel()
        {
            Bind();
        }
    }

Basit bir model ve yine aynı basitli bir ViewModel geliştirmiş olduk. CollectionView içerisinde resim kullanacağım için hazır resim sitelerinden birini kullanıyorum.

Temel olarak listemin yatay ve çoklu seçilir olmasını istiyorum ve aynı zamanda listemde veri yoksa veya kalmadıysa (belirli bir işlem olabilir; Silme gibi..) EmptyView özelliğini kullanarak liste boş olsa bile bir template göstereceğim.

<StackLayout  Orientation="Vertical" VerticalOptions="CenterAndExpand" HorizontalOptions="FillAndExpand">
        <CollectionView x:Name="collectionView"
                        BackgroundColor="SlateGray"
                        SelectionMode="Multiple"
                        HorizontalScrollBarVisibility="Always"
                        ItemsUpdatingScrollMode="KeepLastItemInView"
                        ItemsLayout="HorizontalList"
                        ItemsSource="{Binding List}">
            <CollectionView.EmptyView>
                <ContentView>
                    <StackLayout HorizontalOptions="CenterAndExpand"
                                 VerticalOptions="Center">
                        <Label Text="No items to display :("
                               FontAttributes="Bold"
                               FontSize="Medium"
                               HorizontalOptions="Fill"
                               HorizontalTextAlignment="Center" />
                    </StackLayout>
                </ContentView>
            </CollectionView.EmptyView>
            <CollectionView.ItemTemplate>
				<DataTemplate>
                    <Grid RowSpacing="25" RowDefinitions="Auto" ColumnDefinitions="Auto"
                          Padding="{OnPlatform iOS='30,60,30,30', Default='30'}">
                             <Image Source="{Binding Image}" WidthRequest="120" Grid.Row="0" Grid.Column="0" />
                        <Grid.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding Source={x:Reference collectionView}, Path=BindingContext.OnSelectedCommand}"
                                                  CommandParameter="{Binding}"/>
                        </Grid.GestureRecognizers>
                    </Grid>
				</DataTemplate>
			</CollectionView.ItemTemplate>
		</CollectionView>
	</StackLayout>

MainPage.cs içerisinde ViewModel’imi bind ediyorum.

    public MainPage()
	{
		InitializeComponent();
        this.BindingContext = new MainPageViewModel();
    }
  • SelectionMode : Multiple ile çoklu seçim yapacağımı belirtiyorum
  • ItemsLayout : HorizontalList ile yatay bir listeleme yapacağımı belirtiyorum
  • EmptyView : CollectionView üzerinde direkt bir property olarak kullanım text girebilirim fakat istersem CollectionView.EmptyView tagini açarak bir template geliştirebilirim.
Yiğit

Xamarin Developer, Consultant & Architect. Community Leader and Director of Xamarin Türkiye

Post A Reply