我正在使用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。
答案 0 :(得分:5)
首先。您的视图非常嵌套,这可能会导致性能问题。
其次。您说您正在使用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);
}