×
Namespaces

Variants
Actions

How to create a modal wait screen with spinner on Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to how to show customized progress bar or wait screen in Windows Phone by overlaying a semi-transparent screen with an animated spinner.

WP Metro Icon UI.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleCompatibilityArticle
Created: munjalrohit (16 Sep 2013)
Last edited: hamishwillee (15 Oct 2013)

Introduction

Apps on occasion need to wait for an activity to complete, for example getting a response from Web service. Windows Phone provides a default ProgressBar class which is useful in many cases.

This article explains how to create a customised wait screen using a spinner. The screen is implemented as a semi-transparent page with an animated spinner. If it is necessary that the UI can take other input while the wait screen is displayed, this approach would not be suitable.

Implementation

The implementation is provided by overlaying the screen with a grid (that displays an animated spinner). The grid is initially collapsed, has an opacity of 60%, and a Z-index greater than the rest of the page definition. When it is expanded its Z order means that it overlays the main screen, and its opacity means that the underlying "main screen" appears disabled (and is, since all events go to the overlaying grid).

Below is the code for the WaitGrid:

<Grid x:Name="Waitgrid" Grid.Row="0" Visibility="Collapsed"  Grid.RowSpan="2" Background="Black" Opacity="0.6">
<Ellipse Fill="{StaticResource PhoneForegroundBrush}" Height="50" Width="50" Canvas.ZIndex="100" Margin="10,10">
<Ellipse.OpacityMask>
<ImageBrush ImageSource="/Images/Spinner.png" Stretch="Uniform"/>
</Ellipse.OpacityMask>
<Ellipse.RenderTransform>
<RotateTransform x:Name="SpinningRotateTransform"
CenterX="25"
CenterY="25" />
</Ellipse.RenderTransform>
</Ellipse>
</Grid>

The animation for moving spinner image is shown in the code snippet below

<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="SpinningAnimation">
<DoubleAnimation AutoReverse="False"
Duration="0:0:1"
From="0"
RepeatBehavior="Forever"
Storyboard.TargetName="SpinningRotateTransform"
Storyboard.TargetProperty="Angle"
To="360" />
</Storyboard>
</phone:PhoneApplicationPage.Resources>

For this example I use a timer with a 5 second delay. The same approach can be used for waiting for a response from Web service.

The code below shows the timer controlling the grid visibility.

public partial class MainPage : PhoneApplicationPage
{
DispatcherTimer timer = new DispatcherTimer { Interval = TimeSpan.FromSeconds(5) };
 
DateTime PStartTime = DateTime.MinValue;
 
// Constructor
public MainPage()
{
InitializeComponent();
 
// Sample code to localize the ApplicationBar
//BuildLocalizedApplicationBar();
}
 
private void btnLogin_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
//Write here code for displaying till the result not come from Web service.
 
this.SpinningAnimation.Begin();
Waitgrid.Visibility = Visibility.Visible;
 
timer.Tick += timer_Tick;
timer.Start();
 
}
 
void timer_Tick(object sender, EventArgs e)
{
timer.Stop();
this.SpinningAnimation.Stop();
Waitgrid.Visibility = Visibility.Collapsed;
}
 
}

The full code can be found in the sample code here: File:CustomizedWaitScreen.zip

This page was last modified on 15 October 2013, at 09:29.
421 page views in the last 30 days.