Windows Phone Navigate Progress Indicator - windows-phone-7

I am currently having problem with my Windows Phone 7 app. I have two pages:
- First contains checkbox and button to navigate to next page
- Second contains some controls with data that take about 3 seconds to load
So basically what happens now if user presses a button on first screen, it takes 3 seconds to navigate to second screen. I would like to add ProgressIndicator during this navigation process, but it dissapears, so it looks like i need to await navigation to the page. Can someone propose a way how can i do it:
prog.IsVisible = true;
prog.IsIndeterminate = true;
SystemTray.SetProgressIndicator(this, prog);
NavigationService.Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
SystemTray.ProgressIndicator.IsVisible = false;

You shouldn't place the progress indicator on the page you are navigating from, but rather on the page you are navigating to. So override OnNavigatedTo in the destination page and show indicator there.
Also, what is the source of this slowness? Is the page heavy with controls? Are you loading something from storage/internet? You should do that asynchronously if you aren't already.

Related

Place a timer in a Xamarin Carousel page

I would like to place a timer in a Xamarin Forms carousel page, to make the 'swipe' happen automatically if the user does nothing.
Being new to Xamarin I'm not entirely sure if I can do this as I would outwith Xamarin, by creating a System.Timer in code-behind.
The auto swipe should happen after 3 seconds, and swipe through the carousel at 3 second intervals.
Can anyone tell me if this is a viable approach?
Solved it by using:
Device.StartTimer(TimeSpan.FromSeconds(3), () =>
{
// run swipe code
Task.WaitAll(_scvm.MoveNext());
return true;
});
After the InitialzeComponent() line

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 make a seamless transition between WP7 splashscreen and first page with same splashscreen

I'm developing a Windows Phone application. When I launch, the splash screen is shown very shortly, and the MainPage.xaml is shown. However, in the MainPage, I setup the camera with the usual code:
if (PhotoCamera.IsCameraTypeSupported(CameraType.Primary))
{
_photoCamera.Initialized += OnCameraInitialized;
// And other event handling
viewfinderBrush.SetSource(_photoCamera);
}
This is simplified, but it all works. My problem is that this takes a while (mabye 0.5 - 1 seconds, I didn't time it exactly).
So what my user gets is a splashscreen that's so fast, he/she can't see it; and a first page that takes just that tiny fraction to experience it as slightly laggy/slow.
I'd like to change it. Have the splashscreen show until everything is initialized. This has the added benefit of branding for me, and a nice experience for the user.
I've tried this:
Add my splashscreen as image into my MainPage, on top of everything else and hide it when everything is initialized
Add my splashscreen in a popup on my MainPage, and hide the popup when everything is initialized (found that here)
This 'works', but I can see a black flash between the splashscreen and my image/popup. Is there a way to make this transition seamless? Or is this fairly normal behavior in WP7?
Your first option should work - but understand that in one trip through a UI-thread method, the UI doesn't actually update until all the code is executed. So break it up into pieces.
1) Load your MainPage.xaml, which has the splash image filling the screen by default
2) Add an event handler for both OnNavigatedTo and LayoutUpdated. When OnNavigatedTo is hit, set a flag to true. In LayoutUpdated, check for that flag to be true, set the flag to false, then run a Dispatcher.Invoke() call on the method you described above.
3) Remove the image or set it to collapsed after that method is completed.

Page animation with visual feedback on drag gesture

I was wondering, I'm currently using a slide in and out page transition when the user presses a Next of Previous button on the appbar.
( concept: going through a set of articles inside a selected category )
This all looks great, I'm also able add the drag / flick gesture listeners to trigger this page transition... so no problems there.
But now I wanted to add the final part, when the user starts the drag / flick gesture, show this visually so that the page follows the gesture and 'slides' out of frame.
But how to do this? An example would be great :)
But there is also a small extra thing, I don't want the user to always do a full drag... so if we are over 2/3 of the screen, auto start the page transition IF the gesture stops ( so the user lifts up his finger )
So I would like to create a nice reading experience that shows the gesture visualy and performs the page transition...
You can check the following link: https://stackoverflow.com/a/9915016/1565574
In the ManipulationCompleted you'll be able to detect the GestureType and take an action there.
And I found that link: https://stackoverflow.com/a/4342558/1565574 (using the GestureService)
I first started with the DragFlickBehavior from #LocalJoost and it actually worked great!
But in the end I switched to a headerless pivot! Works also great!

Control the VerticalOffset of a webbrowser in windows phone

I am using the webbrowser to show some string with a appbar-button. When I click the button, the webbrowser will NavigateTo another string. Everything goes well except that once the webbrowser is scrolled down(When the user is reading the end of a article), when the button clicked, the webbrowser is still at the bottom, the user has to scroll the webbrowser up.
So, before the new article is loaded, I want to set the verticaloffset of the webbrowser to zero. But there is no scrollviewer in the webbrowser, so I can't use the ScrollToVerticalOffset method.
would anyone know how to Control the VerticalOffset of a webbrowser?
Thanks.
You can do this via InvokeScript, which allows you to invoke JavaScript within your page. If you add the following JavaScript function:
function setVerticalScrollPosition(position) {
document.body.scrollTop = position;
}
Then invoke the following (C#)
this.webBrowser.InvokeScript("setVerticalScrollPosition", this.vScrollPos.Text);
Your browser control should scroll (courtesy of this blog post)

Resources