Add Content to Xamarin.Forms Apps in Seconds

Adding content to Xamarin.Forms can be frustrating. the built-in Visual Studio templates don't make it easy to add content. This is especially true if you have an existing navigation tree and ViewModels setup.

That's where the Productivity Pack of the Ultimate UI Controls for Xamarin come in. One of the tools that you can use is AppMap, which lets you drag and drop content pages using a Visio-style diagram. AppMap generates the Views, ViewModels, and creates the navigation for you automatically.

Let’s pick up where we left off in the previous blog. In that post, we used AppMap to create a brand new app from scratch using the drag and drop designer. Now we have a functioning app that has a MasterDetailpage, content pages, and navigation; all by using the designer.

Now we'll start by looking at our existing app design. When we use the AppMap template, a view model base is generated for us automatically. You can see this in the infrastructure of our app. Let’s keep this in mind as we add more content to the app.

Just as we created the initial design, we can easily use AppMap to add pages and content using the drag and drop designer. (Note: The AppMap can only add items to projects that the AppMap was used to create.) To do that, we’ll add a new item to the project. Right-click the project, and select Add -> New Item.

You might have to navigate to Visual C# -> Infragistics -> Xamarin.Forms, and then select the AppMap Item. The name of the item doesn’t have an effect, so we’ll click Add. Now we’re presented with our designer where we can drag and drop the content pages into our app design.

The first thing we want to highlight when adding additional content are the Code Generation Options. Remember that the existing view model in our project is AppMapViewModelBase.cs. AppMap will automatically recognize use this, as well as the default Views and ViewModels folder names. These options give you the ability to complete customize the project with additional Views and ViewModels that you might have created. If you have other ViewModel bases, you can also select them from the drop-down menu in these options.

We only need to change these options if you have customized the project. We’ll leave them as default and continue with adding pages to our design. Let’s add two ContentPages that are named NewPage1 and NewPage2, and then click Generate AppMap.

Just as when we were creating the original design, the Views and ViewModels are added to our project automatically.

Because we left the Code Generation Options set to their defaults, the navigation for these new pages added to the existing navigation. Open the App.xaml.cs class and notice that the navigation has been updated to include the two new pages.

Get started using AppMap to build mobile apps with this introduction video, which features a demo of how to create a new project and goes over the code it generates. From there, move through the AppMap video playlist to dive into Prism, adding project items, and the different layout options AppMap provides.

You can see that adding content to an existing project is just as easy as creating a new project with AppMap and the Productivity Pack using Ultimate UI for Xamarin. In our next post, we’ll show you how to use another feature of the Productivity Pack, the Infragistics Toolbox.

Ready to try it yourself? Download a trial today to get started using AppMap with the UI Controls for Xamarin. We also have videos and lessons for using AppMap and other UI Controls for Xamarin to help you write fast and run fast.