延迟导航到包含 3 个列表视图的页面
delay with the navigation to a page contains 3 listviews
我是 Xamarin.Forms 的新手，所以请原谅。我正在开发一个使用导航页面的应用程序，应用程序主页包含 3 个水平列表视图，每次我导航到另一个页面然后 returns 到主页应用程序挂起大约一分钟再次重新创建所有列表。
我尝试将列表创建功能放在 On-Appearing 功能上，但加载页面仍然很慢
这是主页的代码
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
xmlns:listview="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:button="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
xmlns:rotator="clr-namespace:Syncfusion.SfRotator.XForms;assembly=Syncfusion.SfRotator.XForms"
xmlns:ListCollection="clr-namespace:System.Collections.Generic;assembly=mscorlib"
xmlns:rating="clr-namespace:Syncfusion.SfRating.XForms;assembly=Syncfusion.SfRating.XForms"
x:Class="GDG6OCT.Views.HomePage"
NavigationPage.HasNavigationBar="False"
FlowDirection="RightToLeft">
<StackLayout>
<ScrollView>
<StackLayout Padding="0">
<rotator:SfRotator x:Name="rotator" HorizontalOptions="FillAndExpand" NavigationDelay="2000" EnableLooping="True"
DotPlacement="None" EnableAutoPlay="true" HeightRequest="160">
<rotator:SfRotator.DataSource>
<ListCollection:List x:TypeArguments="rotator:SfRotatorItem">
<rotator:SfRotatorItem>
<rotator:SfRotatorItem.ItemContent>
<Image Source="slider.png" Margin="0"/>
</rotator:SfRotatorItem.ItemContent>
</rotator:SfRotatorItem>
<rotator:SfRotatorItem>
<rotator:SfRotatorItem.ItemContent>
<Image Source="slider.png" Margin="0"/>
</rotator:SfRotatorItem.ItemContent>
</rotator:SfRotatorItem>
<rotator:SfRotatorItem>
<rotator:SfRotatorItem.ItemContent>
<Image Source="slider.png" Margin="0"/>
</rotator:SfRotatorItem.ItemContent>
</rotator:SfRotatorItem>
</ListCollection:List>
</rotator:SfRotator.DataSource>
</rotator:SfRotator>
<Label Text="جميع الاقسام" HorizontalOptions="StartAndExpand" Margin="20,30,20,0"
Style="{StaticResource MainLabel}"/>
<listview:SfListView x:Name="CatList" Margin="10,0" ItemSize="100"
ItemSpacing="5" Orientation="Horizontal" HeightRequest="100">
<listview:SfListView.ItemTemplate>
<DataTemplate>
<button:SfButton HasShadow="True" BackgroundColor="{Binding BackgroudColor}"
Text="{Binding Name}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"
FontAttributes="Bold" FontFamily="{StaticResource Second}" Clicked="SfButton_Clicked"
FontSize="11"/>
</DataTemplate>
</listview:SfListView.ItemTemplate>
</listview:SfListView>
<Label Text="أحدث المقررات الدراسية" HorizontalOptions="StartAndExpand" Margin="20,20,20,0"
Style="{StaticResource MainLabel}"/>
<Grid>
<!--<busyindicator:SfBusyIndicator x:Name="busyIndicator1" InputTransparent="True" Grid.Row="0"
AnimationType="Gear "
IsBusy="True"
TextColor="#343694"
ViewBoxWidth="50"
ViewBoxHeight="50" />-->
<listview:SfListView x:Name="CourseList" Margin="10,0" ItemSize="100"
ItemSpacing="4" Orientation="Horizontal" HeightRequest="180">
<listview:SfListView.ItemTemplate>
<!--<DataTemplate>
<Image Source="{Binding CourseImage}">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</Image.GestureRecognizers>
</Image>
</DataTemplate>-->
<DataTemplate>
<Frame CornerRadius="2"
BorderColor="Transparent"
BackgroundColor="Transparent"
Padding="0">
<StackLayout>
<Frame HasShadow="True" Padding="0" CornerRadius="0" BackgroundColor="Transparent">
<Image Source="{Binding Pro_IMG}" WidthRequest="30" HeightRequest="80" Aspect="AspectFill"/>
</Frame>
<Label Text="{Binding Pro_Name}" FontAttributes="Bold" HorizontalOptions="Start"
FontSize="14" TextColor="Black" FontFamily="{StaticResource Second}"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="Start">
<rating:SfRating x:Name="rating" Value="5" ItemCount="5" ItemSize="10"
ItemSpacing="1" HorizontalOptions="Center"
VerticalOptions="Center">
<rating:SfRating.RatingSettings>
<rating:SfRatingSettings RatedFill="#f4bd01" RatedStrokeWidth="0" UnRatedStrokeWidth="1" />
</rating:SfRating.RatingSettings>
</rating:SfRating>
<Label Text="{Binding Rating, StringFormat='({0})'}" FontFamily="{StaticResource Second}"
VerticalOptions="Center" FontSize="8" HorizontalOptions="Center"/>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Grid.Row="3" Grid.ColumnSpan="2" Text="{Binding Pro_Price, StringFormat='{0}EGP'}" TextColor="Gray"
HorizontalOptions="StartAndExpand" FontSize="6" VerticalTextAlignment="Center"
FontFamily="{StaticResource Second}" TextDecorations="Strikethrough"/>
<Label Text="{Binding numberInStock, StringFormat='{0}EGP'}" HorizontalOptions="End" Margin="8,0,0,0" FontFamily="{StaticResource Second}" TextColor="Red"
FontAttributes="Bold" VerticalTextAlignment="Center" FontSize="8"/>
</StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
</StackLayout.GestureRecognizers>
</StackLayout>
</Frame>
</DataTemplate>
</listview:SfListView.ItemTemplate>
</listview:SfListView>
</Grid>
<Label Text="المقررات الدراسية الاشهر" HorizontalOptions="StartAndExpand" Margin="20,20,20,0"
Style="{StaticResource MainLabel}"/>
<Grid>
<!--<busyindicator:SfBusyIndicator x:Name="busyIndicator1" InputTransparent="True" Grid.Row="0"
AnimationType="Gear "
IsBusy="True"
TextColor="#343694"
ViewBoxWidth="50"
ViewBoxHeight="50" />-->
<listview:SfListView x:Name="CourseList1" Margin="10,0" ItemSize="100"
ItemSpacing="4" Orientation="Horizontal" HeightRequest="180">
<listview:SfListView.ItemTemplate>
<DataTemplate>
<Frame CornerRadius="2"
BorderColor="Transparent"
BackgroundColor="Transparent"
Padding="0">
<StackLayout>
<Frame HasShadow="True" Padding="0" CornerRadius="0" BackgroundColor="Transparent">
<Image Source="{Binding Pro_IMG}" WidthRequest="30" HeightRequest="80" Aspect="AspectFill"/>
</Frame>
<Label Text="{Binding Pro_Name}" FontAttributes="Bold" HorizontalOptions="Start"
FontSize="14" TextColor="Black" FontFamily="{StaticResource Second}"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="Start">
<rating:SfRating x:Name="rating" Value="5" ItemCount="5" ItemSize="10"
ItemSpacing="1" HorizontalOptions="Center"
VerticalOptions="Center">
<rating:SfRating.RatingSettings>
<rating:SfRatingSettings RatedFill="#f4bd01" RatedStrokeWidth="0" UnRatedStrokeWidth="1" />
</rating:SfRating.RatingSettings>
</rating:SfRating>
<Label Text="{Binding Rating, StringFormat='({0})'}" FontFamily="{StaticResource Second}"
VerticalOptions="Center" FontSize="8" HorizontalOptions="Center"/>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Grid.Row="3" Grid.ColumnSpan="2" Text="{Binding Pro_Price, StringFormat='{0}EGP'}" TextColor="Gray"
HorizontalOptions="StartAndExpand" FontSize="6" VerticalTextAlignment="Center"
FontFamily="{StaticResource Second}" TextDecorations="Strikethrough"/>
<Label Text="{Binding numberInStock, StringFormat='{0}EGP'}" HorizontalOptions="End" Margin="8,0,0,0" FontFamily="{StaticResource Second}" TextColor="Red"
FontAttributes="Bold" VerticalTextAlignment="Center" FontSize="8"/>
</StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
</StackLayout.GestureRecognizers>
</StackLayout>
</Frame>
</DataTemplate>
</listview:SfListView.ItemTemplate>
</listview:SfListView>
</Grid>
<Label Text="المقررات الدراسية المقترحة" HorizontalOptions="StartAndExpand" Margin="20,20,20,0"
Style="{StaticResource MainLabel}"/>
<Grid>
<!--<busyindicator:SfBusyIndicator x:Name="busyIndicator1" InputTransparent="True" Grid.Row="0"
AnimationType="Gear "
IsBusy="True"
TextColor="#343694"
ViewBoxWidth="50"
ViewBoxHeight="50" />-->
<listview:SfListView x:Name="CourseList2" Margin="10,0" ItemSize="100"
ItemSpacing="4" Orientation="Horizontal" HeightRequest="180">
<listview:SfListView.ItemTemplate>
<DataTemplate>
<Frame CornerRadius="2"
BorderColor="Transparent"
BackgroundColor="Transparent"
Padding="0">
<StackLayout>
<Frame HasShadow="True" Padding="0" CornerRadius="0" BackgroundColor="Transparent">
<Image Source="{Binding Pro_IMG}" WidthRequest="30" HeightRequest="80" Aspect="AspectFill"/>
</Frame>
<Label Text="{Binding Pro_Name}" FontAttributes="Bold" HorizontalOptions="Start"
FontSize="14" TextColor="Black" FontFamily="{StaticResource Second}"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="Start">
<rating:SfRating x:Name="rating" Value="5" ItemCount="5" ItemSize="10"
ItemSpacing="1" HorizontalOptions="Center"
VerticalOptions="Center">
<rating:SfRating.RatingSettings>
<rating:SfRatingSettings RatedFill="#f4bd01" RatedStrokeWidth="0" UnRatedStrokeWidth="1" />
</rating:SfRating.RatingSettings>
</rating:SfRating>
<Label Text="{Binding Rating, StringFormat='({0})'}" FontFamily="{StaticResource Second}"
VerticalOptions="Center" FontSize="8" HorizontalOptions="Center"/>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Grid.Row="3" Grid.ColumnSpan="2" Text="{Binding Pro_Price, StringFormat='{0}EGP'}" TextColor="Gray"
HorizontalOptions="StartAndExpand" FontSize="6" VerticalTextAlignment="Center"
FontFamily="{StaticResource Second}" TextDecorations="Strikethrough"/>
<Label Text="{Binding numberInStock, StringFormat='{0}EGP'}" HorizontalOptions="End" Margin="8,0,0,0" FontFamily="{StaticResource Second}" TextColor="Red"
FontAttributes="Bold" VerticalTextAlignment="Center" FontSize="8"/>
</StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
</StackLayout.GestureRecognizers>
</StackLayout>
</Frame>
</DataTemplate>
</listview:SfListView.ItemTemplate>
</listview:SfListView>
</Grid>
</StackLayout>
</ScrollView>
<Grid Padding="0" ColumnSpacing="-15" BackgroundColor="{StaticResource DGrey}"
VerticalOptions="EndAndExpand" HorizontalOptions="Fill"
HeightRequest="65" Margin="0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="65"/>
</Grid.RowDefinitions>
<Button Grid.Column="0" BackgroundColor="#ef3e42" Image="home1.png" TextColor="White"
Text="الرئيسية" ContentLayout="Top,1" FontSize="11" FontFamily="{StaticResource Second}"/>
<Button Grid.Column="1" Clicked="GotoSearchPage" TextColor="White" BackgroundColor="Transparent"
Image="search1.png" FontFamily="{StaticResource Second}"
Text="البحث" ContentLayout="Top, 5" FontSize="10"/>
<Button Grid.Column="2" TextColor="White" BackgroundColor="Transparent"
Image="play.png" FontFamily="{StaticResource Second}" Clicked="GotoMCoursesPage"
Text="كورساتى" ContentLayout="Top, 5" FontSize="10"/>
<Button Grid.Column="3" TextColor="White" BackgroundColor="Transparent" Image="fav2.png" Text="المفضلة" Clicked="GotoFavPage"
FontFamily="{StaticResource Second}" ContentLayout="Top, 5" FontSize="10"/>
<Button Grid.Column="4" TextColor="White" BackgroundColor="Transparent" FontFamily="{StaticResource Second}" Clicked="GotoAccPage"
Image="pers1.png" Text="الحساب" ContentLayout="Top, 5" FontSize="10"/>
</Grid>
</StackLayout>
</ContentPage>
这是后端代码
using GDG6OCT.Models;
using Syncfusion.XForms.Buttons;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace GDG6OCT.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class HomePage : ContentPage
{
public ObservableCollection<Category> Categories = new ObservableCollection<Category>();
public ObservableCollection<Course> Courses = new ObservableCollection<Course>();
public HomePage ()
{
InitializeComponent ();
}
protected override void OnAppearing()
{
creatList();
base.OnAppearing();
}
void creatList()
{
Categories.Add(new Category { Name = "إذاعة", BackgroudColor = Color.Purple });
Categories.Add(new Category { Name = "صحافة إعلام", BackgroudColor = Color.Orange });
Categories.Add(new Category { Name = "نظم معلومات", BackgroudColor = Color.Green });
Categories.Add(new Category { Name = "سياحة وفنادق", BackgroudColor = Color.Pink });
Categories.Add(new Category { Name = "إذاعة ", BackgroudColor = Color.Yellow });
Categories.Add(new Category { Name = "الصحافة والاعلام", BackgroudColor = Color.Red });
Categories.Add(new Category { Name = "نظم معلومات ", BackgroudColor = Color.Purple });
Categories.Add(new Category { Name = "الصحافة", BackgroudColor = Color.Orange });
Categories.Add(new Category { Name = "سياحة وفنادق ", BackgroudColor = Color.Green });
CatList.ItemsSource = Categories;
Courses.Add(new Course { Pro_IMG = "Featured.jpg", Pro_Name = "تقنيات إعلامية", numberInStock = 2000, Pro_Price = "2500", Rating = 13.5f });
Courses.Add(new Course { Pro_IMG = "Featured.jpg", Pro_Name = "علم النفس العام", numberInStock = 2000, Pro_Price = "2500", Rating = 13.5f });
Courses.Add(new Course { Pro_IMG = "Featured.jpg", Pro_Name = "مدخل الى فن الإعلام", numberInStock = 2000, Pro_Price = "2500", Rating = 13.5f });
Courses.Add(new Course { Pro_IMG = "Featured.jpg", Pro_Name = "تقنيات إعلامية", numberInStock = 2000, Pro_Price = "2500", Rating = 13.5f });
Courses.Add(new Course { Pro_IMG = "Featured.jpg", Pro_Name = "علم النفس العام", numberInStock = 2000, Pro_Price = "2500", Rating = 13.5f });
Courses.Add(new Course { Pro_IMG = "Featured.jpg", Pro_Name = "مدخل الى فن الإعلام", numberInStock = 2000, Pro_Price = "2500", Rating = 13.5f });
CourseList.ItemsSource = Courses;
CourseList1.ItemsSource = Courses;
CourseList2.ItemsSource = Courses;
}
private void GotoSearchPage(object sender, EventArgs e)
{
Navigation.PushAsync(new SearchPage());
}
private void GotoMCoursesPage(object sender, EventArgs e)
{
Navigation.PushAsync(new MyCrsPage());
}
private void GotoFavPage(object sender, EventArgs e)
{
Navigation.PushAsync(new FavPage());
}
private void GotoAccPage(object sender, EventArgs e)
{
Navigation.PushAsync(new AccPage());
}
private async void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
var itemT = (Course)((StackLayout)sender).BindingContext;
CatList.SelectedItem = null;
await Navigation.PushAsync(new CoursePage(itemT));
}
private async void SfButton_Clicked(object sender, EventArgs e)
{
var itemT = (Category)((SfButton)sender).BindingContext;
CatList.SelectedItem = null;
await Navigation.PushAsync(new CategPage(itemT));
}
}
}
更新
我使用 Grid 而不是嵌套的 stackLayout 重写了列表视图的 dataTemplate 并稍微清理了代码
<DataTemplate>
<Grid ColumnSpacing="0" RowSpacing="0" Padding="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2.5*"/>
<RowDefinition Height="1.2*"/>
<RowDefinition Height="0.4*"/>
<RowDefinition Height="0.4*"/>
</Grid.RowDefinitions>
<Frame Grid.Row="0" Grid.ColumnSpan="2" HasShadow="True" Padding="0" BackgroundColor="Transparent">
<Image Source="{Binding Pro_IMG}" Aspect="AspectFill"/>
</Frame>
<Label Grid.Row="1" Grid.ColumnSpan="2" Text="{Binding Pro_Name}" FontAttributes="Bold"
FontSize="14" TextColor="Black" FontFamily="{StaticResource Second}"/>
<rating:SfRating Grid.Row="2" Grid.Column="0" x:Name="rating" Value="5" ItemCount="5" ItemSize="9"
ItemSpacing="1" VerticalOptions="Center">
<rating:SfRating.RatingSettings>
<rating:SfRatingSettings RatedFill="#f4bd01" RatedStrokeWidth="0" UnRatedStrokeWidth="1" />
</rating:SfRating.RatingSettings>
</rating:SfRating>
<Label Grid.Row="2" Grid.Column="1" Text="{Binding Rating, StringFormat='({0})'}" FontFamily="{StaticResource Second}"
FontSize="8" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
<Label Grid.Row="3" Grid.Column="0" Text="{Binding Pro_Price, StringFormat='{0}EGP'}" TextColor="Gray"
HorizontalOptions="StartAndExpand" FontSize="6" VerticalTextAlignment="Center"
FontFamily="{StaticResource Second}" TextDecorations="Strikethrough"/>
<Label Grid.Row="3" Grid.Column="1" Text="{Binding numberInStock, StringFormat='{0}EGP'}" HorizontalOptions="End"
FontFamily="{StaticResource Second}" TextColor="Red" Margin="8,0,0,0"
FontAttributes="Bold" VerticalTextAlignment="Center" FontSize="8"/>
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
</Grid.GestureRecognizers>
</Grid>
</DataTemplate>
您真的需要重新创建列表吗？
如果您将新页面压入堆栈，那么在弹出时，您的主页仍然处于活动状态，因此无需重新创建视图。
如果你愿意，你可以有一个 bool 指示是否加载了项目，然后，OnAppearing 将只加载一次项目。
示例：
private bool _loadedItems=false;
public HomePage ()
{
InitializeComponent ();
}
protected override void OnAppearing()
{
base.OnAppearing();
if(!_loadedItems)
{
creatList();
_loadedItems = true;
}
}
我强烈建议重新考虑您的布局。
首先，一个屏幕上的所有三个列表视图在用户体验方面并不是最理想的，尤其是在屏幕较小的设备上。
如果在您的应用程序要求范围内可行，我建议使用 TabbedPage，每个 ListView 在它自己的选项卡中可用。
接下来，很抱歉这么说，但就性能而言，您在 ListView 单元格中使用的布局是一个糟糕的选择。 StackLayout 需要更多的布局周期才能确定其最终尺寸，据我所知，您将其中的四个堆叠到一个单元格中，更糟糕的是，一个 StackLayout 包含其他单元格。
这需要相当多的布局周期，直到 xamarin 布局引擎最终计算出那个 ONE(!) 视图单元格的最终大小并且该时间乘以 ListView 的 ItemsSource 中的项目数 属性.
那么你能做些什么呢？你可以很容易地用一个网格替换你的堆栈布局树（专业提示：不要在行和列 height/width 定义中使用 "Auto"，因为这也会花费更多的布局周期，“*”或“ 2* ” 等应该做得很好）。
选择适当数量的列和行来显示您的数据，并将所有控件、图像、标签等作为该网格的子项放置，然后使用 Grid.Row、Grid.Column、Grid.RowSpan 和 Grid.ColumnSpan 用于这些元素，以便将它们放入所需位置。
这种方式会为您节省一些布局周期，因此您的视图应该准备好比现在更快地显示，尤其是因为这些优化减少的布局周期也会成倍增加数据量，但这次对你有利！
我是 Xamarin.Forms 的新手，所以请原谅。我正在开发一个使用导航页面的应用程序，应用程序主页包含 3 个水平列表视图，每次我导航到另一个页面然后 returns 到主页应用程序挂起大约一分钟再次重新创建所有列表。
我尝试将列表创建功能放在 On-Appearing 功能上，但加载页面仍然很慢
这是主页的代码
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
xmlns:listview="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:button="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
xmlns:rotator="clr-namespace:Syncfusion.SfRotator.XForms;assembly=Syncfusion.SfRotator.XForms"
xmlns:ListCollection="clr-namespace:System.Collections.Generic;assembly=mscorlib"
xmlns:rating="clr-namespace:Syncfusion.SfRating.XForms;assembly=Syncfusion.SfRating.XForms"
x:Class="GDG6OCT.Views.HomePage"
NavigationPage.HasNavigationBar="False"
FlowDirection="RightToLeft">
<StackLayout>
<ScrollView>
<StackLayout Padding="0">
<rotator:SfRotator x:Name="rotator" HorizontalOptions="FillAndExpand" NavigationDelay="2000" EnableLooping="True"
DotPlacement="None" EnableAutoPlay="true" HeightRequest="160">
<rotator:SfRotator.DataSource>
<ListCollection:List x:TypeArguments="rotator:SfRotatorItem">
<rotator:SfRotatorItem>
<rotator:SfRotatorItem.ItemContent>
<Image Source="slider.png" Margin="0"/>
</rotator:SfRotatorItem.ItemContent>
</rotator:SfRotatorItem>
<rotator:SfRotatorItem>
<rotator:SfRotatorItem.ItemContent>
<Image Source="slider.png" Margin="0"/>
</rotator:SfRotatorItem.ItemContent>
</rotator:SfRotatorItem>
<rotator:SfRotatorItem>
<rotator:SfRotatorItem.ItemContent>
<Image Source="slider.png" Margin="0"/>
</rotator:SfRotatorItem.ItemContent>
</rotator:SfRotatorItem>
</ListCollection:List>
</rotator:SfRotator.DataSource>
</rotator:SfRotator>
<Label Text="جميع الاقسام" HorizontalOptions="StartAndExpand" Margin="20,30,20,0"
Style="{StaticResource MainLabel}"/>
<listview:SfListView x:Name="CatList" Margin="10,0" ItemSize="100"
ItemSpacing="5" Orientation="Horizontal" HeightRequest="100">
<listview:SfListView.ItemTemplate>
<DataTemplate>
<button:SfButton HasShadow="True" BackgroundColor="{Binding BackgroudColor}"
Text="{Binding Name}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"
FontAttributes="Bold" FontFamily="{StaticResource Second}" Clicked="SfButton_Clicked"
FontSize="11"/>
</DataTemplate>
</listview:SfListView.ItemTemplate>
</listview:SfListView>
<Label Text="أحدث المقررات الدراسية" HorizontalOptions="StartAndExpand" Margin="20,20,20,0"
Style="{StaticResource MainLabel}"/>
<Grid>
<!--<busyindicator:SfBusyIndicator x:Name="busyIndicator1" InputTransparent="True" Grid.Row="0"
AnimationType="Gear "
IsBusy="True"
TextColor="#343694"
ViewBoxWidth="50"
ViewBoxHeight="50" />-->
<listview:SfListView x:Name="CourseList" Margin="10,0" ItemSize="100"
ItemSpacing="4" Orientation="Horizontal" HeightRequest="180">
<listview:SfListView.ItemTemplate>
<!--<DataTemplate>
<Image Source="{Binding CourseImage}">
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</Image.GestureRecognizers>
</Image>
</DataTemplate>-->
<DataTemplate>
<Frame CornerRadius="2"
BorderColor="Transparent"
BackgroundColor="Transparent"
Padding="0">
<StackLayout>
<Frame HasShadow="True" Padding="0" CornerRadius="0" BackgroundColor="Transparent">
<Image Source="{Binding Pro_IMG}" WidthRequest="30" HeightRequest="80" Aspect="AspectFill"/>
</Frame>
<Label Text="{Binding Pro_Name}" FontAttributes="Bold" HorizontalOptions="Start"
FontSize="14" TextColor="Black" FontFamily="{StaticResource Second}"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="Start">
<rating:SfRating x:Name="rating" Value="5" ItemCount="5" ItemSize="10"
ItemSpacing="1" HorizontalOptions="Center"
VerticalOptions="Center">
<rating:SfRating.RatingSettings>
<rating:SfRatingSettings RatedFill="#f4bd01" RatedStrokeWidth="0" UnRatedStrokeWidth="1" />
</rating:SfRating.RatingSettings>
</rating:SfRating>
<Label Text="{Binding Rating, StringFormat='({0})'}" FontFamily="{StaticResource Second}"
VerticalOptions="Center" FontSize="8" HorizontalOptions="Center"/>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Grid.Row="3" Grid.ColumnSpan="2" Text="{Binding Pro_Price, StringFormat='{0}EGP'}" TextColor="Gray"
HorizontalOptions="StartAndExpand" FontSize="6" VerticalTextAlignment="Center"
FontFamily="{StaticResource Second}" TextDecorations="Strikethrough"/>
<Label Text="{Binding numberInStock, StringFormat='{0}EGP'}" HorizontalOptions="End" Margin="8,0,0,0" FontFamily="{StaticResource Second}" TextColor="Red"
FontAttributes="Bold" VerticalTextAlignment="Center" FontSize="8"/>
</StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
</StackLayout.GestureRecognizers>
</StackLayout>
</Frame>
</DataTemplate>
</listview:SfListView.ItemTemplate>
</listview:SfListView>
</Grid>
<Label Text="المقررات الدراسية الاشهر" HorizontalOptions="StartAndExpand" Margin="20,20,20,0"
Style="{StaticResource MainLabel}"/>
<Grid>
<!--<busyindicator:SfBusyIndicator x:Name="busyIndicator1" InputTransparent="True" Grid.Row="0"
AnimationType="Gear "
IsBusy="True"
TextColor="#343694"
ViewBoxWidth="50"
ViewBoxHeight="50" />-->
<listview:SfListView x:Name="CourseList1" Margin="10,0" ItemSize="100"
ItemSpacing="4" Orientation="Horizontal" HeightRequest="180">
<listview:SfListView.ItemTemplate>
<DataTemplate>
<Frame CornerRadius="2"
BorderColor="Transparent"
BackgroundColor="Transparent"
Padding="0">
<StackLayout>
<Frame HasShadow="True" Padding="0" CornerRadius="0" BackgroundColor="Transparent">
<Image Source="{Binding Pro_IMG}" WidthRequest="30" HeightRequest="80" Aspect="AspectFill"/>
</Frame>
<Label Text="{Binding Pro_Name}" FontAttributes="Bold" HorizontalOptions="Start"
FontSize="14" TextColor="Black" FontFamily="{StaticResource Second}"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="Start">
<rating:SfRating x:Name="rating" Value="5" ItemCount="5" ItemSize="10"
ItemSpacing="1" HorizontalOptions="Center"
VerticalOptions="Center">
<rating:SfRating.RatingSettings>
<rating:SfRatingSettings RatedFill="#f4bd01" RatedStrokeWidth="0" UnRatedStrokeWidth="1" />
</rating:SfRating.RatingSettings>
</rating:SfRating>
<Label Text="{Binding Rating, StringFormat='({0})'}" FontFamily="{StaticResource Second}"
VerticalOptions="Center" FontSize="8" HorizontalOptions="Center"/>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Grid.Row="3" Grid.ColumnSpan="2" Text="{Binding Pro_Price, StringFormat='{0}EGP'}" TextColor="Gray"
HorizontalOptions="StartAndExpand" FontSize="6" VerticalTextAlignment="Center"
FontFamily="{StaticResource Second}" TextDecorations="Strikethrough"/>
<Label Text="{Binding numberInStock, StringFormat='{0}EGP'}" HorizontalOptions="End" Margin="8,0,0,0" FontFamily="{StaticResource Second}" TextColor="Red"
FontAttributes="Bold" VerticalTextAlignment="Center" FontSize="8"/>
</StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
</StackLayout.GestureRecognizers>
</StackLayout>
</Frame>
</DataTemplate>
</listview:SfListView.ItemTemplate>
</listview:SfListView>
</Grid>
<Label Text="المقررات الدراسية المقترحة" HorizontalOptions="StartAndExpand" Margin="20,20,20,0"
Style="{StaticResource MainLabel}"/>
<Grid>
<!--<busyindicator:SfBusyIndicator x:Name="busyIndicator1" InputTransparent="True" Grid.Row="0"
AnimationType="Gear "
IsBusy="True"
TextColor="#343694"
ViewBoxWidth="50"
ViewBoxHeight="50" />-->
<listview:SfListView x:Name="CourseList2" Margin="10,0" ItemSize="100"
ItemSpacing="4" Orientation="Horizontal" HeightRequest="180">
<listview:SfListView.ItemTemplate>
<DataTemplate>
<Frame CornerRadius="2"
BorderColor="Transparent"
BackgroundColor="Transparent"
Padding="0">
<StackLayout>
<Frame HasShadow="True" Padding="0" CornerRadius="0" BackgroundColor="Transparent">
<Image Source="{Binding Pro_IMG}" WidthRequest="30" HeightRequest="80" Aspect="AspectFill"/>
</Frame>
<Label Text="{Binding Pro_Name}" FontAttributes="Bold" HorizontalOptions="Start"
FontSize="14" TextColor="Black" FontFamily="{StaticResource Second}"/>
<StackLayout Orientation="Horizontal" HorizontalOptions="Start">
<rating:SfRating x:Name="rating" Value="5" ItemCount="5" ItemSize="10"
ItemSpacing="1" HorizontalOptions="Center"
VerticalOptions="Center">
<rating:SfRating.RatingSettings>
<rating:SfRatingSettings RatedFill="#f4bd01" RatedStrokeWidth="0" UnRatedStrokeWidth="1" />
</rating:SfRating.RatingSettings>
</rating:SfRating>
<Label Text="{Binding Rating, StringFormat='({0})'}" FontFamily="{StaticResource Second}"
VerticalOptions="Center" FontSize="8" HorizontalOptions="Center"/>
</StackLayout>
<StackLayout Orientation="Horizontal">
<Label Grid.Row="3" Grid.ColumnSpan="2" Text="{Binding Pro_Price, StringFormat='{0}EGP'}" TextColor="Gray"
HorizontalOptions="StartAndExpand" FontSize="6" VerticalTextAlignment="Center"
FontFamily="{StaticResource Second}" TextDecorations="Strikethrough"/>
<Label Text="{Binding numberInStock, StringFormat='{0}EGP'}" HorizontalOptions="End" Margin="8,0,0,0" FontFamily="{StaticResource Second}" TextColor="Red"
FontAttributes="Bold" VerticalTextAlignment="Center" FontSize="8"/>
</StackLayout>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
</StackLayout.GestureRecognizers>
</StackLayout>
</Frame>
</DataTemplate>
</listview:SfListView.ItemTemplate>
</listview:SfListView>
</Grid>
</StackLayout>
</ScrollView>
<Grid Padding="0" ColumnSpacing="-15" BackgroundColor="{StaticResource DGrey}"
VerticalOptions="EndAndExpand" HorizontalOptions="Fill"
HeightRequest="65" Margin="0" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="65"/>
</Grid.RowDefinitions>
<Button Grid.Column="0" BackgroundColor="#ef3e42" Image="home1.png" TextColor="White"
Text="الرئيسية" ContentLayout="Top,1" FontSize="11" FontFamily="{StaticResource Second}"/>
<Button Grid.Column="1" Clicked="GotoSearchPage" TextColor="White" BackgroundColor="Transparent"
Image="search1.png" FontFamily="{StaticResource Second}"
Text="البحث" ContentLayout="Top, 5" FontSize="10"/>
<Button Grid.Column="2" TextColor="White" BackgroundColor="Transparent"
Image="play.png" FontFamily="{StaticResource Second}" Clicked="GotoMCoursesPage"
Text="كورساتى" ContentLayout="Top, 5" FontSize="10"/>
<Button Grid.Column="3" TextColor="White" BackgroundColor="Transparent" Image="fav2.png" Text="المفضلة" Clicked="GotoFavPage"
FontFamily="{StaticResource Second}" ContentLayout="Top, 5" FontSize="10"/>
<Button Grid.Column="4" TextColor="White" BackgroundColor="Transparent" FontFamily="{StaticResource Second}" Clicked="GotoAccPage"
Image="pers1.png" Text="الحساب" ContentLayout="Top, 5" FontSize="10"/>
</Grid>
</StackLayout>
</ContentPage>
这是后端代码
using GDG6OCT.Models;
using Syncfusion.XForms.Buttons;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace GDG6OCT.Views
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class HomePage : ContentPage
{
public ObservableCollection<Category> Categories = new ObservableCollection<Category>();
public ObservableCollection<Course> Courses = new ObservableCollection<Course>();
public HomePage ()
{
InitializeComponent ();
}
protected override void OnAppearing()
{
creatList();
base.OnAppearing();
}
void creatList()
{
Categories.Add(new Category { Name = "إذاعة", BackgroudColor = Color.Purple });
Categories.Add(new Category { Name = "صحافة إعلام", BackgroudColor = Color.Orange });
Categories.Add(new Category { Name = "نظم معلومات", BackgroudColor = Color.Green });
Categories.Add(new Category { Name = "سياحة وفنادق", BackgroudColor = Color.Pink });
Categories.Add(new Category { Name = "إذاعة ", BackgroudColor = Color.Yellow });
Categories.Add(new Category { Name = "الصحافة والاعلام", BackgroudColor = Color.Red });
Categories.Add(new Category { Name = "نظم معلومات ", BackgroudColor = Color.Purple });
Categories.Add(new Category { Name = "الصحافة", BackgroudColor = Color.Orange });
Categories.Add(new Category { Name = "سياحة وفنادق ", BackgroudColor = Color.Green });
CatList.ItemsSource = Categories;
Courses.Add(new Course { Pro_IMG = "Featured.jpg", Pro_Name = "تقنيات إعلامية", numberInStock = 2000, Pro_Price = "2500", Rating = 13.5f });
Courses.Add(new Course { Pro_IMG = "Featured.jpg", Pro_Name = "علم النفس العام", numberInStock = 2000, Pro_Price = "2500", Rating = 13.5f });
Courses.Add(new Course { Pro_IMG = "Featured.jpg", Pro_Name = "مدخل الى فن الإعلام", numberInStock = 2000, Pro_Price = "2500", Rating = 13.5f });
Courses.Add(new Course { Pro_IMG = "Featured.jpg", Pro_Name = "تقنيات إعلامية", numberInStock = 2000, Pro_Price = "2500", Rating = 13.5f });
Courses.Add(new Course { Pro_IMG = "Featured.jpg", Pro_Name = "علم النفس العام", numberInStock = 2000, Pro_Price = "2500", Rating = 13.5f });
Courses.Add(new Course { Pro_IMG = "Featured.jpg", Pro_Name = "مدخل الى فن الإعلام", numberInStock = 2000, Pro_Price = "2500", Rating = 13.5f });
CourseList.ItemsSource = Courses;
CourseList1.ItemsSource = Courses;
CourseList2.ItemsSource = Courses;
}
private void GotoSearchPage(object sender, EventArgs e)
{
Navigation.PushAsync(new SearchPage());
}
private void GotoMCoursesPage(object sender, EventArgs e)
{
Navigation.PushAsync(new MyCrsPage());
}
private void GotoFavPage(object sender, EventArgs e)
{
Navigation.PushAsync(new FavPage());
}
private void GotoAccPage(object sender, EventArgs e)
{
Navigation.PushAsync(new AccPage());
}
private async void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
var itemT = (Course)((StackLayout)sender).BindingContext;
CatList.SelectedItem = null;
await Navigation.PushAsync(new CoursePage(itemT));
}
private async void SfButton_Clicked(object sender, EventArgs e)
{
var itemT = (Category)((SfButton)sender).BindingContext;
CatList.SelectedItem = null;
await Navigation.PushAsync(new CategPage(itemT));
}
}
}
更新
我使用 Grid 而不是嵌套的 stackLayout 重写了列表视图的 dataTemplate 并稍微清理了代码
<DataTemplate>
<Grid ColumnSpacing="0" RowSpacing="0" Padding="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2.5*"/>
<RowDefinition Height="1.2*"/>
<RowDefinition Height="0.4*"/>
<RowDefinition Height="0.4*"/>
</Grid.RowDefinitions>
<Frame Grid.Row="0" Grid.ColumnSpan="2" HasShadow="True" Padding="0" BackgroundColor="Transparent">
<Image Source="{Binding Pro_IMG}" Aspect="AspectFill"/>
</Frame>
<Label Grid.Row="1" Grid.ColumnSpan="2" Text="{Binding Pro_Name}" FontAttributes="Bold"
FontSize="14" TextColor="Black" FontFamily="{StaticResource Second}"/>
<rating:SfRating Grid.Row="2" Grid.Column="0" x:Name="rating" Value="5" ItemCount="5" ItemSize="9"
ItemSpacing="1" VerticalOptions="Center">
<rating:SfRating.RatingSettings>
<rating:SfRatingSettings RatedFill="#f4bd01" RatedStrokeWidth="0" UnRatedStrokeWidth="1" />
</rating:SfRating.RatingSettings>
</rating:SfRating>
<Label Grid.Row="2" Grid.Column="1" Text="{Binding Rating, StringFormat='({0})'}" FontFamily="{StaticResource Second}"
FontSize="8" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
<Label Grid.Row="3" Grid.Column="0" Text="{Binding Pro_Price, StringFormat='{0}EGP'}" TextColor="Gray"
HorizontalOptions="StartAndExpand" FontSize="6" VerticalTextAlignment="Center"
FontFamily="{StaticResource Second}" TextDecorations="Strikethrough"/>
<Label Grid.Row="3" Grid.Column="1" Text="{Binding numberInStock, StringFormat='{0}EGP'}" HorizontalOptions="End"
FontFamily="{StaticResource Second}" TextColor="Red" Margin="8,0,0,0"
FontAttributes="Bold" VerticalTextAlignment="Center" FontSize="8"/>
<Grid.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
</Grid.GestureRecognizers>
</Grid>
</DataTemplate>
您真的需要重新创建列表吗？
如果您将新页面压入堆栈，那么在弹出时，您的主页仍然处于活动状态，因此无需重新创建视图。
如果你愿意，你可以有一个 bool 指示是否加载了项目，然后，OnAppearing 将只加载一次项目。
示例：
private bool _loadedItems=false;
public HomePage ()
{
InitializeComponent ();
}
protected override void OnAppearing()
{
base.OnAppearing();
if(!_loadedItems)
{
creatList();
_loadedItems = true;
}
}
我强烈建议重新考虑您的布局。 首先，一个屏幕上的所有三个列表视图在用户体验方面并不是最理想的，尤其是在屏幕较小的设备上。
如果在您的应用程序要求范围内可行，我建议使用 TabbedPage，每个 ListView 在它自己的选项卡中可用。
接下来，很抱歉这么说，但就性能而言，您在 ListView 单元格中使用的布局是一个糟糕的选择。 StackLayout 需要更多的布局周期才能确定其最终尺寸，据我所知，您将其中的四个堆叠到一个单元格中，更糟糕的是，一个 StackLayout 包含其他单元格。
这需要相当多的布局周期，直到 xamarin 布局引擎最终计算出那个 ONE(!) 视图单元格的最终大小并且该时间乘以 ListView 的 ItemsSource 中的项目数 属性.
那么你能做些什么呢？你可以很容易地用一个网格替换你的堆栈布局树（专业提示：不要在行和列 height/width 定义中使用 "Auto"，因为这也会花费更多的布局周期，“*”或“ 2* ” 等应该做得很好）。
选择适当数量的列和行来显示您的数据，并将所有控件、图像、标签等作为该网格的子项放置，然后使用 Grid.Row、Grid.Column、Grid.RowSpan 和 Grid.ColumnSpan 用于这些元素，以便将它们放入所需位置。
这种方式会为您节省一些布局周期，因此您的视图应该准备好比现在更快地显示，尤其是因为这些优化减少的布局周期也会成倍增加数据量，但这次对你有利！