{"id":705,"date":"2017-06-20T05:00:00","date_gmt":"2017-06-20T05:00:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=705"},"modified":"2025-02-26T11:59:03","modified_gmt":"2025-02-26T11:59:03","slug":"xamarin-forms-grid","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/xamarin-forms-grid","title":{"rendered":"Generate Your Next Xamarin.Forms Grid: It's as Easy as Drag and Drop"},"content":{"rendered":"\n

If you\u2019ve used other development platforms, you\u2019re probably used to using a native toolbox that lets you drag and drop controls or whatever you need to your code. Now you\u2019ve decided to use Xamarin.Forms\u2026 and there\u2019s no toolbox.<\/p>\n\n\n\n

That\u2019s where the Ultimate UI Controls for Xamarin<\/a> comes in, and gives you the Infragistics Toolbox: the world\u2019s 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.<\/p>\n\n\n\n

To gets started, we\u2019ll open up the app that we created. Once we have the solution open, right-click the project and select Manage NuGet Packages for Solution<\/b>.<\/p>\n\n\n\n

\"right-click<\/figure>\n\n\n\n

<\/p>\n\n\n\n

On the Browse<\/em> tab of the NuGet package manager, search for XF.DataGrid<\/b>. Select the Infragistics.XF.DataGrid<\/i> package, and then enable the package for the project by marking the checkmarks. Click Install<\/b> to add the package to the solution.<\/p>\n\n\n\n

\"<\/figure>\n\n\n\n

Now that we\u2019ve added the package, let\u2019s open the toolbox and see what we have. You can open the toolbox by clicking View -> Other Windows -> Infragistics Toolbox<\/b>.<\/p>\n\n\n\n

\"View<\/figure>\n\n\n\n

With the packages that we have installed, we should be able to see different layouts, views, and cells in the toolbox. For now, we\u2019ll focus specifically on using a grid.<\/p>\n\n\n\n

\"<\/figure>\n\n\n\n

Using the solution that we created in a previous blog, we already have a View named GridPage.xaml<\/em>. Let\u2019s 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<\/b> from the toolbox.<\/p>\n\n\n\n

\"With<\/figure>\n\n\n\n

A blank grid will automatically get created for us. At this point, the grid isn\u2019t 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\u2019s delete this grid, and then add it a different way. With the cursor on a line, hold the Ctrl<\/b> key and then double-click the Grid<\/b> layout.<\/p>\n\n\n\n

\"With<\/figure>\n\n\n\n

Now we\u2019re 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.<\/p>\n\n\n\n

Get started using the Toolbox to build mobile apps with this introduction video<\/a>, 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.<\/p>\n\n\n\n