How to navigate fast when UI has many elements? - windows-phone-7

I'm developing a Windows Phone 7 app. In my main page, there is a pivot which has 6 PivotItem. In each of these PivotItems are a ListBox which has many texts and images.
When I navigate from main page to Page 1, it takes very long time (about 5-8s). The heavier UI on main page, the longer it takes.
I cannot reduce the elements on main page, so what is the advice to go to Page 1 fast ?

Collapse the root element of pivot items that are not currently visible, and make them visible when they are brought into view. Most likely you are keeping the UI thread arranging and drawing UI elements that are not visible.
This will allow you to monitor memory and graphics performance
Application.Current.Host.Settings.EnableFrameRateCounter = true;
How to interpret FrameRateCounter

Related

Flutter performance

I created an app that uses bottom navigation (3 pages).
the first and second page have a lot of buttons on them (approx. 20 to 30 Elevated buttons). the last page is a game that runs on a do..while loop with 4 buttons and at least 10 textviews that change dynamically.
I added page transition animations (sliding between bottom navigation views) and the issue I am running into is a small delay between transitions and I suspect it is due to the amount of buttons that need to be rebuilt every time I transition. Each page is a stateful widget. I use PageView and PageController.
I am asking for advice on how I can improve my apps performance while keeping all my buttons...
I added const on all my widgets (i.e Text, Icon and textstyle), I feel that it improved my performance a little...
Anymore suggestions?
Thank you in advanced!!

Animating page navigation in WP 8.1 while the current page stays still

In WP 8.1 Store app, how can I change page animation upon navigating to another page within the frame such that the current page stays still while the new page is animating on top of it by moving from the top of the screen to the bottom?
I'm currently animating my navigation like so:
protected override void OnNavigatedTo(NavigationEventArgs e)
{
Frame.ContentTransitions = new TransitionCollection
{
new PaneThemeTransition{Edge = EdgeTransitionLocation.Top}
};
}
But this is animating both pages by moving the current one from bottom to top while the second one simultaneously moves from top to bottom. I'm also seeing a black background while the pages are moving for screen area that's not occupied by any content.
You unfortunately can not navigate to a different page and keep the previous page visible during the animation. That is why all page Transitions right now only support an In-Transition and an Out-Transition. We discussed the issue with Microsoft developers during this years //Build so I'm certain of this information.
If you really need that effect you can perhaps achieve it using a workaround. Instead of placing your content on separate pages you would create user controls and animate those while staying on a single page. This however can be a little tricky due to you manually having to manage "navigation" between the user controls instead of having the system deal with it for regular pages.
More information on how to implement animations in Windows Phone Silverlight Apps can be found in this article: http://msdn.microsoft.com/en-us/library/windows/apps/jj206955%28v=vs.105%29.aspx
I had a similar problem a while ago and it is kind of a workaround as well but it might do the trick for you.
You can place a Frame object taking all the available space on your current page. Then, instead of navigating from your current Page Frame, you navigate from the Frame object you put on top of your actual page.
The problem with this approach is that you would really "get rid" of the first page.
But this can work for you, or at least give you another insight of the problem.

How to determine why longlistselector takes too long to render

I have three longlistselector within a pivot control.
Each longlistselector has between 10-20 items.
When I navigate back to the page that displays the pivot + longlistselector, the page takes about 3 seconds to render on a Nokia Lumia with 512 MB.
I took a performance analysis within Visual Studio 2013 and noticed that a frame had about 85% CPU utilization. Digging into the visual tree showed ~70% rendering time for the item presenter of the pivot. This is then split up to 35%, 16%, 20% for each of the LongListSelectors within the pivot control.
When I expand the ItemPresenter, I can see the LongListSelector consuming most of the time. Below, I can see "ContentPresenter" and Canvas which also take the time.
I took a Memory analysis for the same but the tool could not find anything suspicious there.
How can I check what exactly takes so long to re-render a page which was previously displayed?
I had the same issue, and it appears to simply be that the LongListSelector has to re-render the contents of your view model when it returns. The only way I could find to improve the situation was to un-hook the ItemSource property of the LLS in the page "OnNavigatedTo" method, and then re-hook it back up programatically in the page "OnLoaded" event (see below for an example)
Unhook:
MyLongListSelectorControl.ItemsSource = null;
Recreate:
Binding ItemSourceBinding = new Binding("MyDataProperty");
MyLongListSelectorControl.SetBinding(LongListSelector.ItemsSourceProperty, ItemSourceBinding);
Note that the "MyDataProperty" can be exactly the text you used to bind in XAML.
This way the page at least can visually render completely with some kind of "loading" indicator and then the longlist selector will be populated afterwards, giving the illusion of the app responding perfectly.

Scroll page whist designing app for windows phone

I am designing a windows phone app in visual studio, and the data it contains is huge, which makes it to occupy large space of the page. How I can scroll the page in design view so I can add controls and so on on the bottom.
I welcome any kind of help.
Thanks.
Reduce the number of data items?
Set the top margin in a way that the whole container goes outside of scope but on the top, not on the bottom, and then just reset it when you're done.

Which is better, some grids collapsed or some user controls?

I'm developing a Windows Phone 7 application that uses some Transient content.
To avoid to go back to that transient content I've decided to use a phew page with several grids on the same page.
When I have to show another "page" I set to collapsed current grid and then I set to visible desired grid.
I know this can be done using user control, but I'm not sure if using user controls can be slowest that using Grids. Any advice?
And another question is if I use grids, how can I use page transitions?
Another option for when you want to show transient content is to use a Popup control. This won't appear in the navigation stack, so when a user goes back (<-) they won't see this content.
However, Popup content isnt GPU accelerated, so you only want to display simple content, no animations etc...
If you want page transitions etc... then i think your only option is to use Pages. That way you can do the transitions and the back button works as expected.
It doesn't matter if you do this via user controls or grids - what matters speed wise is the complexity of your layout.
A user control may be better if you are doing this on a number of pages so you don't repeat yourself.
One way to do page transitions is to do it with stack panels. Have the second "hidden" stack panel way off to the right so it is off screen then animate it in.

Resources