Adjusting UI for different platforms

Question

I am working on a Xamarin.Forms (Portable) using Visual Studio 2015. The application allows me to retrieve information from a Database and display it.

I am able to display all the created records in a ListView on UWP. However, on Android they are not all showing up.

From my Menu Page, you can clearly see the big difference in terms of UI size. I am curious to know why this is happening on the Android platform.

Below are some of the relevant code. If you need to see more, please let me know.

MenuPage.xaml

MenuPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace XamarinFormsDemo.Views
{
    public partial class MenuPage : ContentPage
    {
        public MenuPage()
        {
            InitializeComponent();
            NavigationPage.SetHasNavigationBar(this, false);
        }

        private async void NavigateButton_OnClicked(object sender, EventArgs e)
        {
            await Navigation.PushAsync(new EmployeeRecordsPage());
        }

        private async void SalesTapGestureRecognizer_OnTapped(Object sender, EventArgs e)
        {
            await sales.ScaleTo(0.95, 80, Easing.CubicOut);
            await sales.ScaleTo(1, 80, Easing.CubicIn);

            await Navigation.PushModalAsync(new SalesAndExpensePage());
        }

        private async void PersonnelTapGestureRecognizer_OnTapped(Object sender, EventArgs e)
        {
            await personnel.ScaleTo(0.90, 75, Easing.CubicOut);
            await personnel.ScaleTo(1, 75, Easing.CubicIn);

            await Navigation.PushModalAsync(new PersonnelPage());
        }

        private async void CRMTapGestureRecognizer_OnTapped(Object sender, EventArgs e)
        {
            await crm.ScaleTo(0.90, 75, Easing.CubicOut);
            await crm.ScaleTo(1, 75, Easing.CubicIn);

            await Navigation.PushModalAsync(new CRMPage());
        }


        private async void AssetTapGestureRecognizer_OnTapped(Object sender, EventArgs e)
        {
            await asset.ScaleTo(0.90, 75, Easing.CubicOut);
            await asset.ScaleTo(1, 75, Easing.CubicIn);

            await Navigation.PushModalAsync(new AssetManagementPage());
        }

        private async void ReceivablesTapGestureRecognizer_OnTapped(Object sender, EventArgs e)
        {
            await receivables.ScaleTo(0.90, 75, Easing.CubicOut);
            await receivables.ScaleTo(1, 75, Easing.CubicIn);

            await Navigation.PushModalAsync(new ReceivablesAndPayablesPage());
        }


        private async void ApprovalsTapGestureRecognizer_OnTapped(Object sender, EventArgs e)
        {

            await prapprovals.ScaleTo(0.90, 75, Easing.CubicOut);
            await prapprovals.ScaleTo(1, 75, Easing.CubicIn);

            await Navigation.PushModalAsync(new ApprovalsPage());
        }
    }
}

Here's a screen shot of UWP and Android. First image is UWP, second image is Android.

Cheesebaron · Accepted Answer

First of all. Your view is awfully nested, which can lead to performance problems.

Second of all. You are saying you are using a ListView. However, I don't see it anywhere in your XAML. There you are just using a StackLayout and stacking views below each other.

This means that any item that cannot fit within the screen will not be displayed at all. Consider rewriting your UI and use a ListView instead. Your items are very similar to each other and only title, image and click handler differ from each other. Using a ListView could also eliminate repeating yourself as you do currently with all those tap handlers, and you could limit yourself to only have one.

You could have something like this:

public class MenuItemViewModel
{
    public string Name { get; set; }
    public string ImageUrl { get; set; }
}

Then in your ViewModel for the page:

public List MenuItems { get; } = new List();

MenuItems.Add(new MenuItemViewModel {
    Name = "Sales and Expense",
    ImageUrl = "salesicon.png"
});
MenuItems.Add(new MenuItemViewModel {
    Name = "Personnel",
    ImageUrl = "personnelicon.png"
});
...

Then in your XAML something like this:

Then set ItemsSource of the ListView to your MenuItems from your ViewModel.

You can get the selected item by subscribing to ItemSelected on the ListView:

MenuList.ItemSelected += ItemSelected;

private async void ItemSelected(object sender, ItemTappedEventArgs e)
{
    var menuItem = e.Item as MenuItemViewModel;
    if (menuItem == null) return;

    Page nextPage = null;
    switch(menuItem.Name)
    {
         case "Sales and Expense":
            nextPage = new SalesAndExpensePage();
            break;
         case "Personnel":
            nextPage = new PersonnelPage();
            break;
    }

    await Navigation.PushModalAsync(nextPage);
}

Adjusting UI for different platforms

Answers (1)

Related Questions