windows store app page blank when navigating to it

Question

I have 3 pages in my application.

First page: 5 Button s, each navigates to different page (currently, only the first button works).

Second page: Back Button and ListView , the ListViewItems are UserControlItems with Button , Image and TextBlock . When you click on the Button (of the UserControlItem ) it Navigates to the third page, which is Media Player Page with alot of controls.

Third page: Media Player page with alot of controls such as MediaElement , Slider , Button s and more

When I navigate from Third Page to Second Page using the Back Button , sometimes the screen stays black (the color of the theme) and sometimes it loads too much time. In addition, the ListView has visible vertical scrollbar (always) which is not shown unless you move your mouse on the ListView .

How to fix these problems?

EDIT 1:
link to my project - put some .wmv/.mp3/.mp4 files in the Videos Library folder.

EDIT 2:
I investigated the black page issue abit more and I found that the MediaElement is the cause.
The MediaElement stores the stream and it slows the computer.

In order to resolve to problem, when you click on the GoBack Button , it first set the source of the MediaElement to null, and only when the MediaElementState == Closed, I go back - seems to solve my problem (since I applied the solution I didnt experience more black screens).

About the scrollbar - I think I'll be able to solve it if I simulate MouseOver over the ListView - no idea how to do it

Answer 1

Ok Ill List out the issue one by one.

List View Scroll Bar : Since we are developing for a potential touch surface so scrollbars are not meant to be visible every time.

Blank Page : When you press the back button then Big page Ie third page gets stored in the forward navigation property of the history element. Additionally all the resources that were being used in the third page is disposed. So the time taken to go to second page becomes huge.

Please try havig a fourth page which will have less controls. And see if any Black background issue is occuring or not. It will give a better and clear picture.

--- Update Code for permanent visibility of scroll bar---

Please download the code for listview styling from

Listview styles

add your code to the project

and replace all FadeOutAnimation By FadeInAnimation.

This was the quickest I could do for a solution. For a Better one you can always play with the styles.

Ohh one more thing please add

 Style="{StaticResource    ListViewStyle1}" 

To your list view. please try and let me know.