Skip to main content Skip to footer

How to use FlexGrid for Xamarin.Android

Xamarin.Android exists in a mingled area between .NET and the Android platform. While all of your development is done in C#, Xamarin.Android requires more knowledge of the native APIs (just as Xamarin.iOS does with native iOS). In this article we'll take a look at using Xuni in Xamarin.Android, specifically by way of the FlexGrid control.

Xuni and Xamarin.Android

Xamarin.Android projects keep a similar stucture to native Android projects. There are Activities and XML layouts for each screen in your app. The Android and Java APIs are available, and, though you're writing C# code, you need some knowledge of how the native APIs work. The Xuni controls in Xamarin.Android act the same way. Though you're writing C# code to interact with the controls, the controls are closer to their native counterparts. There's generally less abstraction here between the native control and your C# code compared to Xamarin.Forms. The important detail to take away from this is that the controls tend to behave closer to their native counterparts compared to the Xamarin.Forms versions.

Getting Started

Adding Xuni to a Xamarin.Android project is similar to Xamarin.Forms. All that you need to do is add the appropriate NuGet packages to your project. Just be sure that you add the controls that follow the naming convention Xuni.Android.(control name). XANuget

Licensing

The licensing is similar to the other Xuni platforms where you simply need to generate a key for your app on our website, place the key into your app, and assign your generated key to the XuniLicenseManager at run time. You can add the key to your activity similar to native Android:



Com.GrapeCity.Xuni.Core.LicenseManager.Key = License.Key;    


Using the Control

Using FlexGrid in Xamarin.Android is very similar to native Android, though you trade Java for C#. The layout xml portion of your code is effectively the same as what you would see on Android:


<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:orientation="vertical"  
    android:layout\_width="fill\_parent"  
    android:layout\_height="fill\_parent">  
    <com.grapecity.xuni.flexgrid.FlexGrid  
        android:id="@+id/flexgrid"  
        android:layout\_width="fill\_parent"  
        android:layout\_height="fill\_parent" />  
</LinearLayout>    

The C# code for your MainActivity is also similar to what you would see natively. Much of the control customization is done in the OnCreate method after finding the control by its ID:


    public class MainActivity : Activity  
    {  
        FlexGrid _flexGrid;  
        protected override void OnCreate(Bundle bundle)  
        {  
            base.OnCreate(bundle);  

            // license  
            Com.GrapeCity.Xuni.Core.LicenseManager.Key = License.Key;  

            // Set our view from the "main" layout resource  
            SetContentView(Resource.Layout.Main);  

            this._flexGrid = FindViewById<FlexGrid>(Resource.Id.flexgrid);    
     ...  

Setting properties also has some similarities to the native controls. Notice that setting a color requires uses an integer value which we can obtain from an Android.Graphics.Color object.


this._flexGrid.ItemsSource = Customer.GetCustomerList(50);  
this._flexGrid.AlternatingRowBackgroundColor = (Java.Lang.Integer)(Android.Graphics.Color.DarkSlateGray.ToArgb());  
this._flexGrid.Columns.GetColumn("Money").Format = "c";  
this._flexGrid.Columns.GetColumn("Hired").Format = "MM/dd/yyyy";  

If we wanted to do something more advanced (like put an image into custom cells) we'll see a combination of the native and .NET approaches. First you'll need to create the cell factory and declare an ImageView:



    public class CustomCellFactory : GridCellFactory  
    {  
        private ImageView image;   


Now we'll need to implement CreateCellContent to load the appropriate image resource based on a cell value in the Country Column. We'll also need to size and position the ImageView in this method:



public override void CreateCellContent(GridPanel gridPanel, FlexGridCanvasRenderEngine renderEngine, GridCellRange cellRange, Rect bounds)  
        {  
            if (gridPanel.CellType == GridCellType.Cell)  
            {  
                GridColumn column = gridPanel.Columns.Get(cellRange.Col).JavaCast<GridColumn>();  
                GridRow row = (GridRow)gridPanel.Rows.Get (cellRange.Row).JavaCast<GridRow> ();  

                Customer _customer = (Customer)row.DataItem;  
                if (column.Name == "Country") {  
                    if (bounds.Width () != mCellWidth && bounds.Height () != mCellHeight) {  
                        this.mCellWidth = bounds.Width ();  
                        this.mCellHeight = bounds.Height ();  
                        image.LayoutParameters.Height = mCellHeight - (mPaddingTop * 2);  
                        image.LayoutParameters.Width = mCellWidth - (mPaddingLeft * 2);  
                    }  
                    if (_customer.Country == "US") {  
                        image.SetImageResource (Resource.Drawable.US);  
                    }else if (_customer.Country == "UK") {  
                        image.SetImageResource (Resource.Drawable.UK);  
                    }else if (_customer.Country == "Japan") {  
                        image.SetImageResource (Resource.Drawable.Japan);  
                    }else if (_customer.Country == "Italy") {  
                        image.SetImageResource (Resource.Drawable.Italy);  
                    }else if (_customer.Country == "Greece") {  
                        image.SetImageResource (Resource.Drawable.Greece);  
                    }else if (_customer.Country == "Germany") {  
                        image.SetImageResource (Resource.Drawable.Germany);  
                    }  

                    renderEngine.Canvas.Save ();  
                    renderEngine.Canvas.Translate (bounds.Left + renderEngine.PanX + mPaddingLeft, bounds.Top + renderEngine.PanY + mPaddingTop);  
                    image.Draw (renderEngine.Canvas);  
                    renderEngine.Canvas.Restore ();  

                }  
                else {  
                    base.CreateCellContent(gridPanel, renderEngine, cellRange, bounds);  
                }  
            }  
            else {  
                base.CreateCellContent(gridPanel, renderEngine, cellRange, bounds);  

            }  
        }   

Once the CellFactory is finished, we'll be able to use it from our activity:



this.\_flexGrid.CellFactory = new CustomCellFactory(this.\_flexGrid, this.BaseContext);    


Those additions will allow you to display custom images in your FlexGrid: XaFG1

Wrap Up

Using Xuni in Xamarin.Android gives you the same basic capabilities that you have natively, but allows you to keep all of your code in C#. While using Xamarin.Android does require some knowledge of the Android and Java APIs, it provides you much more control than is otherwise available in Xamarin.Forms.

Download the Sample >>

MESCIUS inc.

comments powered by Disqus