WaitingBar - Usage tutorial

To start using WaitingBar for WP7 follow these steps:

1. Install Bee Mobile Metropolis to your computer.
2. Start Visual Studio 2010 and create a new project of type Windows Phone Application. You will find it in Silverlight for Windows Phone category.
3. Browse to the installation folder on your hard drive.
4. Read the AddControlsToToolbox.pdf file located in it to find out how to add Metropolis components to Toolbox of your Visual Studio.
5. Double-click WaitingBar from the Toolbox to make it appear on your page:
   

   WaitingBar in design-time

Explanation of properties

WaitingBar control inherits from System.Windows.Controls.UserControl object; therefore it contains all its methods and properties. Following is a table of properties which we added. They are split into 3 categories: Appearance, Text and Wheel.

A simple example

In this chapter we will show you how to set-up WaitingBar in a simple particular scenario. Let’s say your application performs background operations every now and then during which you want to display WaitingBar to the user. Because you are creating the application for your company, why not to put a tiny advertising into your app by showing your company’s logo each time WaitingBar appears. We will use this logo in this tutorial:

You can download it from this web site to follow the tutorial or you can use your own.

1. Put WaitingBar on your page.
2. Set its size to 320×135.
3. Set HorizontalAlignment and VerticalAlignment to Center.
4. In WaitingBar Appearance category, set RadiusX and RadiusY properties to 40 and set Stroke to Transparent.
5. In WaitingBar Appearance – Text category set empty string to Text property.
6. In Background Appearance – Wheel category set the following properties according to this table:

   WheelBorderColor	Transparent
   WheelFillColor	Yellow
   WheelHeight	22
   WheelHorizontalAlignment	Left
   WheelIndicator	#FFFFA900
   WheelMargin	10,0,5,0
   WheelSpeed	100
   WheelVerticalAlignment	Center
   WheelWidth	6

7. From the toolbox drag and drop Image GUI element on your page and over WaitingBar.
8. Set its Source property to your logo image.
9. Set Stretch property to None.
10. Set HorizontalAlignment and VerticalAlignment to Center.
11. Use Margin property to set margins of your Image so that it does not overlap with the wheel indicator. For Bee Mobile logo image we used this value for Margin property: 40,0,0,0

Your page will now look similar to this:

Set Visibility property for WaitingBar and Image to Collapsed. Put a button on your form. The button will server simply as the source of event which will display WaitingBar. However, in your scenario, that event would likely be the start of a lengthy background operation (data download). Finally we will add two methods to our page – Show() and Hide() which will show and hide WaitingBar whenever they are called.

private void Show()
{
  waitingBar1.Show();
  beeLogo.Visibility = System.Windows.Visibility.Visible;
}

private void Hide()
{
  beeLogo.Visibility = System.Windows.Visibility.Collapsed;
  waitingBar1.Hide();
}

// your button click event handler may look like this:
private void vistaButton1_Click(object sender, RoutedEventArgs e)
{
  if (waitingBar1.Visibility == System.Windows.Visibility.Collapsed)
    Show();
  else
    Hide();
  UpdateText();
}

// the UpdateText method is simple:
private void UpdateText()
{
  if (waitingBar1.Visibility == System.Windows.Visibility.Visible)
    vistaButton1.Text = "Hide";
  else
    vistaButton1.Text = "Show";
}

This concludes the tutorial for WaitingBar control. If you have any questions, ideas, suggestions or recommendations about this tutorial, please write us an email to support@beemobile4.net. Thank you.