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 && 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
