Skip to main content Skip to footer

Using the new C1CollectionView in ComponentOne Studio for Xamarin

The CollectionView is a powerful tool for organizing data, and the new ComponentOne Studio for Xamarin ships with a brand new version of the popular control. The C1CollectionView provides a method for grouping, sorting, and filtering data, and the newest release brings this powerful ability to many new platforms. Both Xamarin.iOS and Xamarin.Android have their own unique controls for interacting with a list of data (the UITableView and RecyclerView respectively), and we've added new CollectionView libraries that make it much easier to connect these controls directly to your data.

Why would I want to use a CollectionView?

A .NET style CollectionView let's you greatly simplify some interactions with your data like filtering, sorting, and grouping. These functions aren't commonly supported by data collections, and a CollectionView wraps around your data to provide this functionality. Also (for iOS users) we are talking about a different type of control than what you might think of if you consider a UICollectionView (which is a very different UI component for presenting data). Rather the CollectionView we're describing has more in common with Microsoft's control.aspx) that was originally a part of WPF. Our C1CollectionView is a non-UI component that provides support for the functions we've described above, as well as additional support for cursor collections that allow you to incrementally load data. The newest release makes it easy to connect your data to the native list types of UITableViews and RecyclerViews. CVS

Getting Started

Regardless of whether you're going to be working in Xamarin.iOS or Xamarin.Android, the first step will be to add the right NuGet packages to your project. C1.CollectionView is a cross platform library that be used in Xamarin.iOS, Xamarin.Android, Xamarin.Forms, and even other .NET projects potentially. It performs all of the work you'd associate with a .NET style CollectionView. After this you'll add another library that acts as the connective tissue between the native lists types: either C1.iOS.CollectionView or C1.Android.CollectionView depending on platform. CollectionViewStructure

Using the iOS C1CollectionView with a UITableView

Once you have C1.iOS.CollectionView as part of your project, you'll notice that this package contains a single (though important) class: C1TableViewSource. This class acts as the bridge from the C1CollectionView to the UITableView, and simply by creating you own class that inherits from it you can override methods like GetItemCell to customize your UITableView. For example:


 public class MyCollectionViewSource : C1TableViewSource  
    {  
        private string CellIdentifier = "Default";  

        public MyCollectionViewSource(UITableView tableView, ICollectionView collectionView, UIRefreshControl refreshControl = null)  
            : base(tableView, collectionView, refreshControl)  
        {  
        }  

        public override UITableViewCell GetItemCell(UITableView tableView, MyDataItem item)  
        {  
            UITableViewCell cell = tableView.DequeueReusableCell(CellIdentifier);  
            if (cell == null)  
                cell = new UITableViewCell(UITableViewCellStyle.Subtitle, CellIdentifier);  

            cell.TextLabel.Text = item.ItemName;  
            cell.DetailTextLabel.Text = item.ItemDateTime.ToLongTimeString();  

            return cell;  
        }  
    }  

    public class MyDataItem  
    {  
        public MyDataItem(int index)  
        {  
            this.ItemName = "My Data Item #" + index.ToString();  
            this.ItemDateTime = DateTime.Now;  
        }  
        public string ItemName { get; set; }  
        public DateTime ItemDateTime { get; set; }  

    }  


There are more samples available on GitHub that further illustrate further uses including using the sorting, grouping, filtering, and on-demand loading to great effect with live data from YouTube.

Using the Android C1CollectionView with a RecyclerView

Using the C1CollectionView on Android is similar in concept. Once you've added the C1.Android.CollectionView package you'll gain access to single class: C1RecyclerViewAdapter. This class bridges the C1CollectionView to the RecyclerView that's a part of Android.Support.V7.Widge.RecyclerView. Once again you can inherit from this class to connect to the native control, and create your own ViewHolder to customize the appearance of the individual cells. For example:


    internal class MyAdapter : C1RecyclerViewAdapter  
    {  

        public MyAdapter(ICollectionView collectionView)  
            : base(collectionView)  
        {  
        }  

        protected override RecyclerView.ViewHolder OnCreateItemViewHolder(ViewGroup parent)  
        {  
            var view = LayoutInflater.From(parent.Context)  
                               .Inflate(Resource.Layout.ListItem, null, false);  
            return new MyViewHolder(view);  
        }  

        protected override void OnBindItemViewHolder(RecyclerView.ViewHolder holder, int position)  
        {  
            var h = holder as MyViewHolder;  
            var item = CollectionView[position];  
            h.SetTitle(item.ItemName);  
            h.SetSubtitle(item.ItemDateTime.ToLongTimeString());  
        }  
    }  
 internal class MyViewHolder : RecyclerView.ViewHolder  
    {  
        private TextView _title;  
        private TextView _subTitle;  

        public MyViewHolder(View itemView)  
            : base(itemView)  
        {  
            _title = itemView.FindViewById(Resource.Id.Title);  
            _subTitle = itemView.FindViewById(Resource.Id.Subtitle);  
            var icon = itemView.FindViewById(Resource.Id.Icon);  
            icon.Visibility = ViewStates.Gone;  
        }  

        internal void SetTitle(string title)  
        {  
            _title.Text = title;  
        }  

        internal void SetSubtitle(string subTitle)  
        {  
            _subTitle.Text = subTitle;  
        }  
    }  
    public class MyDataItem  
    {  
        public MyDataItem(int index)  
        {  
            this.ItemName = "My Data Item #" + index.ToString();  
            this.ItemDateTime = DateTime.Now;  
        }  
        public string ItemName { get; set; }  
        public DateTime ItemDateTime { get; set; }  

    }  

There are also more samples available on GitHub that demonstrate deeper functionality on Android including using the sorting, grouping, filtering, and on-demand loading with live data from YouTube.

Now with .NET Standard support

We're also excited to our new CollectionView has .NET Standard 1.1 with this release so it's even more portable than it's been in the past. As we position our Xamarin controls towards more and more platforms, we're happy to embrace similar expansion for our non user interface controls using .NET Standard as a platform.

MESCIUS inc.

comments powered by Disqus