Simple Multi Column Table Using Xamarin

Question

I am trying to create an application to store table data for an Iphone app.

My table looks like this

Header1 Header2 Header3
Row1_1  Row1_2  Row1_3
Row2_1  Row2_2  Row2_3

Which one is the easiest Controller to work with from Xamarin? I have seen http://docs.xamarin.com/guides/ios/user_interface/tables/part_1_-_table_parts_and_functionality/

But it does not support multiple columns?

I just need a simple table with no images in the cells and no interaction on it just display simple data.

Answer 1

What I ended up doing was. I Created a simple HTML with a table dynamically with my data and Used a WebView to render that from Xamarin.Forms or UIWebview from monotouch and set its HTML source

WebView view= new WebView();
string html= @"
<table style="width:300px">
<tr>
  <td>Jill</td>
  <td>Smith</td> 
  <td>50</td>
</tr>
</table>
";

view.Source = new HtmlWebViewSource { Html = html };

Answer 2

Out of the box iOS does not have any great grid controls.

You can try using a custom UITableViewCell to create a multi-column layout, or create a custom UIView to do it. There are a number of grid components (free and commercial) available from Xamarin's Component Store (search 'grid'). You may also be able to find a native iOS component or library that does what you want, and create a binding for it to allow you to use if from Xamarin.

Answer 3

There is nothing like grids in iOS, what you need to do is:

1. Subclass a UITableViewCell
2. Each UITableViewCell contacts a UIView named ContentView
3. You can then add controls to the ContentView as per your design positions.
4. Override its LayoutSubview method, and set the frames for your controls added in ContentView.
5. And yes set/increase the height of your row by overriding GetHeightForRow() method of the subclassed UITableViewDelegate.

Hope this helps.

Answer 4

You can try Shinobi Grids (http://www.shinobicontrols.com/ios/shinobigrids) or try using a UICollectionView(http://docs.xamarin.com/guides/ios/user_interface/introduction_to_collection_views/)

Answer 5

The solution put forward by TechGirl is actually pretty simple.

Here it is working with MvvmCross. For straight iOS, inherit from UITableViewCell instead of MvxTableViewCell.

You could use any controls rather than labels.

It still needs more work (Selecting a row hides the text) - But I'm posting it up before I forget.

public class ViewCell : MvxTableViewCell
{
    UILabel label1;
    UILabel label2;

    public ViewCell(IntPtr handle) : base(handle)
    {
        label1 = new UILabel(new RectangleF(10, 50, 150, 40));
        label1.Text = "Label 1";
        this.Add(label1);
        label2 = new UILabel(new RectangleF(150, 50, 440, 40));
        label2.Text = "Label 2";
        this.Add(label2);

        this.DelayBind(() =>
        {
            var set = this.CreateBindingSet<ViewCell, SomeType>();
            set.Bind(label1).To(te => SomeType.ID);
            set.Bind(label2).To(te => Sometype.Name);
            set.Apply();
        });
    }

    public override void LayoutSubviews()
    {
        base.LayoutSubviews();
    }
}