Write Fast with the Infragistics Control Configurator

Introduction

The Ultimate UI Controls for Xamarin configurator enables you to create and design custom components. In this lesson, you will use the configurator to design and create a Data Grid without writing a single line of code. The visual configurator lets you design different aspects of the grid, such as the columns to be displayed, column width, and more.

Lesson Objectives

At the end of this lesson, you will have created a data grid quickly and easily by using Ultimate UI for Xamarin Control Configurator.

  1. Set up the project
  2. Create data binding
  3. Customize the grid

For more information on the control used in this lesson, see the Xamarin Data Grid Control page.

Step 1 Set up the project

You can download the project used in this lesson by clicking here.

Setting up project with Xamarin

Then, to run the projects for the first time after un-zipping, load the entire solution into Visual Studio, right-click on the Solution, and select Restore NuGet Packages.

Once that is complete, add a reference to both the Portable Class Library and the Android project to DataSource.DataProviders.OData.Core.dll. This file is in the OtherDependencies folder that is part of the ZIP download. You can do this by right-clicking the Reference folder in the Project, and then click Add Reference. Browse to the OtherDependencies folder, and selecting the DataSource.DataProviders.OData.Core.dll.

Setting up project with Xamarin

Do this for both projects in the solution. Then, finally, ensure the Target Android Version is set to "Use Compile using SDK version." You can find this setting by right-clicking on the Android project and selecting Properties.

Setting up project with Xamarin

Step 2 Create data binding

If necessary, open the MainPage.xaml file in Visual Studio. From the Infragistics Toolbox, drag the grid option to the XAML code. Next, drag and drop the XamDataGrid from the toolbox to the stack layout. The result should look similar to this example.

Use the configurator

With the grid XAML code selected, click the lightbulb, and then click Configure XamDataGrid to open the configurator. If you receive a message that you need to build the solution, click OK. Right-click the solution, and then click Build, then launch the configurator. You can also launch the configurator using your keyboard, with the Ctrl + Period + Enter.

When the configurator opens, you’ll notice the data grid properties has some required fields. The required field in this example is ItemsSource, which is required to bind to data in a view model. To modify the property, click the square to the right of the property label, then click Create Data Binding.

Modifiy the required ItemsSource property by Creating Data Binding

The configurator will create a data binding using the page name. Since you used the MainPage, it will automatically assume that the view model is MainPageViewModel. It will also automatically list the properties that are accessible in the view model. Select the People property, then click Create Binding.

Xamarin Control Configurator Create Data Binding Menu

A XamDataGrid will be created using the data from the binding. The configurator will also identify the data type of the properties and generate the design based on that data. In this example, the sample data will start with 15 rows of data.

Step 3 Customize the grid

Change the Row Count field to 25, and the data grid will automatically expand to include the additional data.

Adjust Row Count to allow for more data into the grid

You may notice that the data in the grid is compressed together, making it difficult to read. This can be fixed by changing the DefaultColumnWidth property of the data grid. Set the property to 120, then you’ll be able to read the data in the grid.

Adjust DefaultColumnWidth property to have grid display nicely

Now, what if you didn’t want all of the columns in the data source to be displayed as part of the data grid? Change the default column minimum width back to 0, so that you can see all the columns. Then, disable the AutoGenerateColumns property. The data preview will be removed, since no columns have been selected.

Disable AutoGenerateColumns to have more control over columns added to grid

The Columns panel on the left side of the configurator displays a list of the available columns that you can add to the data grid. Click the plus icon next to the columns that you want to be displayed. For our example, enable these columns:

  • FirstName (String)
  • LastName (String)
  • JobTitle (String)
  • Salary (Double)
Columns Panel displays a list of all available columns that you can add to grid.

Notice that the columns are added to the preview, and that the column width is automatically set based on the fields. You can also manipulate how the columns are displayed in our grid using the properties of the columns. Select FirstName (String) in the list of available columns. In the column properties, change the HeaderText property to only “First”. This changes the display name of the column without modifying the data source. Change the width of the column to 75, and disable Is Star Sized.

Manipulate how columns are displayed in grid by using the property of the columns.

Repeat these steps for the LastName column, so that it is only displayed as "Last."

Result of changing lastName columne properties.

Next, you’ll move on to the Salary column. Notice that the sample data varies on how the data is being displayed. Change the Numeric Sample Data values and set the Minimum and Maximum Values. Set the Minimum Value to 50000 and the Maximum Value to 500000.

Set Minimum and Maximum values in configurator properties

That fixes some of how the data is displayed, but you’ll still want to make it look like you’re representing money. First, set the FormatString property to Currency. You can also make other display changes to the column. Here are the settings used in the example:

  • TextColor: Black
  • Background: Green
  • Header FontSize: 18
  • Header TextColor: Black
  • Header FontAttributes: Bold
Xamarin Control Configurator Properties Menu

The Control Configurator also lets you easily change how the data is visually represented in the data grid. By default, the configurator will set the columns based on the data type that is in the column. For example, the FirstName column is a string, so it is represented as a Text column. If you wanted to change how a column is represented, simply select the column and use the Type configurator in the ribbon to select another data type.

The Xamarin Control Configurator allows you to easily change how data is displayed.

After you’ve configured our data the way that you want, click the Data Grid tab of the configurator, and then click Apply & Close.

Xamarin Configurator Apply and Close Button

After you format the code, all the properties that you defined in the configurator have been generated for you in the XAML code.

All the properties defined in the configurator have been generated in the XAML code.

Now you can run the app and see that the data grid is designed exactly how you configured it using the control configurator.

Running the Xamarin Sample App

Conclusion

The Infragistics Toolbox is used to create visual elements, such as data grids, by using a visual configurator that automatically develops the necessary XAML. You can create these components without writing a single line of code, while fine-tuning every detail from the configurator. These controls are available with Infragistics Ultimate UI for Xamarin.