Write Fast with the Infragistics Control Configurator

Step 1 Set up the project

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

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.

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.

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.

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.

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.

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.

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.

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.

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)

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.

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

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.

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

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.

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

After you format the code, all the properties that you defined in the configurator have been generated for you 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.