What's new in ComponentOne Studio for Xamarin 2018 v3

We’re excited to announce the release of ComponentOne Studio for Xamarin 2018 v3, which includes many enhancements to the suite. FlexGrid and FlexChart are both being substantially improved, we have a major new sample, and many quality-of-life improvements will enhance your Xamarin experience.

MyBI Sample

MyBI is a dashboard application for mobile devices and Xamarin.Forms modeled after current mobile design trends. It uses Gauges, FlexChart, and FlexGrid to summarize sales data, and is built utilizing our new Material Design appearance for FlexGrid.

Get from the Windows Store | Get from the Google Store | Read the blog on the MyBI app.

Material Design theme added to Xamarin FlexGrid

The look and feel of a UI is very important on mobile, and we’re interested in supporting the newest design trends for our Xamarin controls. Google’s Material Design pattern produces a simple, beautiful mobile UI, and we’ve done a lot of work to have FlexGrid truly embrace its look and feel.

We’re adding many new properties for FlexGrid:

• Configure gridlines, icons and icon position using C1Icon
• A new Checklist selection mode and behavior, which allows you to make non-contiguous selection (much like the ListBox mode found on other platforms) while following a well-understood mobile UI pattern. The ClassicStyle is also available for those who prefer the old appearance.
• Support for multi-column sorting

C1Icon: Custom Icons for Xamarin FlexGrid

C1Icon is a new abstract class that makes it easy to customize all of the icons in FlexGrid using images, fonts, or even vector data on platforms that support it. The following icons now have templates that can be configured using C1Icon.

• SortAscendingIconTemplate
• SordingDescendingIconTemplate
• GroupExpandedIconTemplate
• GroupCollapsedIconTemplate
• EditIconTemplate
• NewRowIconTemplate
• DetailCollapsedIconTemplate
• DetailExpandedIconTemplate

You can select from built-in templates for triangles, arrows, and chevrons, and you can easily use other objects that best suit your FlexGrid. Configuring the icons is quite easy:

XAML

<c1:FlexGrid x:Name="grid" SortIconPosition="Left" Grid.Row="2"> 

    <c1:FlexGrid.SortAscendingIconTemplate> 

        <core:C1IconTemplate> 

            <DataTemplate> 

                <core:C1FontIcon Text="↑" Color="#c47a85"/> 

            </DataTemplate> 

        </core:C1IconTemplate> 

    </c1:FlexGrid.SortAscendingIconTemplate> 

</c1:FlexGrid> 

C#

grid.SortAscendingIconTemplate = C1IconTemplate.Triangle; 

grid.SortAscendingIconTemplate= new C1IconTemplate(() => { return new C1FontIcon(); });

Read more about C1Icon

Updates to Xamarin Input Controls

The appearance of FullScreenMode has been improved by making the appearance closer to that of the UISearchController on iOS. This should make the Input controls look and feel much better:

We’ve also added new properties for configuring the colors of the new appearace through CloseButtonTextColor and CloseButtonBackgroundColor (CloseButtonForeground and CloseButtonBackground on UWP).

Updates to Xamarin FlexChart

We’ve added two new chart types, including StepCharts and TreeMap.

In addition, other new features make it easier to handle overlapping data labels. These include:

• Auto arrangement
• Rhe ability to hide overlapping labels
• Rotate data labels
• Trim or wrap content inside of them

On small phone screens, these new functions can make a huge difference in readability.

C#

//Auto-position DataLabels

flexChart.DataLabel.Position = ChartLabelPosition.Auto; 

//Hide overlapping DataLabels

flexChart.DataLabel.Overlapping = ChartLabelOverlapping.Hide; 

//Rotate DataLabels

flexChart.DataLabel.Angle = 45;

//Trim DataLabels based on max width

flexChart.DataLabel.MaxWidth = 35;

flexChart.DataLabel.ContentOptions = ContentOptions.Trim; 

FlexPie also has new position options for data labels including circular and radial positioning:

Other Enhancements to Xamarin controls

• FlexGrid fixed a potential memory leak issue on iOS

• CollectionView fixed a limitation in C1GroupCollectionView where the “Clear” notification was raised after editing items

• C1Input fixed a potential memory leak issue on iOS

Learn more about FlexChart

Read the changelog for a full list of bug fixes