We’re proud to announce the following new features and improvements in Infragistics Ultimate UI for Xamarin in this 20.1 release. With enhanced grid and charting features, Infragistics Ultimate UI for Xamarin helps you build great mobile apps faster than ever. Here are the newest features and improvements you can use in your Xamarin apps today.

Data Grid

The data grid is probably the most important control an app can have. So, it's no surprise that we are continuously improving our data grid.  In this 20.1 release, the Xamarin data grid gets column pinning and column summaries.  Let's dig into the details of these two additional data grid features.

Column Pinning 

Column pinning... that basically says it all.  This simple, yet difficult to implement feature, adds the ability for a column, or multiple columns, to be pinned to the left-hand or right-hand side of the data grid.   Pinning a column is as simple as setting the Pinned property on the column.

<ig:TextColumn HeaderText="First Name" PropertyPath="FirstName" Pinned="Left"/> 

The Pinned property has three options: 

• Left - enabling Left will position pinned columns to the left-hand side of the grid 
• Right - enabling Right will position pinned columns to the right side of the grid. 
• None - enabling None will unpin a column and reposition its default placement within the grid. 

Optionally, you can programmatically pin and unpin columns using the new PinColumn method. As expected, the columns that are not pinned will still maintain horizontal scrolling.

Column Summaries 

Summaries are another one of those features that are extremely difficult to implement, yet provide the ability to aggregate your data in a very simplistic way. To use summaries in the Infragistics Xamarin Data Grid, simply add a collection of ColumnSummaryDecriptions to the grid’s SummaryDescriptions property, and be sure to set the grid’s SummaryScope property to its appropriate value.

The grid supports four summary settings that you can configure using the SummaryScope property: 

• Root – This will place the summary area at the bottom of the grid. 
• Sections – (Groups) This will place a summary area within the scope of grouped records. When using this value, the GroupSummaryDisplayMode is used to control the location of the summary area within the scope of the grouped record. 
• Both – adds a summary to both the grid, and to each grouped record. 
• None – no summary area is added 

<ig:XamDataGrid SummaryScope="Root" >             

    <ig:XamDataGrid.SummaryDescriptions> 

        <ig:ColumnSummaryDescription PropertyPath="Product" Operand="Count" /> 

    </ig:XamDataGrid.SummaryDescriptions> 

</ig:XamDataGrid> 

When using the SummaryScope.Sections scope, the GroupSummaryDisplayMode property is used to control the location of the summary area within the scope of the grouped record.  The GroupSummaryDisplayMode has five options:  

• List – summaries are listed inline of the group header 
• Cells – summaries are listed as values in the corresponding cells and aligned with their column 
• RowTop – places a summary area at the top of the group 
• RowBottom – places the summary area at the bottom of the group 
• None – no summaries shown. 

<ig:XamDataGrid SummaryScope="Sections" GroupSummaryDisplayMode="RowTop" > 

It is also possible to create custom summaries by implementing a class that derives from SummaryCalculator and providing an instance of your custom summary calculator in the ColumnSummaryDescription.ProvideCalculator event. 

Category Chart 

Besides data grids, charts are another important control in mobile applications. They help visualize your data in a way that helps your end-user best interpret their data to make business critical decisions. Here are the newest features we added to the Category Chart.

Callout Layer 

With the Callouts Annotation, you can annotate important data points in the chart or even customize values in callout boxes based on your logic.

 

Crosshairs Layer 

You can configure crosshairs to display as horizontal line, vertical line or both lines at the location of the mouse cursor. In addition, the Crosshairs Annotation can show values of data points at the location of the mouse cursor and render these values in colored boxes over the X-Axis and Y-Axis labels. 

 

Final Value Layer 

Final Values annotation show values of the last data point in your data source(s). This annotation is rendered as a colored box for each data source over the Y-Axis labels. 

 

Highlight Layer 

The Category Chart can display two new highlight layers when a user hovers over plotted data points. The Highlight Layer renders a vertical rectangle that stretches from the start to end of the category that is closest to the mouse cursor. This rectangle is filled with semi-transparent gray color by default. The Item Highlight Layer renders a vertical rectangle for each data item in a category that is closest to the mouse cursor. This rectangle is filled with semi-transparent color that matches color of the series by default. 

 

Tooltip Layer 

The Category Chart has a new ToolTipType property that adds two new types of tooltips: 

• Category Tooltip which renders the combined tooltips for all series in data category
• Item Tooltip which renders individual tooltip for each series in data category. 

 

Data Chart 

You may or may not know this, but the Category Chart is built on top of our extremely rich and power Data Chart control. This means that in order for the Category Chart to have a feature, it must be implemented in the base Data Chart control. This is why the features for the Category Chart and Data Chart are so similar. Specifically, in the 20.1 release, the Callout Layer and the Final Value Layer features are identical for both the Category Chart and the Data Chart,

Callout Layer 

Callouts Layer is a new feature of Data Chart that you can use to annotate important data points or display their values. Callouts Layer can target multiple data series or individual data series. Also, you can customize appearance of these callout layers and bind callout labels to data items or calculate changes between consecutive data points. 

 

Final Value Layer 

Final Values Layer is a new annotation layer that shows values of the last data point in your data source(s). This annotation is rendered as a colored box for each data source over the Y-Axis labels. 

Let’s Wrap this Baby Up!

As I always like to point out, if you have ideas about new features we should bring to our controls, important issues we need to fix, or even brand new controls you’d like us to introduce, please let us know by posting them on our Product Ideas website.  Follow and engage with us on Twitter via @infragistics. You can also follow and contact me directly on Twitter at @brianlagunas.  Also, make sure to connect with our various teams via our Community Forums where you can interact with Infragistics engineers and other customers. 

If you are not using our Xamarin controls yet, remember that a free evaluation download is only a click away.

Lastly, when you do build something cool with our controls, please make sure to let me know.