Today we’re pleased to announce that the Visual Studio Dev Essentials program benefits now include free access to over 80 components and frameworks from Syncfusion’s component suite for building Xamarin and UWP applications.
The Xamarin and UWP component suites from Syncfusion include all the common user interface controls needed for building line-of-business applications such as grids, charts, gauges, maps, calendars, treemaps, schedulers, and editors. The suites also include full-fledged libraries for reading and writing Microsoft Excel, Microsoft Word, Adobe PDF, and Microsoft PowerPoint files. The Xamarin suite provides components for all flavors of Xamarin, including Xamarin.iOS, Xamarin.Android, and Xamarin.Forms platforms. The Xamarin and UWP suite of components can be used together to build powerful line-of-business applications that target all the major platforms, including Windows 10, iOS, and Android.
All the available components are feature-rich and easy to use. There is also extensive documentation available to help integrate the components into your application within a few minutes. To demonstrate this, let us walk through the process of including charts and Excel reporting in an existing Xamarin application.
Adding charting capabilities
Step 1 : Install the required Chart NuGet packages as demonstrated here .
Step 2: Define a data model that represents a data point in SfChart.
public class Model { public string Name { get; set; } public double Height { get; set; } }
Step 3: Populate the view model with data using the previous model as shown next.
public class ViewModel { public List<Model> Data { get; set; } public ViewModel() { Data = new List<Model>() { new Model { Name = "David", Height = 180 }, new Model { Name = "Michael", Height = 170 }, new Model { Name = "Steve", Height = 160 }, new Model { Name = "Joel", Height = 182 } }; } }
Step 4: Now add the namespace of SfChart and ViewModel to your XAML page, and then set the BindingContext with the instance of ViewModel.
<?xml version="1.0" encoding="utf-8" ?> <ContentPage >="http://xamarin.com/schemas/2014/forms" >="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ChartDemo.MainPage" >="clr-namespace:Syncfusion.SfChart.XForms;assembly=Syncfusion.SfChart.XForms" >="clr-namespace: ChartDemo"> <ContentPage.BindingContext> <local:ViewModel></local:ViewModel> </ContentPage.BindingContext> </ContentPage>
Step 5: Initialize the SfChart and then add ColumnSeries, as we are going to visualize the comparison of heights here. Next, bind the Data property of the above ViewModel to the ColumnSeries.ItemsSource property.
<?xml version="1.0" encoding="utf-8" ?> <ContentPage >="http://xamarin.com/schemas/2014/forms" >="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="ChartDemo.MainPage" >="clr-namespace:Syncfusion.SfChart.XForms;assembly=Syncfusion.SfChart.XForms" >="clr-namespace: ChartDemo"> <ContentPage.BindingContext> <local:ViewModel></local:ViewModel> </ContentPage.BindingContext> <chart:SfChart> <chart:SfChart.PrimaryAxis> <chart:CategoryAxis></chart:CategoryAxis> </chart:SfChart.PrimaryAxis> <chart:SfChart.SecondaryAxis> <chart:NumericalAxis> <chart:NumericalAxis.Title> <chart:ChartAxisTitle Text="Height (in cm)"></chart:ChartAxisTitle> </chart:NumericalAxis.Title> </chart:NumericalAxis> </chart:SfChart.SecondaryAxis> <chart:SfChart.Series> <chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="Name" YBindingPath="Height"></chart:ColumnSeries> </chart:SfChart.Series> </chart:SfChart> </ContentPage>
The following code initializes the SfChart component.
SfChart chart = new SfChart { PrimaryAxis = new CategoryAxis(), SecondaryAxis = new NumericalAxis() }; chart.SecondaryAxis.Title = new ChartAxisTitle { Text = "Height (in cm)" }; ColumnSeries columneSeries = new ColumnSeries(); columneSeries.ItemsSource = new List<Model>() { new Model { Name = "David", Height = 180 }, new Model { Name = "Michael", Height = 170 }, new Model { Name = "Steve", Height = 160 }, new Model { Name = "Joel", Height = 182 } }; columneSeries.XBindingPath = "Name"; columneSeries.YBindingPath = "Height"; chart.Series.Add(columneSeries);
The final output shown below will be identical on iOS, Android, and Windows platforms.
Adding Excel reporting capabilities
Step 1 : Install the required XlsIO NuGet packages as demonstrated here .
Step 2: Read and write Excel files as shown in the following sample.
//Create an instance of ExcelEngine. using (ExcelEngine excelEngine = new ExcelEngine()) { //Set the default application version as Excel 2013. excelEngine.Excel.DefaultVersion = ExcelVersion.Excel2013; //Open an existing workbook. IWorkbook workbook = excelEngine.Excel.Workbooks.Open(inputExcelStream); //Access first worksheet from the workbook instance. IWorksheet worksheet = workbook.Worksheets[0]; //Set the text value to the cell worksheet["N1"].Text = "Total"; worksheet["A6"].Text = "Average"; //Set the formulas to the cell or range of cells worksheet["N2:N5"].FormulaR1C1 = "SUM(RC[-12]:RC[-1])"; worksheet["B6:M6"].FormulaR1C1 = "AVERAGE(R[-4]C:R[-1]C)"; worksheet["N6"].Formula = "SUM(B2:M5)"; //Set the column width in points. worksheet["A1:N1"].ColumnWidth = 10; //Save the workbook to stream in xlsx format. workbook.SaveAs(outputExcelStream); }
As demonstrated in the above cases, it only takes a few minutes to add powerful enhancements to your existing applications. Get started today and transform your application by claiming your free license.
