Menu Close

WP7 Tips: ­adding ­a ­progress ­overlay to ­a page


When creating Windows Phone Application there will be times where a certain task will take a long time to complete. In these cases, it’s practise to show a progress indicator to the user to provide feedback on the running task. This is also mentioned in the UI Design guidelines (available here)


There are two types of process indicator:

  • Determinate – fixed amount of time/data
  • Indeterminate – unknown amount of time/data
In this example I’m going to quickly show you how to add a progess overlay to a screen when loading data from a webservice (twitter search service).
Firstly, create a usercontrol called “ucProgress” and use this xaml:

<UserControl x:Class="OverlayExample.Controls.ucProgress"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="480" d:DesignWidth="480">

    <Grid x:Name="LayoutRoot" Background="Transparent" Width="480" Height="800">
        <Rectangle x:Name="backgroundRect" Grid.Row="0" Fill="{StaticResource PhoneChromeBrush}" Opacity="0.75"/>
        <StackPanel x:Name="stackPanel" Orientation="Vertical" VerticalAlignment="Center">
            <toolkit:PerformanceProgressBar Name="pbTwitter"
      IsIndeterminate="True" Foreground="{StaticResource PhoneAccentBrush}" />
            <TextBlock Opacity="1" Height="30" HorizontalAlignment="Center" VerticalAlignment="Center"
                  Name="textBlockStatus" Text="Loading..." />

Then add the following code behind:

 public partial class ucProgress : UserControl
        internal Popup ChildWindowPopup
            private set;

        public ucProgress()

        public void Show()
            if (this.ChildWindowPopup == null)
                this.ChildWindowPopup = new Popup();

                    this.ChildWindowPopup.Child = this;
                catch (ArgumentException)
                    throw new InvalidOperationException("The control is already shown.");

            if (this.ChildWindowPopup != null &amp;&amp; Application.Current.RootVisual != null)
                // Show popup
                this.ChildWindowPopup.IsOpen = true;

        public void Hide()
            this.ChildWindowPopup.IsOpen = false;

To use the control on any page, firstly add a property using the following code:

  private ucProgress _Progress;
        private ucProgress Progress
                if (_Progress == null)
                    _Progress = new ucProgress();
                return _Progress;

There use the following code to show and hide the progress control:


And that’s pretty much it, you can download the source code for this example here : OverlayExample

In part 2, I shall look at using the Progress Indicator available in the SystemTray

Posted in Mobile Development, News

Leave a Reply

Your email address will not be published. Required fields are marked *