Step 2 Design an AppMap flow
First, drag and drop a ContentPage from the Toolbox to the design area. The first ContentPage element is titled MainPage. Whether the page is actually the main page or not is controlled in the Properties menu. Change the Name to LoginScreen, and uncheck the Wrap in Navigation checkbox.
Drag and drop another ContentPage element from the toolbox to the right of the existing page. Drag and drop a Navigates To relationship to connect the LoginScreen page to the new page. Rename the new page to NewAccountScreen.
This is useful if the main page of an app prompts to create a new account. Drag and drop another Navigates To element to navigate back from the NewAccountScreen to the LoginScreen, for reverse navigation. Drag the element on top of the existing Navigates To element to ensure that it has arrows pointing both directions.
With the Navigates To element selected, review the available properties. Drag and drop a MasterDetailPage element to the design area and name the element MainPage. Notice that the page type automatically creates additional content pages. Each of the pages will also have navigation enabled automatically, as indicated by the navigational icon. This ensures that the pages are included in the hamburger navigation menu automatically. Rename the MasterDetailPage to Home, and rename the linked pages to Customers, Orders, and NewsFeed.
To view the navigation settings, select one of the new Navigates To elements. Notice that the Wrap in NavigatonPage roperty is automatically enabled for the child pages.
Drag and drop a TabbedPage element to the right of the Home element. Notice that additional content pages as added, this time as numbered child pages. You can also navigate directly from a content page to a tabbed page by using the Navigates To element. Drag a Navigates To element from the toolbox. Connect the source to Orders, and the destination to Tabbed.
Add two more content pages below the CustomerDetails page. Name the pages Sales and Employees. Connect the CustomerDetails page to each content page using the Has Child relationship element. Ensure that the Sales order is set to 0, and the Employees order is set to 1 using the element properties.
As a final piece to the puzzle, drag and drop an Absolute Navigation relationship element from the LoginScreen content page to the MasterDetailPage. This provides a one-way path from the login screen to the MasterDetailpage, without a method of returning to the login screen.
Review the design as a whole to understand the logic of stepping through each page and the navigation options on each page. Click Generate AppMap when you’re ready to create the associated code.
The project will be created with all necessary files to support the design that was created in AppMap.
Browse through the view models and XAML to see how AppMap created the necessary Prism code and XAML based on the designs you used.
After exploring, right-click the Android package and then click Set as StartUpProject.
Right-click the project, and then click Build. After the build completes, run the project using your desired emulator or hardware device.
Click MainPage to navigate to the CustomerLIst page. Notice the hamburger menu icon in the top-left of the screen. Click the menu to display the content pages that you defined in the AppMap.
Navigate to the CustomersList page, and you’ll find the tabbed page with child objects. Click between the tabs to switch pages in the app.