{"id":717,"date":"2023-01-18T15:40:50","date_gmt":"2023-01-18T15:40:50","guid":{"rendered":"https:\/\/learnmobiledevelopment.com\/?p=717"},"modified":"2023-01-18T15:40:51","modified_gmt":"2023-01-18T15:40:51","slug":"item-reordering-to-collectionview","status":"publish","type":"post","link":"https:\/\/learnmobiledevelopment.com\/index.php\/2023\/01\/18\/item-reordering-to-collectionview\/","title":{"rendered":"How to apply item reordering to CollectionView GridItemsLayout in MAUI"},"content":{"rendered":"\n<p>Drag and Drop gestures enable drag an element from one place and drop to another place. We can apply drag and drop gestures to any UI elements using <strong>DragGestureRecognizer<\/strong> and <strong>DropGestureRecognizer<\/strong> class. In my last post I explained how to apply drag and drop gestures to CollectionView <strong>LinearItemsLayout<\/strong> click <strong><a href=\"https:\/\/learnmobiledevelopment.com\/index.php\/2023\/01\/14\/drag-and-drop-gesture-to-collectionview\/\" target=\"_blank\" rel=\"noopener\" title=\"\">here<\/a><\/strong> to see. So In this article, I\u2019m going to show you how to apply Item reordering to CollectionView <strong>GridItemsLayout<\/strong> in MAUI.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>&nbsp;Note : <\/strong>To implement drag and drop in iOS platform minimum iOS version 11 required. <\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p style=\"font-size:25px\"><strong>Let\u2019s Start<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>1 &#8211; Setting up the UI<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size\"><strong>1.1 &#8211; Create a MainPage.xaml<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"xml\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;?xml version=\"1.0\" encoding=\"utf-8\" ?>\n&lt;ContentPage\n    x:Class=\"MAUICollectionViewItemReorderingSample.MainPage\"\n    xmlns=\"http:\/\/schemas.microsoft.com\/dotnet\/2021\/maui\"\n    xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\n    xmlns:vm=\"clr-namespace:MAUICollectionViewItemReorderingSample\"\n    x:Name=\"MainPageContainer\">\n\n    &lt;ContentPage.BindingContext>\n        &lt;vm:MainPageViewModel \/>\n    &lt;\/ContentPage.BindingContext>\n\n    &lt;ScrollView>\n        &lt;VerticalStackLayout\n            Padding=\"5,0\"\n            Spacing=\"15\"\n            VerticalOptions=\"FillAndExpand\">\n\n            &lt;CollectionView\n                Margin=\"2\"\n                CanReorderItems=\"True\"\n                ItemsSource=\"{Binding ImageList}\"\n                SelectionMode=\"None\"\n                VerticalOptions=\"FillAndExpand\">\n\n                &lt;!--  Item Layout  -->\n                &lt;CollectionView.ItemsLayout>\n                    &lt;GridItemsLayout Orientation=\"Vertical\" Span=\"2\" \/>\n                &lt;\/CollectionView.ItemsLayout>\n\n                &lt;!--  Item Template  -->\n                &lt;CollectionView.ItemTemplate>\n                    &lt;DataTemplate>\n                        &lt;StackLayout\n                            BackgroundColor=\"White\"\n                            HeightRequest=\"180\"\n                            HorizontalOptions=\"FillAndExpand\"\n                            IsClippedToBounds=\"True\"\n                            Spacing=\"8\"\n                            VerticalOptions=\"FillAndExpand\">\n\n                            &lt;Frame\n                                x:Name=\"FrameContainer\"\n                                Margin=\"8\"\n                                Padding=\"0,0,0,0\"\n                                BackgroundColor=\"White\"\n                                BorderColor=\"{StaticResource Primary}\"\n                                CornerRadius=\"0\"\n                                HasShadow=\"True\"\n                                HorizontalOptions=\"FillAndExpand\"\n                                IsClippedToBounds=\"True\"\n                                VerticalOptions=\"FillAndExpand\">\n                                &lt;StackLayout\n                                    HorizontalOptions=\"FillAndExpand\"\n                                    IsClippedToBounds=\"True\"\n                                    Orientation=\"Vertical\"\n                                    Spacing=\"0\"\n                                    VerticalOptions=\"FillAndExpand\">\n\n                                    &lt;StackLayout\n                                        Margin=\"{OnPlatform Android='3,3,5,0',\n                                                            iOS='0,0,0,0'}\"\n                                        BackgroundColor=\"{Binding HeaderColor}\"\n                                        HeightRequest=\"60\"\n                                        HorizontalOptions=\"Fill\" \/>\n\n                                    &lt;!--  Banner Image  -->\n                                    &lt;Frame\n                                        Margin=\"0,-40,0,0\"\n                                        Padding=\"0\"\n                                        BackgroundColor=\"Transparent\"\n                                        BorderColor=\"White\"\n                                        CornerRadius=\"50\"\n                                        HasShadow=\"True\"\n                                        HeightRequest=\"100\"\n                                        HorizontalOptions=\"CenterAndExpand\"\n                                        IsClippedToBounds=\"True\"\n                                        VerticalOptions=\"Start\"\n                                        WidthRequest=\"100\">\n                                        &lt;Image\n                                            x:Name=\"BannerImage\"\n                                            Aspect=\"AspectFill\"\n                                            HeightRequest=\"99\"\n                                            IsAnimationPlaying=\"True\"\n                                            Source=\"{Binding ImageUrl}\"\n                                            WidthRequest=\"99\" \/>\n                                    &lt;\/Frame>\n\n                                    &lt;StackLayout Margin=\"0,10,0,0\">\n                                        &lt;Label\n                                            FontSize=\"16\"\n                                            HorizontalTextAlignment=\"Center\"\n                                            Text=\"{Binding ImageName}\"\n                                            TextColor=\"Black\" \/>\n                                    &lt;\/StackLayout>\n                                &lt;\/StackLayout>\n                            &lt;\/Frame>\n\n                            &lt;StackLayout.GestureRecognizers>\n                                &lt;DragGestureRecognizer\n                                    CanDrag=\"True\"\n                                    DragStartingCommand=\"{Binding BindingContext.ItemDraggedCommand, Source={x:Reference MainPageContainer}}\"\n                                    DragStartingCommandParameter=\"{Binding}\" \/>\n                                &lt;DropGestureRecognizer\n                                    AllowDrop=\"True\"\n                                    DragOverCommand=\"{Binding BindingContext.ItemDraggedOverCommand, Source={x:Reference MainPageContainer}}\"\n                                    DragOverCommandParameter=\"{Binding}\" \/>\n                            &lt;\/StackLayout.GestureRecognizers>\n\n                        &lt;\/StackLayout>\n                    &lt;\/DataTemplate>\n                &lt;\/CollectionView.ItemTemplate>\n            &lt;\/CollectionView>\n        &lt;\/VerticalStackLayout>\n    &lt;\/ScrollView>\n&lt;\/ContentPage><\/pre>\n\n\n\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>As in the above\u00a0<strong>MainPage.xaml<\/strong>, I have taken\u00a0<strong>CollectionView<\/strong> <strong>GridItemsLayout<\/strong>\u00a0to show banners.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>DragStartingCommand<\/strong>\u00a0\u2013 It\u2019s a command which gets executed while dragging start.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>DragStartingCommandParameter<\/strong>\u00a0\u2013 It\u2019s an object type which passed to\u00a0<strong>DragStartingCommand<\/strong>.\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>DragOverCommand<\/strong>\u00a0\u2013 It\u2019s also a command which gets executed while an element is dragged over the control\u2019s bounds.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>DragOverCommandParameter<\/strong>\u00a0\u2013 It\u2019s an object type which passed to\u00a0<strong>DragOverCommand<\/strong>.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-medium-font-size\"><strong>2 &#8211; Setting up the ViewModel<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"csharp\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">using CommunityToolkit.Mvvm.ComponentModel;\nusing CommunityToolkit.Mvvm.Input;\nusing System.Collections.ObjectModel;\nusing System.Diagnostics;\n\nnamespace MAUICollectionViewItemReorderingSample\n{\n    public partial class MainPageViewModel : ObservableObject\n    {\n        [ObservableProperty]\n        ObservableCollection&lt;BannerImage> imageList;\n\n        private BannerImage _itemBeingDragged;\n\n        public MainPageViewModel()\n        {\n            GetImageList();\n        }\n\n        [RelayCommand]\n        public void ItemDragged(BannerImage user)\n        {\n            Debug.WriteLine($\"ItemDragged : {user?.ImageName}\");\n\n            _itemBeingDragged = user;\n        }\n\n        [RelayCommand]\n        public void ItemDraggedOver(BannerImage user)\n        {\n            Debug.WriteLine($\"ItemDraggedOver : {user?.ImageName}\");\n\n            try\n            {\n                var itemToMove = _itemBeingDragged;\n                var itemToInsertBefore = user;\n\n                if (itemToMove == null || itemToInsertBefore == null || itemToMove == itemToInsertBefore)\n                    return;\n\n                int insertAtIndex = ImageList.IndexOf(itemToInsertBefore);\n\n                if (insertAtIndex >= 0 &amp;&amp; insertAtIndex &lt; ImageList.Count)\n                {\n                    ImageList.Remove(itemToMove);\n                    ImageList.Insert(insertAtIndex, itemToMove);\n                }\n\n                Debug.WriteLine($\"ItemDropped: [{itemToMove?.ImageName}] => [{itemToInsertBefore?.ImageName}], target index = [{insertAtIndex}]\");\n            }\n            catch (Exception ex)\n            {\n                Debug.WriteLine(ex.Message);\n            }\n        }\n\n        public void GetImageList()\n        {\n            ImageList = new ObservableCollection&lt;BannerImage>();\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromArgb(\"#F7DC6F\"),\n                ImageName = \"Image img6\",\n                ImageUrl = ImageSource.FromFile(\"img6.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromArgb(\"#7DCEA0\"),\n                ImageName = \"Image img7\",\n                ImageUrl = ImageSource.FromFile(\"img7.jpg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromArgb(\"#7FB3D5\"),\n                ImageName = \"Image img8\",\n                ImageUrl = ImageSource.FromFile(\"img8.jpeg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromArgb(\"#00FF00\"),\n                ImageName = \"Pexels 257840\",\n                ImageUrl = ImageSource.FromFile(\"gif4.gif\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromArgb(\"#F0048A\"),\n                ImageName = \"Pexels 257840\",\n                ImageUrl = ImageSource.FromFile(\"gif5.gif\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromArgb(\"#D7DBDD\"),\n                ImageName = \"Image img5\",\n                ImageUrl = ImageSource.FromFile(\"img5.jpeg\")\n            });\n\n            ImageList.Add(new BannerImage()\n            {\n                HeaderColor = Color.FromArgb(\"#C39BD3\"),\n                ImageName = \"Image img9\",\n                ImageUrl = ImageSource.FromFile(\"img9.jpeg\")\n            });\n        }\n    }\n\n    public partial class BannerImage : ObservableObject\n    {\n        [ObservableProperty]\n        private ImageSource imageUrl;\n\n        [ObservableProperty]\n        private string imageName;\n\n        [ObservableProperty]\n        private string imageDesc = \"Lorem Ipsum is simply dummy text of the printing and typesetting industry.\";\n\n        [ObservableProperty]\n        private bool isSquareView;\n\n        [ObservableProperty]\n        private Color headerColor;\n    }\n}<\/pre>\n\n\n\n<div style=\"height:23px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>As you will see I have used the\u00a0<strong>ObservableObject<\/strong>\u00a0class for data binding and I already explained about this in my previous article. You can visit this\u00a0<strong><a href=\"https:\/\/learnmobiledevelopment.com\/index.php\/2023\/01\/10\/observableobject-in-maui-for-data-binding\/\" target=\"_blank\" rel=\"noreferrer noopener\">link<\/a><\/strong>\u00a0for more details.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:19px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-medium-font-size\"><strong>Result<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"2796\" style=\"aspect-ratio: 1290 \/ 2796;\" width=\"1290\" controls src=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/CollectionViewItemReordering.mp4\"><\/video><\/figure>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>That\u2019s all for now!<\/p>\n\n\n\n<p>You can check the full source code\u00a0<strong><a href=\"https:\/\/github.com\/Alam-Ashraf\/MAUICollectionViewItemReorderingSample\" target=\"_blank\" rel=\"noopener\" title=\"\">here<\/a>.<\/strong><\/p>\n\n\n\n<p>Happy Coding! <strong>\ud83d\ude00\u00a0<\/strong><\/p>\n\n\n\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-medium-font-size\"><strong>You may also like<\/strong><\/p>\n\n\n\n<div class=\"wp-block-group is-content-justification-space-between is-nowrap is-layout-flex wp-container-core-group-is-layout-0dfbf163 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-4b2eccd6 wp-block-group-is-layout-flex\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/learnmobiledevelopment.com\/index.php\/2023\/01\/14\/drag-and-drop-gesture-to-collectionview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/CollectionView-Item-Reordering-1024x723.png\" alt=\"Item Reordering in MAUI\" class=\"wp-image-708\" width=\"512\" height=\"362\" srcset=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/CollectionView-Item-Reordering-1024x723.png 1024w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/CollectionView-Item-Reordering-300x212.png 300w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/CollectionView-Item-Reordering-768x542.png 768w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/CollectionView-Item-Reordering-850x600.png 850w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/CollectionView-Item-Reordering.png 1382w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">How to use drag and drop gesture to CollectionView in MAUI<\/p>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-group is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-4b2eccd6 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-group is-vertical is-content-justification-center is-layout-flex wp-container-core-group-is-layout-4b2eccd6 wp-block-group-is-layout-flex\"><div class=\"wp-block-image is-style-default\">\n<figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/learnmobiledevelopment.com\/index.php\/2023\/01\/10\/observableobject-in-maui-for-data-binding\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/ObservableObject-in-MAUI-1024x733.png\" alt=\"ObservableObject in MAUI\" class=\"wp-image-686\" width=\"512\" height=\"367\" srcset=\"https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/ObservableObject-in-MAUI-1024x733.png 1024w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/ObservableObject-in-MAUI-300x215.png 300w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/ObservableObject-in-MAUI-768x550.png 768w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/ObservableObject-in-MAUI-850x609.png 850w, https:\/\/learnmobiledevelopment.com\/wp-content\/uploads\/2023\/01\/ObservableObject-in-MAUI.png 1486w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p class=\"has-text-align-center\">How to use ObservableObject in MAUI for Data Binding<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Drag and Drop gestures enable drag an element from one place and drop to another place. We can apply drag and drop gestures to any UI elements using DragGestureRecognizer and DropGestureRecognizer class. In my last post I explained how to apply drag and drop gestures to CollectionView LinearItemsLayout click here to see. So In this&#8230;<\/p>\n","protected":false},"author":1,"featured_media":733,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[4,53],"tags":[59,60],"class_list":["post-717","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dotnetmaui","category-mvvm","tag-drag-and-drop-gestures-in-maui","tag-item-reordering-to-collectionview"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts\/717","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/comments?post=717"}],"version-history":[{"count":14,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts\/717\/revisions"}],"predecessor-version":[{"id":732,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/posts\/717\/revisions\/732"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/media\/733"}],"wp:attachment":[{"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/media?parent=717"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/categories?post=717"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/learnmobiledevelopment.com\/index.php\/wp-json\/wp\/v2\/tags?post=717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}