Creating a grid layout using Tizen.Xamarin.Forms.Extension.GridView

You can display content, such as images and views, on a grid layout using the grid view component. The component is implemented as an instance of the Tizen.Xamarin.Forms.Extension.GridView class.

Basic Usage

To use a grid view component in your application:

  1. Define an item list.

    The grid view content is displayed using the Tizen.Xamarin.Forms.Extension.GridView.ItemsSource property. This property can accept any IEnumerable type collection as an item list.

    using Tizen.Xamarin.Forms.Extension;
    
    public class GridViewItem
    {
        public string Text {get; set;}
        public string ImagePath {get; set;}
        public bool IsBadgeVisible {get; set;}
        public int Count {get; set;}
    }
    
    public class GridViewPage : ContentPage
    {
        List<GridViewItem> _itemList = new List<GridViewItem>();
        public GridViewPage()
        {
            for (int i = 0; i < 50; i++)
            {
                _itemList.Add(new GridViewItem
                {
                    Text = String.Format("item [{0}]", i),
                    ImagePath = "1_raw.png",
                    IsBadgeVisible = false,
                    Count = 0
                });
            }
        }
    }
    
  2. Create a grid view component using the item list.

    Once the item list is set to the Tizen.Xamarin.Forms.Extension.GridView.ItemsSource property, the grid view does not update itself automatically, even if the item list changes. If the grid view must automatically update itself as items are added, removed, or changed in the item list, use an ObservableCollection type collection as the item list.

    GridView view = new GridView
    {
        ItemWidth = 150,
        ItemHeight = 150,
        SelectionMode = GridViewSelectionMode.Default,
        CanSelectionMultiple = false,
        IsHighlightEffectEnabled = true,
        ItemsSource = _itemList
    };
    
  3. Bind the list items to the grid view cells.

    The grid view cells must implemented as instances of the Tizen.Xamarin.Forms.Extension.IGridViewCell class, or its child classes. The cells can be bound to the properties of the Tizen.Xamarin.Forms.Extension.GridView.ItemsSource members.

    By default, the grid view shows the result of calling the ToString() method on each member of the ItemsSource property in a Tizen.Xamarin.Forms.Extension.Type1GridViewCell instance.

    The following example binds the properties of the Tizen.Xamarin.Forms.Extension.Type1GridViewCell instance to the properties of the Tizen.Xamarin.Forms.Extension.GridView.ItemSource members:

    view.ItemTemplate = new DataTemplate() =>
    {
        Type1GridViewCell typeCell = new Type1GridViewCell();
        typeCell.SetBinding(Type1GridViewCell.TextProperty, new Binding("Text"));
        typeCell.SetBinding(Type1GridViewCell.ContentProperty, new Binding("ImagePath"));
        typeCell.SetBinding(Type1GridViewCell.IsBadgeVisibleProperty, new Binding("IsBadgeVisible"));
        typeCell.SetBinding(Type1GridViewCell.BadgeCountProperty, new Binding("Count"));
        return typeCell;
    });
    
  4. Add event handlers.

    The following example shows how to define and register an event handler for the ItemSelected event:

    public class GridViewPage : ContentPage
    {
        public GridViewPage()
        {
            view.ItemSelected += ItemSelected;
        }
    
        void ItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            ((GridView)sender).ScrollTo(e.SelectedItem, ScrollToPosition.Start, false);
        }
    }
    

Grid View Cells

The Tizen.Xamarin.Forms.Extension.GridView class supports cell types defined in the Tizen.Xamarin.Forms.Extension namespace only. Therefore, it is not compatible with the Xamarin.Forms.Cell class.

The following cell types are supported:

  • Type 1 cell

    The Tizen.Xamarin.Forms.Extension.Type1GridViewCell class creates a cell for displaying text, an image, and a badge, with the text displayed over the image.

    The class has the following properties:

    • Text

      The text shown on the image.

    • Content

      The path for the image to display in the item.

    • IsBadgeVisible

      A value for whether the badge is shown.

    • BadgeCount

      The number shown on the badge.

    • FillItem

      A value for whether the image must fill the item and ignore its own aspect ratio.

    Figure: Grid view with type 1 cells

     

  • Type 2 cell

    The Tizen.Xamarin.Forms.Extension.Type2GridViewCell class creates a cell for displaying text, an image, and a badge, with the text displayed underneath the image.

    The class has the following properties:

    • Text

      The text shown under the image.

    • Content

      The path for the image to display in the item.

    • IsBadgeVisible

      A value for whether the badge is shown.

    • BadgeCount

      The number shown on the badge.

    • FillItem

      A value for whether the image must fill the item and ignore its own aspect ratio.

    Figure: Grid view with type 2 cells

     

  • View cell

    The Tizen.Xamarin.Forms.Extension.GridViewCell class creates a cell for displaying a view.

    The class has the following property:

    • View

      The view shown in the item.

    Figure: Grid view with view cells

     

Events

You can add event handlers to the following events of the Tizen.Xamarin.Forms.Extension.GridView class:

  • ItemAppearing

    This event occurs when an item appears on the screen.

  • ItemsDisappearing

    This event occurs when an item disappears from the screen.

  • ItemSelected

    This event occurs when an item is selected. Depending on the value of the SelectionMode property of the Tizen.Xamarin.Forms.Extension.GridView instance, an item can be tapped without invoking this event.

  • ItemTapped

    This event occurs when an item is touched.