Log in to like this post! Write Apps Faster with Ultimate UI Controls from Infragistics Infragistics Team / Wednesday, May 3, 2017 Note: This post was originally written for and posted at the Xamarin blog. Are you ready to speed up the process of writing your cross-platform mobile app with Xamarin.Forms? If you’re new to Xamarin app development, or even if you’ve developed a few mobile apps, getting started on a new project can be a challenging task. While Xamarin provides tons of resources, when you create a new project and stare at the default templates, it can take hours before you’re ready to start writing your business logic. With Infragistics Ultimate UI for Xamarin, those hours turn into minutes. Infragistics Ultimate UI for Xamarin (which you can download and try for free ) enables you to write fast and run fast with a brand new set of feature-rich and high-performing controls, as well as a revolutionary new Productivity Pack that will change the way you create Xamarin applications. While I’d love to write about all the great controls you get in Ultimate UI for Xamarin, in this post I want to focus on all the productivity tools Infragistics has just released that could change the way you write Xamarin.Forms applications: Infragistics AppMap Infragistics Xamarin.Forms Toolbox Infragistics Control Configurators AppMap Creating Xamarin.Forms applications one page at a time can be a daunting and time-consuming task. How convenient would it be to simply whiteboard out your next app, then have an entire MVVM based Xamarin.Forms app generated with a click of a button? That’s exactly what the Infragistics AppMap does. From File à New, select the Infragistics AppMap Project (Xamarin.Forms): Next, you can use the Infragistics Xamarin.Forms Project Wizard to choose the platforms you want to target. This is one of my favorite features, because I don’t always want to target every single available platform. Pay special attention to the checkbox that says “Show AppMap” — this is what you should really care about. Once you have selected your desired platforms and chosen your container (we’ll come back to this later), click the “Create Project” button to get to the brand-new AppMap dialog. As soon as the dialog appears, you’ll feel right at home with an intuitive UI that is modeled after a mixture of Microsoft Visio and Microsoft Visual Studio. As you can see, the Infragistics AppMap gives you the ability to drag various types of Xamarin.Forms pages from the toolbox onto the design surface and arrange them as you see fit. You can also create connections between the pages that represent either child relationships (such as a TabbedPage with Tabs), or how each page will navigate to others. Once you’re done designing the application in the AppMap designer, simply click the “Generate AppMap” button and watch the magic happen. Visual Studio will generate all the Views, ViewModels, and all the navigation code for you. You don’t have to do anything but press F5 to run the app. What use to take hours to do can now be done in a few minutes. There are a lot more features available in the AppMap; you can take a deeper dive into it by watching this introduction video: How does Infragistics do it? To make a long story short, the AppMap generates a Prism application. For the AppMap to generate a well architected MVVM application based on best patterns and practices, it must have some type of application framework to enable the generation of reliable MVVM-friendly code. Infragistics decided that the Prism Library was the best Xamarin.Forms application framework available, and based all generated code off the features available in Prism. Most notably, what makes AppMap even possible is the very powerful URI-based navigation framework that Prism provides. Also, remember when you had to choose a container in the Infragistics Xamarin.Forms New Project Dialog? Well, this is because Prism leverages dependency injection (DI) and requires the use of a container. Prism provides just about everything you need to be successful writing an MVVM-friendly Xamarin.Forms application. For more information on Prism, or to get the source, you can find the Prism Library GitHub at https://github.com/PrismLibrary/Prism . Infragistics Xamarin.Forms Toolbox After you’ve generated the entire application using the Infragistics AppMap, you can start adding controls and other elements to your pages. If you’re coming from other platforms like WPF, ASP.NET WebForms, or WinForms, you’ll notice a large gaping hole in the Xamarin.Forms development experience. There is no designer, and there is no toolbox! This creates a major barrier to your productivity. The Infragistics Xamarin.Forms Toolbox provides all the standard Xamarin.Forms Layouts, Views, and Cells that are available out of the box from Xamarin. This makes it super simple to drag an element from the toolbox and drop it onto your XAML file, which will insert the XAML snippet at the drop point: It gets better. Not only does the toolbox provide standard drag and drop behavior, it also provides extended XAML snippets. When you hold the CTRL key and drop a control onto the XAML file, a full XAML snippet is created that provides much more generated code. For example, when you want to create a Grid, chances are you want to have a few rows and columns created. Instead of writing that XAML by hand, though, just hold the CTRL key and let the toolbox do the work for you. Powered by NuGet Not only is the Infragistics Xamarin.Forms Toolbox the world’s first toolbox for Xamarin.Forms, it’s also powered by NuGet packages. Yes, you read that right: Powered. By. NuGet. Since Infragistics also ships a ton of great Xamarin controls, it makes sense that they would show up in the toolbox whenever they are added to your project. To try this, simply add one of Infragistics Xamarin.Forms controls to your project via the NuGet Manager, and keep an eye on the toolbox. For every Infragistics NuGet package you add to your solution, an entry for that control will be added to the Infragistics Xamarin.Forms Toolbox. Now, drag an Infragistics control from the toolbox and drop it onto your XAML file. Two things happen. First — and the most obvious — is that the control is added to the XAML. Second, which is even more amazing, is that if you look at the top of your XAML file, the XMLNS declaration for the control has been added automatically. This is a huge timesaver. No more looking at docs or trying to use intellisense to try to find the namespace of the control you want to use. Heck, in VS2015 you don’t even have intellisense, so this new toolbox saves a ton of time and headaches. What’s even better is if you already have an existing XMLNS defined, the toolbox recognizes and uses it, rather than creating another one. I want to point out that when you first install Infragistics Ultimate UI for Xamarin, the toolbox is not shown in VS. You must manually display the toolbox by going to the View à Other Windows à Infragistics Toolbox menu from Visual Studio. To see the Infragistics Toolbox in action, check out this video: Control Configurators After you have designed and generated your entire application using the AppMap and then laid out your page’s structure by dragging and dropping controls from the Infragistics Xamarin.Forms toolbox, the last step is to start styling your controls, binding your controls to data, and configuring your controls to meet your application requirements. There is only one problem with that last step: Xamarin.Forms does not have a designer! This makes it extremely difficult to configure any control and know how it will work or what it will look like until you press F5 and run your app on a device or an emulator. Not only is this a pain, but it is very time-consuming. Make a change, run the emulator. Make another change, run the emulator again. Repeat until you’re happy with the result. This takes forever! Well, Infragistics has a solution to that problem too. Introducing the game-changing Infragistics Control Configurators! The Control Configurator it is a dialog you launch from the XAML editor from within Visual Studio that allows you to visually configure the Infragistics Xamarin.Forms controls. How do you launch it? After you drag an Infragistics Xamarin.Forms control into your XAML editor, click the control name to place your mouse cursor in the control XAML. When you do this, you will see the Visual Studio Suggestion Light Bulb appear. Open the suggestion light bulb and you will see a menu option called “Configure [ControlName]”. Since I am using the XamRadialGauge, the menu item says “Configure XamRadialGauge”. I personally like to use the CTRL+. shortcut to launch the suggestion lightbulb. Once you see the menu item, click it. You’ll see a dialog appear that has a design surface containing the control and then a ton of options. All the Control Configurators have a common layout: ribbon at the top, a property grid on the right, and on the left you’ll get several other options, depending on the configurator you are using. This example is using the XamRadialGauge Control Configurator, so the ribbon contains options to easily modify the ranges, the scale, and the needle. It even has QuickSets that allows you to use a predefined template to get you close to the gauge you have in mind. If you want more control than what the ribbon menus can give you, jump into the property grid and start modifying every little property until you’re happy. No matter what you do, you’ll see the changes visually reflected on the design surface. The next step is to data bind the Value property of the XamRadialGauge to a property in the ViewModel. You may be thinking you have to do this in XAML…but you don’t. Infragistics has provided an awesome data binding editor to use on any bindable property. Just find the property you want in the property grid, and click on the little square to the right of the property value. Next, click the “Create Data Binding” menu option. You’ll see a dialog appear you can use to create your binding exactly as you see fit. Set the binding path, mode, converter (yes, it will automatically find all your converters), and provide a string format. Once the dialog launches, notice it automatically finds the BindingContext (ViewModel) for you using a convention of [PageName]ViewModel. If the dialog guessed wrong (or couldn’t find it), you can set the BindingContext yourself by picking it from a list of available classes. Once you have configured the control exactly as you want it, hit the “Apply & Close” button. BAM! Now you should see all the XAML code that automatically generated. Now, I know your brains are oozing out of your head right about now, but there is more. After you generate all your XAML, make a change to the background color or some other property (in this example, I’m changing the background to LightBlue), then select the XamRadialGauge and show the Control Configurator again. Yep, it not only allows you to generate XAML, but it will also read it in and the Control Configurator will show you exactly what your XAML does. Infragistics ships configurator for the following controls: Bullet Graph Linear Gauge Radial Gauge Pie Chart Data Grid For a more detailed look at using the Control Configurators, you can check out this video: Automatic Updates The best part about all these new productivity tools is that they are hosted on the Visual Studio Marketplace. This means that Infragistics can (and will) be pushing updates on a continuous delivery schedule to keep your installed extensions automatically updated. You don’t have to do anything. Let Visual Studio manage all the updating for you. You just concentrate on writing apps and being productive. Try it Yourself I don’t know about you, but I am really excited about all these new productivity tools for Xamarin.Forms development. Don’t get me wrong, the Infragistics Xamarin.Forms controls are just as awesome, but these new productivity tools are going to change the way you write Xamarin.Forms applications going forward. From File -> New to production, Infragistics has set the bar for Xamarin.Forms productivity. The best part is that you can try these out for yourself right now. Head on over to Infragistics and download a trial of Infragistics Ultimate UI for Xamarin today , and you’ll be able to design, lay out, and build cross-platform mobile apps using Xamarin.Forms in a matter of minutes…instead of hours. Brian Lagunas is a Microsoft MVP, a Xamarin MVP, a Microsoft Patterns & Practices Champion, and co-leader of the Boise .Net Developers User Group (NETDUG). Brian works at Infragistics as a Product Manager for all things XAML, which includes the award-winning WPF, Silverlight, Windows Phone, Windows Store, and Xamarin.Forms control suites.