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，第二张图片是Android。

Answer 1

首先。您的视图非常嵌套，这可能会导致性能问题。

其次。您说您正在使用ListView。但是，我在XAML中的任何地方都看不到它。那里你只是使用StackLayout并将视图堆叠在彼此之下。

这意味着根本不会显示任何不适合屏幕的项目。考虑重写UI并使用ListView。您的项目彼此非常相似，只有标题，图像和点击处理程序彼此不同。使用ListView也可以像现在使用所有那些点击处理程序一样消除重复，并且你可以限制自己只有一个。

你可以这样：

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

然后在页面的ViewModel中：

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

然后在你的XAML中这样：

<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>

然后从ViewModel将ListView的ItemsSource设置为MenuItems。

您可以通过订阅ListView上的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);
}

调整不同平台的用户界面

1 个答案: