Xamarin UI Controls - Case Study: Building the Error Monitoring Client App (Part 1)

To help showcase the capabilities of our Xamarin.Forms UI controls and to deliver the best possible user experience, we chose to create native Android and iOS apps from a single shared C# code. Our mobile app will allow users to view and process individual crash reports on mobile devices from a exception monitoring platform (Logify).

This blog series will detail the process from beginning to end. We will solicit feedback and hopefully work with you to deliver a great mobile client for error monitoring and extend the capabilities of our Xamarin.Forms UI controls where appropriate.

We expect the Error Monitoring mobile client to include the following app screens.

If you are primarily interested in our Xamarin.Forms UI controls, this blog series should offer deeper insights into what is possible with DevExpress Xamarin.Forms components and how you can deliver amazing mobile user experiences in the shortest possible timeframe.

This Drawer control is our implementation of the Xamarin.Forms MasterDetailPage control.

A cell template is a Xamarin.Forms DataTemplate. When the grid is bound to a collection of data objects, the elements specified in the DataTemplate are bound to properties of each data object. This defines the manner in which the component displays values.

The DevExpress Xamarin.Forms Data Grid supports gestures. The Error Monitoring client will use the following gestures within the Reports workspace:

• Swipe Actions – We will implement common actions, including Ignore and Close.

• Load More – For maximum UI efficiency, we will avoid loading too many items within the list and use “load more” to populate the list.

Note: As you may know, the Xamarin.Forms MasterDetailPage allows us to position a drawer UI element on the left side of the screen. We've decided to use our custom DrawerView to maintain better control over screen position and UI behavior.

In the Reports list, we only display application name and the exception associated with individual reports. We will activate the Crash Reports View when a user taps an item in the report list and display detailed information on each exception/crash event.

The Error Monitoring client divides exception information into logical blocks. These blocks can be quite large and can consume significant screen real-estate. To help improve readability, we will use TabView and provide a separate tab for each information block. Custom templates allow us to modify the appearance of tab headers.

We will use our Xamarin.Forms Data Grid and custom templates to create the appropriate UI. Each item within this list displays a chart that specifies the number of logged reports for a given app. At present, we do not have a special control for this purpose. We will revisit this as we move forward in this project.

This view includes application name, API key, description and proportion of active crash reports.

To improve readability, we expect to organize individual charts within separate tabs.

As this project progresses, we expect to regularly share implementation details via this blog. Should you have any questions about this project or would like to share your Xamarin experiences with us, feel free to contact us at info@devexpress.com or leave your comments below.