異なるプラットフォームのUIを調整する

Question

私はVisual Studio 2015を使用してXamarin.Forms（Portable）を開発しています。 このアプリケーションでは、データベースから情報を取得して表示できます。

作成したすべてのレコードをUWPのListViewに表示することができます。しかし、Androidでは、すべてが表示されているわけではありません。

私のメニューページからは、UIサイズの大きな違いがはっきりと分かります。なぜAndroidプラットフォームでこれが起こっているのか不思議です。

以下は、関連するコードの一部です。もっと見る必要がある場合は、私に知らせてください。

MenuPage.xaml

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="XamarinFormsDemo.Views.MenuPage" 
    BackgroundImage="bg3.jpg"> 

    <StackLayout> 
     <StackLayout Orientation="Vertical" 
      Padding="30" 
      HeightRequest="30" 
      BackgroundColor="#24e97d"> 
      <Image Source="ebmspersonnellogo1.png" 
       HeightRequest="40"/> 
     </StackLayout> 

     <StackLayout Orientation="Vertical" 
      VerticalOptions="Center" 
      Padding="45,60,45,60"> 

      <Image x:Name="sales" 
       Source="salesicon.png"> 

       <Image.GestureRecognizers> 
       <TapGestureRecognizer 
        Tapped="SalesTapGestureRecognizer_OnTapped" 
        NumberOfTapsRequired="1" /> 
       </Image.GestureRecognizers> 
      </Image> 

      <Image x:Name="personnel" 
       Source="personnelicon.png"> 
       <Image.GestureRecognizers> 
        <TapGestureRecognizer 
         Tapped="PersonnelTapGestureRecognizer_OnTapped" 
         NumberOfTapsRequired="1" /> 
       </Image.GestureRecognizers> 
      </Image> 

      <Image x:Name="crm" 
       Source="crmicon.png"> 
       <Image.GestureRecognizers> 
        <TapGestureRecognizer 
         Tapped="CRMTapGestureRecognizer_OnTapped" 
         NumberOfTapsRequired="1" /> 
       </Image.GestureRecognizers> 
      </Image> 

      <Image x:Name="asset" 
       Source="asseticon.png"> 
       <Image.GestureRecognizers> 
        <TapGestureRecognizer 

          Tapped="AssetTapGestureRecognizer_OnTapped" 
          NumberOfTapsRequired="1" /> 
       </Image.GestureRecognizers> 
      </Image> 

      <Image x:Name="receivables" 
       Source="receivables.png"> 
       <Image.GestureRecognizers> 
        <TapGestureRecognizer 
         Tapped="ReceivablesTapGestureRecognizer_OnTapped" 
         NumberOfTapsRequired="1" /> 
       </Image.GestureRecognizers> 
      </Image> 

      <Image x:Name="prapprovals" 
       Source="prapprovals.png"> 
       <Image.GestureRecognizers> 
        <TapGestureRecognizer 
         Tapped="ApprovalsTapGestureRecognizer_OnTapped" 
         NumberOfTapsRequired="1" /> 
       </Image.GestureRecognizers> 
      </Image> 
     </StackLayout> 

     <StackLayout Orientation="Vertical" 
      Padding="30,10,30,10" 
      HeightRequest="20" 
      BackgroundColor="#24e97d" 
      VerticalOptions="Center" 
      Opacity="0.5"> 
      <Label Text="© Copyright 2015 smesoft.com.ph All Rights Reserved " 
       HorizontalTextAlignment="Center" 
       VerticalOptions="Center" 
       HorizontalOptions="Center" /> 
     </StackLayout> 
    </StackLayout> 
</ContentPage> 

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()); 
     } 
    } 
} 

ここUWPとAndroidのスクリーンショットです。最初の画像はUWP、2番目の画像はAndroidです。

Answer 1

まず第一に。あなたのビューはひどくネストされているため、パフォーマンスの問題が発生する可能性があります。

あなたはListViewを使用していると言っている。しかし、私はあなたのXAMLのどこにも表示されません。そこではStackLayoutを使用してお互いの下にビューを積み重ねています。

これは、画面に収まらない項目はまったく表示されないことを意味します。代わりにUIを書き換え、リストビューを使用することを検討してください。あなたの商品はお互いに非常によく似ていて、タイトル、画像、クリックハンドラだけが異なっています。 ListViewを使用すると、すべてのこれらのタップハンドラーで現在のように自分自身を繰り返す必要がなくなり、自分自身に制限することができます。

あなたはこのようなものかもしれない：ページのためのあなたのViewModelに続いて

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

を：あなたのXAMLで次に

public List<MenuItemViewModel> MenuItems { get; } = new List<MenuItemViewModel>(); 

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

このような何か：次に設定

<ListView x:Name="MenuList"> 
    <ListView.ItemTemplate> 
    <DataTemplate> 
     <ViewCell> 
     <StackLayout Padding="15,0"> 
      <Label Text="{Binding Name}" /> 
      <Image Source="{Binding ImageUrl}" /> 
     </StackLayout> 
     </ViewCell> 
    </DataTemplate> 
    </ListView.ItemTemplate> 
</ListView> 

をListViewのItemsSourceをViewModelからMenuItemsに転送します。

あなたはリストビューにItemSelectedに加入することにより、選択した項目を取得することができます：

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); 
}