Generate Your Next Xamarin.Forms Grid: It's as Easy as Drag and Drop

If you’ve used other development platforms, you’re probably used to using a native toolbox that lets you drag and drop controls or whatever you need to your code. Now you’ve decided to use Xamarin.Forms… and there’s no toolbox.

That’s where the Ultimate UI Controls for Xamarin comes in, and gives you the Infragistics Toolbox: the world’s first NuGet powered toolbox for Xamarin.Forms. With this toolbox, you can drag and drop the component or control that you want to use, and the XAML code will be generated for you automatically.

To gets started, we’ll open up the app that we created in a previous blog post. Once we have the solution open, right-click the project and select Manage NuGet Packages for Solution.

On the Browse tab of the NuGet package manager, search for XF.DataGrid. Select the Infragistics.XF.DataGrid package, and then enable the package for the project by marking the checkmarks. Click Install to add the package to the solution.

Now that we’ve added the package, let’s open the toolbox and see what we have. You can open the toolbox by clicking View -> Other Windows -> Infragistics Toolbox.

With the packages that we have installed, we should be able to see different layouts, views, and cells in the toolbox. For now, we’ll focus specifically on using a grid.

Using the solution that we created in a previous blog, we already have a View named GridPage.xaml. Let’s open this page so that we can work with the toolbox. With the page open, place the cursor on a line and then double-click Grid from the toolbox.

A blank grid will automatically get created for us. At this point, the grid isn’t very interesting. We would still need to customize it based on how we want it to look, and how the data is supposed to appear. Let’s delete this grid, and then add it a different way. With the cursor on a line, hold the Ctrl key and then double-click the Grid layout.

Now we’re talking about some real time savings. Not only is the grid created, but the layout of the grid is more complex by offering two columns and five rows for us automatically. You use this shortcut for grids and all of the other controls in the toolbox.

Get started using the Toolbox to build mobile apps with this introduction video, which walks you through the views, layouts, and tooltips that you can drag and drop to quickly design pages and automate your coding and formatting.

[youtube] width="560" height="315" src="http://www.youtube.com/embed/4L3S26U0HeM?rel=0" [/youtube] 

Ready to see how you can save time creating layouts and views with the Infragistics Toolbox? Download a trial of the UI Controls for Xamarin to get started. We also have videos and lessons to help you out.