Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

DZone's Guide to

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

Even with no native toolbox in Xamarin.Forms, you can easily create grids with a drag and drop method available in Ultimate UI Controls.

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

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 the 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.

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.

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:
mobile ,mobile app development ,xamarin ,tutorial

Published at DZone with permission of Josh Anderson, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}