Menu Close

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

by bugail.com

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"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    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..." />
        </StackPanel>
    </Grid>
</UserControl>

Then add the following code behind:


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

        public ucProgress()
        {
            InitializeComponent();
        }

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

                try
                {
                    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
        {
            get
            {
                if (_Progress == null)
                {
                    _Progress = new ucProgress();
                }
                return _Progress;
            }
        }

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


Progress.Show();
Progress.Hide();

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 e-mail address will not be published. Required fields are marked *