How to make the dynamic grid view and make it clickable?

MikeDennisMikeDennis USMember ✭✭

Is there a way to dynamically create a grid's from the List and make it clickable on the PCL project using mvvm?

Best Answers


  • MikeDennisMikeDennis USMember ✭✭

    @AdamP any idea on this?

  • MikeDennisMikeDennis USMember ✭✭
    edited March 2016

    @AdamP :

    Found the following errors with the code which you shared above
    1.The type or namespace name 'DocumentTypeTemplate' could not be found (are you missing a using directive or an assembly reference?) Online.Radio.Core C:\Users\Mike\Documents\Tutorials\grid\online-grid\UI\Online.Radio\Online.Radio.Core\Pages\Content\GridView.xaml.cs 35
    2.The name 'InitializeComponent' does not exist in the current context
    3. No Data's are displayed on the UI

    Note: All the elements of the grid = > Text, no Images or other formats

    Can you please help me to resolve this issue as soon as possible, its blocking the release

  • AdamPAdamP AUUniversity ✭✭✭✭✭

    @MikeDennis - the TypeTemplate is just a template, can be called anything. Its a new xaml page and replace with

    <Grid xmlns=""
        <Label Text="{Binding Name}" />

    You can format that however you want. Code behind of

     public partial class TypeTemplate : Grid
            public TypeTemplate()
            public TypeTemplate(object item)
                BindingContext = item;
  • MikeDennisMikeDennis USMember ✭✭
    edited March 2016


    How this works? I am little confused here. Can you please correct me if i am wrong?

    GridviewType - this page will have data which needs to be displayed for single grid

    then how do i do a recursive for all the elements on the list, I mean a main grid with multiple cells in it

  • MikeDennisMikeDennis USMember ✭✭

    @AdamP - for the clarification:::

    1. Master Grid Page which needs to display the data in the grid(multiple labels tiedup) format dynamically, this page is dynamically tied up with the ViewModel(masterViewModel) which has the IEnumerableList - with Type,name,id,frequency
    2. Created a Grid view and added the code like you defined.

    Now what typeTemplate should I create and where should I place the command event and how to define which items on the list to be displayed?

  • AdamPAdamP AUUniversity ✭✭✭✭✭

    @MikeDennis - the click is defined on the gridview not on the template. That is what the ClickCommand is.

    The Template is just what you want displayed in each tile. You can put anything you want in that Grid. This is the template that gets applied to each element of the list. So Binding to Name, Id, Frequency will get you those values.

  • MikeDennisMikeDennis USMember ✭✭
    edited March 2016

    @AdamP @AdamP i tried with what you said as a result it shows an empty page with no data:
    created a xaml page with name TypeTemplate and added that in gridview.xaml.cs "public Type ItemTemplate { get; set; } = typeof (TypeTemplate);"

    But TypeTemplate page is never getting initialized, is there any sample which you can share with me.

    Note this is the UWP app one change which I made is Removed
    <content:GridView.TileHeight> <OnPlatform x:TypeArguments="x:Single" iOS="60" Android="60" WinPhone="90"/> </content:GridView.TileHeight> from master page and updated the
    ` RowDefinitions?.Add(new RowDefinition {Height = new GridLength(1,GridUnitType.Star)}.

  • AdamPAdamP AUUniversity ✭✭✭✭✭

    @MikeDennis - BuildTiles is what should be called when you assign your list to it, then within here is where it calls BuildTile, at that point you can see it create a new ItemTemplate, this is where the constructor will be called.

    If the constructor isn't been called, then BuildTiles isn't calling it. Breakpoint your code and step through and see why is doesn't get there.

  • MikeDennisMikeDennis USMember ✭✭

    @AdamP do you have any samples? can you please share me the sample which I can test it out and integrate it?

  • AdamPAdamP AUUniversity ✭✭✭✭✭
    edited March 2016

    @MikeDennis - what I shared with you was a sample. What did debugging your app find out? Is the BuildTiles function being called?

  • MikeDennisMikeDennis USMember ✭✭
    edited March 2016

    @AdamP finally figured out the issue. its expecting IEnumerable and my code passes IEnumerable, and also BuildTiles are called only when i call it from OnAppearing() ... Is there a way to fix both the above issue?

  • MikeDennisMikeDennis USMember ✭✭
    edited March 2016

    @AdamP Solved all the above issue.

    New Problem:
    Grid doesn't get's updated if the data is updated on the binding element, also its not displaying the other elements in the stacklayout

    <StackLayout Padding="10,10,10,10"> <Label Text="Created" Style="{DynamicResource OrangeLargeAndBoldLabelStyle}"/> <content:GridView x:Name="GrdView" HorizontalOptions="StartAndExpand" Grid.Row="1" VerticalOptions="StartAndExpand" RowSpacing="20" ColumnSpacing="20" MaxColumns="3" ItemsSource="{Binding RawList}" CommandParameter="{Binding}" Command="{Binding ClickCommand}" IsClippedToBounds="False"> <content:GridView.TileHeight> <OnPlatform x:TypeArguments="x:Single" iOS="60" Android="60" WinPhone="90" /> </content:GridView.TileHeight> </content:GridView> </StackLayout>

  • MikeDennisMikeDennis USMember ✭✭

    @AdamP : Solved all the above problem except the dataBinding update for the second time. is there any change I should do?

  • MikeDennisMikeDennis USMember ✭✭
    edited March 2016

    @AdamP : Thanks for your above suggestions, helped a lot in sketching the bindable grid view.

    is there a way I can use the above implementation without xaml in the master detail page? so I can pass values to the GridView Constructor

  • AdamPAdamP AUUniversity ✭✭✭✭✭

    @MikeDennis - if you want to use it programmatically you can just go

       MyStackLayout.Children.Add(new GridView());

    You just need to add to a control that already exists on the page. If nothing exists you can just do

      ContentPage.Content = new GridView(); 

    or put a StackLayout or Grid in first etc.

  • MikeDennisMikeDennis USMember ✭✭

    How to bind the element to the Itemsource? there is an IEnumerableList on my Vm, which I will bind it through Xaml. how to do it on the .cs?

  • MikeDennisMikeDennis USMember ✭✭
    edited March 2016

    @AdamP i tried with the following code:
    Inside OnlineRadioListVm I have a static list which keeps updating on the specific action:
    public static List<TripDto> RadioList{ get; set; }

    and in master grid View.cs:
    GridView GrdView=new GridView(); GrdView.ItemsSource = SetBinding(GridView.ItemsSourceProperty,OnlineRadioListVm.RadioList); this.Content=GrdView

    and this is my ItemSourceProperty in GridView

    public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create<GridView, IEnumerable<RadioListDataModel>>(p => p.ItemsSource, null, BindingMode.OneWay, null, (bindable, oldValue, newValue) => { ((GridView)bindable).BuildTiles(newValue); });
    it throws
    Error CS1503 Argument 2: cannot convert from 'System.Collections.Generic.List' to 'Xamarin.Forms.BindingBase'

  • AdamPAdamP AUUniversity ✭✭✭✭✭

    @MikeDennis - you need to do this


    No need to assign this to anything.

  • MikeDennisMikeDennis USMember ✭✭

    @AdamP : i added which you said, and i get the same error:
    Argument 2: cannot convert from 'System.Collections.Generic.List' to 'Xamarin.Forms.BindingBase'

  • AdamPAdamP AUUniversity ✭✭✭✭✭

    @MikeDennis - are you still assigning to ItemsSource? This line:

    GrdView.ItemsSource = SetBinding(GridView.ItemsSourceProperty,OnlineRadioListVm.RadioList);

    Should get replaced with


  • MikeDennisMikeDennis USMember ✭✭

    @AdamP : no I am not assigning, I am using

  • MikeDennisMikeDennis USMember ✭✭

    @AdamP is there a way i can add multiple selection to the grid view and return a list ?

  • nadjibnadjib DZMember ✭✭✭✭

    @AdamP you should win the Oscar of patience, instead of Leo :smile:

  • AdamPAdamP AUUniversity ✭✭✭✭✭

    @MikeDennis - Yes you can make it multiple selection. The easiest way I can think of is, adding a new property to the Items that you are binding, something like

    public bool IsSelected { get; set; }

    Then on the ClickCommand, set the IsSelected to on or off (basically the opposite of what it is).

    Then at the end, just get the ItemsSource and get all Items with IsSelected == true and there you have multiple select.

    You can then also show that it is selected by doing some kind of visual based off the IsSelected. (make sure you implement INPC for the property or item through when the IsSelected property is changed).

  • DinoNovak.3412DinoNovak.3412 USMember ✭✭

    Hi all,

    I reconstructed from the previous discussion what needs to be done.
    here is the sample

    I am unable to resolve issue how to bind gridview items to list, can someone please help. All is initialized on the /TEST_Springboard/SpringboardMain.cs page

    Thanx for the hints,

  • Thanks for this example, but I had to upgrade the framework from xamarin forms 1.x to 2.x and the Create method for the bindings does not work anymore.
    I have changed to this, but the Tap command is only working for IOS:

    public static readonly BindableProperty CommandParameterProperty = BindableProperty.Create(nameof(CommandParameter), typeof(object), typeof(GridView), null);
    public static readonly BindableProperty CommandProperty = BindableProperty.Create(nameof(Command), typeof(ICommand), typeof(GridView), null);
    public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create(nameof(ItemsSource), typeof(IEnumerable), typeof(GridView)
                , null, BindingMode.OneWay, null, (bindable, oldValue, newValue) => { ((GridView)bindable).BuildTiles(newValue as IEnumerable<object>); });
  • kirubhakarankirubhakaran USMember

    Hi Adam Pedley,
    I have implemented above mentioned Gridview control . And also some list of items binded with itemsource. But
    when i executing the source i was getting " System.NullReferenceException: Object reference not set to an instance of an object." in below mentioned line:

    public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create<GridView, IEnumerable>(p => p.ItemsSource, null, BindingMode.OneWay, null, (bindable, oldValue, newValue) => { ((GridView)bindable).BuildTiles(newValue); });



  • pratiuskumardubeypratiuskumardubey USMember ✭✭

    @AdamP I used your given example it's working good with IOS but in Android scrollview is giving issues it's overlapping the other control on gridview item scroll .

    Below is running example

  • SabirAhmedSabirAhmed INMember

    @MikeDennis said:
    @AdamP : Solved all the above problem except the dataBinding update for the second time. is there any change I should do?

    How did you happen to solve this as if i set the itemsourceproperty again and debug the buildtiles method gets null for IEnumerable.

  • GaneshParikhGaneshParikh USMember ✭✭

    @MikeDennis - How can we create a bindable property for ItemTemplate in above example ?

  • NithyaNithya USUniversity ✭✭

    @AdamP Command binding is not hitting the viewmodel on click of the tile kindly help with that

  • NithyaNithya USUniversity ✭✭

    @pratiuskumardubey How did you performed command binding for me it not hitting on the tap of the tile

  • pratiuskumardubeypratiuskumardubey USMember ✭✭

    @Nithya Check the below xaml, How to use the command binding




  • pratiuskumardubeypratiuskumardubey USMember ✭✭

    <ScrollView IsVisible="{Binding IsGridviewVisible,Mode=TwoWay}" Grid.Column="1" Grid.Row="1"> <controls:GridView ColumnSpacing="10" ItemTappedCommand="{Binding ItemTapCommand}" ItemsSource="{Binding GridViewCategories}" MaxColumns="1" Padding="5" RowSpacing="10" TileHeight="200" > <controls:GridView.ItemTemplate> <DataTemplate> <Grid> <Grid.RowDefinitions> <RowDefinition Height=".5*" /> <RowDefinition Height=".1*" /> </Grid.RowDefinitions> <Image Aspect="AspectFill" Source="{Binding ImageURL}" /> <StackLayout Orientation="Vertical" HorizontalOptions="StartAndExpand" VerticalOptions="EndAndExpand"> <Label Text="{Binding CategoryName}" TextColor="White" FontSize="15" FontAttributes="Bold" LineBreakMode="WordWrap" /> <Label Text="{Binding OperningHours}" TextColor="White" FontSize="15" LineBreakMode="WordWrap" /> </StackLayout> <Image Source="GetButton" Grid.Row="1" HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand"/> </Grid> </DataTemplate> </controls:GridView.ItemTemplate> </controls:GridView> </ScrollView>

  • NithyaNithya USUniversity ✭✭
    edited October 9
    @AdamP @pratiuskumardubey ClickCommand we are doing in GridView is not hitting the command in viewmodel....but at time of creation command is added to the tap gesture in build tile method...
Sign In or Register to comment.