[英]Display text while Page is loading in Xamarin Forms
I have a page that is quite heavy and its loading for about 1-2 sec after click. 我的页面相当沉重,点击后其加载时间约为1-2秒。 During this time I see loading page header and old page content, it looks so irresponsive.
在这段时间里,我看到正在加载页面标题和旧页面内容,这看起来反应迟钝。 All I want to achive is to display temporary Label with content like "Loading..." or activityindicator as long as new page is loading but I have no idea how to do this.
我想要实现的是只要新页面正在加载,就显示带有“ Loading ...”或activityindicator之类的内容的临时Label,但是我不知道该怎么做。 What is the better way to achive this?
实现此目的的更好方法是什么? Thanks in advance
提前致谢
Based on your comments, you just want to display Busy indicator while you are loading the Data from your Api. 根据您的评论,您只想在从Api加载数据时显示“忙碌”指示器。 You didn't posted your UI but I hope you understand how to use the below:
您尚未发布用户界面,但希望您了解如何使用以下内容:
<Grid>
<YOUR-UI>
.....
.........
</YOUR-UI>
<ActivityIndicator VerticalOptions="Center" IsVisible="{Binding IsBusy}" IsRunning="{Binding IsBusy}"/>
</Grid>
In your ViewModel, Add IsBusy Property as below: 在您的ViewModel中,添加IsBusy属性,如下所示:
private bool _isBusy;
public bool IsBusy
{
get{return _isBusy;}
set { _isBusy=value; RaisePropertyChanged(); }
}
Then when you are Calling the API to load your Data do something like: 然后,当您调用API加载数据时,请执行以下操作:
public async void LoadDataFromApi()
{
IsBusy=true; //Show the Indicator
var response= await YourService.Method(); //this is where you calling your api
//do other stuffs if you need to do;
IsBusy=false; //Hide the Indicator
}
Let me know if you need anymore help. 让我知道您是否需要更多帮助。
Based on your comments on other answer - instead of ActivityIndicator - you could use a simple frame that covers all the layout and make it visible only when data are loading ie Binding IsVisible
to IsBusy
property. 根据您对其他答案的评论-而不是ActivityIndicator-您可以使用一个简单的框架来覆盖所有布局,并使其仅在加载数据时可见,
IsBusy
IsVisible
绑定到IsBusy
属性。 Then set IsBusy
to true before doing the heavy load job and set back to false afterwards as shown in previous answer. 然后,在执行重负载工作之前将
IsBusy
设置为true,然后如先前的答案所示将其设置为false。
For instance, assuming your UI is based on a Grid layout (in this example 3 rows/2 columns): 例如,假设您的UI基于网格布局(在此示例中为3行/ 2列):
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- Some XAML for the grid content -->
<!-- Here, Frame covers all the possible space defined using RowSpan/ColumnSpan -->
<Frame Grid.RowSpan="3" Grid.ColumnSpan="2" IsVisible="{Binding IsBusy}" BackgroundColor="LightGray">
<Label VerticalOptions="Center" HorizontalOptions="Center" Text="Loading Samples..." />
</Frame>
</Grid>
Bases on the code you provided (better paste it in SO next time ;)), you could try this: 根据您提供的代码(下次最好将其粘贴到SO中),您可以尝试以下操作:
Add a grid layout and a frame to the xaml page: 将网格布局和框架添加到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="MyApp.Namespace"
xmlns:tabView="clr-namespace:Syncfusion.XForms.TabView;assembly=Syncfusion.SfTabView.XForms"
xmlns:sfPopup="clr-namespace:Syncfusion.XForms.PopupLayout;assembly=Syncfusion.SfPopupLayout.XForms"
BackgroundColor="#d4d4d4">
<ContentPage.ToolbarItems>
<ToolbarItem Icon="search_white_90.png"/>
</ContentPage.ToolbarItems>
<ContentPage.Content>
<Grid>
<tabView:SfTabView x:Name="ProductsTabView" VisibleHeaderCount="3" TabHeaderBackgroundColor="#A74B40" Items="{Binding}">
<tabView:SfTabView.SelectionIndicatorSettings>
<tabView:SelectionIndicatorSettings
Color="#fff" StrokeThickness="3"/>
</tabView:SfTabView.SelectionIndicatorSettings>
</tabView:SfTabView>
<Frame x:Name="theFrame" BackgroundColor="White">
<Label VerticalOptions="Center" HorizontalOptions="Center" Text="Loading Samples..." />
</Frame>
</Grid>
</ContentPage.Content>
</ContentPage>
ProductsTabView
and theFrame
will cover the same space on screen and frame will be available in code behind. ProductsTabView
和theFrame
将在屏幕上覆盖相同的空间,并且框架将在后面的代码中提供。 Then you can show/hide theFrame before/afrer the hard work using IsVisible
property: 然后,您可以使用
IsVisible
属性在先/后显示/隐藏theFrame,然后再进行以下工作:
public partial class ProviderPage : ContentPage
{
public ProviderPage()
{
InitializeComponent();
theFrame.IsVisible = true; // Show the Frame on top of tabView
ProductsTabView.Items = GetTabItemCollection();
theFrame.IsVisible = false; // Hide the Frame
}
...
As a side note, you don't use ViewModel
at all. 附带说明,您根本不使用
ViewModel
。 I strongly recommand you to check about what a ViewModel is and how to use them with MVVM pattern. 我强烈建议您检查一下ViewModel是什么以及如何将它们与MVVM模式一起使用。 It will make your life easier in the long run using
Binding
! 这将使使用从长远来看,你的生活更轻松
Binding
!
HIH & Happy coding! 嗨,祝您编码愉快!
Try https://github.com/aritchie/userdialogs , It's make you easily to implement loading 试试https://github.com/aritchie/userdialogs ,这使您轻松实现加载
for example: 例如:
using (this.Dialogs.Loading("Loading text"))
{
//Do something i.e: await Task.Delay(3000);
}
OR 要么
this.Dialogs.ShowLoading("Loading text");
//Do something i.e: await Task.Delay(3000);
this.Dialogs.HideLoading();
OR https://github.com/aritchie/userdialogs/blob/master/src/Samples/Samples/ViewModels/ProgressViewModel.cs 或https://github.com/aritchie/userdialogs/blob/master/src/Samples/Samples/ViewModels/ProgressViewModel.cs
I have a project for advanced page transitions in Xamarin.Forms that may help you. 我在Xamarin.Forms中有一个用于高级页面转换的项目,可能会对您有所帮助。 Try this:
尝试这个:
DoWork
method of SpinnerSegue
add the code to load the data. SpinnerSegue
的DoWork
方法中,添加代码以加载数据。 Navigiation.PushAsync(new MyNewPage())
with new SpinnerSegue().ExecuteAsync(this, new MyNewPage())
Navigiation.PushAsync(new MyNewPage())
替换为new SpinnerSegue().ExecuteAsync(this, new MyNewPage())
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.