Xamarin Forms -Implementing Gridview using custom render file.

Xamarin Forms it’s another world. It’s become simple when you already know the solution: Custom Renderer.

I’m using Xamarin Forms “portable” and XAML frontend with Android API 23.

XamGridView is a Control that displays items in a two-dimensional, scrollable grid.

NoOfColumns : Defines how many columns to show. May be an integer value, such as “2”,”5″ etc. like

<XamGridView Padding=”10″ Margin=”10″ RowSpacing=”5″ ColumnSpacing=”5″ NoOfColumns=”5″/>

I have created one control in cross-platform code.
PCL/Shared  :  XamGridview.cs

iOS Render file using collection view : XamGridViewRenderer.cs

Android Render file using GridView : XamGridViewRenderer.cs

Features :

  • NoOfColumns
  • Margin
  • Padding
  • RowSpacing
  • ItemsSource
  • ItemSelected

Screenshots:

iOS (NoOfColumns – 2 & 4)

     

 

Android (NoOfColumns – 2 & 4)

        

Download full source code here : Download&View

7 Comments

  • Andrew July 17, 2017 Reply

    Nothing happens when we put the Image Control inside the Stack Layout Also how to use the Tapped Event for listview or Itemselected event because right now in your ItemSelected there’re are two objects i.,e object sender and object e . Now what if we want to use EventArgs .
    Because if I use the SelectedEventArgs in the event then app close and blank screen comes.

    • Harshad Patel July 17, 2017 Reply

      Itemselected event :
      -> Object e itself returns selected Item. I have also update source code in repo.
      Itemselected like this.
      GrdView.ItemSelected += async (object sender, object e) =>
      {
      var currentModel = e as XamGridModel;
      await App.Current.MainPage.DisplayAlert("Clicked", "Current image position is " + currentModel.Position, "OK");
      };

      Nothing happens when we put the Image Control inside the Stack Layout
      -> Can you please share your ItemTemplate(Cell UI) code ?

  • Andrew July 17, 2017 Reply

    One thing more the Cell Position also changes upon scrolling.
    Have you tried this on your end. The scrolling cell position ?

    • Harshad Patel July 17, 2017 Reply

      Thanks Andrew. I have verified my end. this issue happing only android side. So I will fix it shortly.

  • Andrew July 19, 2017 Reply

    Any luck for the android issue ?

    • Harshad Patel July 20, 2017 Reply

      Sorry Andrew, I haven’t checked. I will try to complete in this weekend.

    • Harshad Patel July 23, 2017 Reply

      Hi Andres, Android Position issue fixed and also FFImageLoading Lib implemented. I have also updated the code in GitHub. Please check it.

Leave a Reply

Read previous post:
How to change ReturnKey on Keyboard in Xamarin Forms ?

Xamarin Forms it’s another world. It’s become simple when you already know the solution: Custom Renderer. I’m using Xamarin Forms...

Close