Xamarin.Forms UI Controls - Building the Logify Client App (Part 4)

Mobile Team Blog
21 October 2019

This is the fourth post in our "Building the Logify Client App" blog series. As you may already know, the purpose of this blog series is to document how we build the Logify Mobile Client app using DevExpress Xamarin.Forms UI Controls. Feel free to review our previous posts using the following links:

NOTE: At present, DevExpress Xamarin.Forms UI controls ship as part of our Universal Subscription. We expect to release a Xamarin-only product subscription in our v19.2 release cycle.

UI Changes – App Navigation

In our original design mockup, we planned to use a side drawer for app-wide navigation. We have since determined that a tab bar is more efficient – it reduces the number of taps required to navigate between app views. While an extra tap may not seem like much, we think our new approach improves the app’s overall user experience. We’d certainly love to hear what you think – be sure to comment below if you think this change is for the positive.

Tab Bar Navigation

The DevExpress Xamarin.Forms UI component suite includes a TabPage control – a simple control for those that require tab navigation within their apps.

To incorporate tab navigation within the Logify Mobile Client, we must first add the required tabs to the TabPage control. Each tab is described by a separate TabPageItem, so we’ve added four different items to our project. In addition, we’ve specified the Title property for each page (caption used for tab items).

<dxn:TabPage
  xmlns="http://xamarin.com/schemas/2014/forms"
  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  xmlns:dxn="clr-namespace:DevExpress.XamarinForms.Navigation;assembly=DevExpress.XamarinForms.Navigation"
  xmlns:views="clr-namespace:Logify.Views"
  x:Class="Logify.Views.MainPage"
  NavigationPage.HasNavigationBar="False"
  HeaderPanelPosition="Bottom">
  <dxn:TabPageItem>
    <views:DrawerReportsFilterView Title="Reports"/>
  </dxn:TabPageItem>
  <dxn:TabPageItem>
    <views:DrawerApplicationsDetailView Title="Apps"/>
  </dxn:TabPageItem>
  <dxn:TabPageItem>
    <views:StatisticView Title="Statistic"/>
  </dxn:TabPageItem>
  <dxn:TabPageItem>
    <views:UserView Title="Account"/>
  </dxn:TabPageItem>
</dxn:TabPage>

As you can see in the image above, our new user interface differs slightly from the original design mockup.

To improve overall appearance, we will change the default color of tab captions via the TabPage.ItemHeaderTextColor property. We’ll also add icons to our tab headers. To include icons, we need to specify the Page.Icon property for each content page.

One final change – to help highlight the active tab page, we will set its color via the control’s TabPage.SelectedItemHeaderIconColor property.

<dxn:TabPage
  ItemHeaderTextColor="#979797"
  SelectedItemHeaderIconColor="#548ed3"
  SelectedItemHeaderTextColor="#548ed3">
  <dxn:TabPageItem>
    <views:DrawerReportsFilterView Icon="reports" Title="Reports"/>
  </dxn:TabPageItem>
  <dxn:TabPageItem>
    <views:DrawerApplicationsDetailView Icon="apps" Title="Apps"/>
  </dxn:TabPageItem>
  <dxn:TabPageItem>
    <views:StatisticView Icon="statistic" Title="Statistic"/>
  </dxn:TabPageItem>
  <dxn:TabPageItem>
    <views:UserView Icon="user" Title="Account"/>
  </dxn:TabPageItem>
</dxn:TabPage>

Follow this link to git if you’d like to review the complete source code for this project.

Your Feedback Counts

As always, we’d love to hear your thoughts on our Logify Mobile Client and our Xamarin.Forms UI controls. Leave your comments below or contact us at info@devexpress.com.

2 comment(s)
Customer98906
Customer98906
Hi Grigoriy;
How can i download sample code including datagridview component?
thanks

24 October, 2019
Grigoriy V (DevExpress)
Grigoriy V (DevExpress)
@Customer98906

Yes, we plan to publish the application's source code in our public GitHib repository after the end of the development cycle.

In the meantime, you can start with examples from our online documentation. For instance, check the DataGrid examples in the https://docs.devexpress.com/MobileControls/400832/xamarin-forms/data-grid/examples/index article (we also included the Examples section for other components).

If you have any questions, feel free to contact us in Support Center (https://www.devexpress.com/Support/Center/Ask).

28 October, 2019

Please login or register to post comments.