In our last post, I explained how to create a microphone for Windows Phone 7. In this blog, I want to share a sample that will help you to create a custom indeterminate progress bar for Windows Phone 7. You can create an indeterminate progress bar that runs on the UI thread, but that can impact the performance of your application. In this sample, I will demonstrate how to create an indeterminate progress bar that runs on the composite thread, rather than the UI thread, for better performance.
I will now demonstrate how easy it is to create a custom indeterminate progress bar application for Windows Phone 7, using Visual Basic for Windows Phone Developer Tools. The custom indeterminate progress bar application can be created in 3 simple steps:
- Create a sample application and add controls and an event handler
- Build and debug the application
- Rebuild in the release mode before publishing
Before you create a custom indeterminate progress bar application, you need to install the following applications:
- Visual Studio 2010 Professional, Premium,
or Ultimate. If you do not have any of the releases, you can download any of
the following trial versions as per your preference: Professional, Premium, or Ultimate.
- Windows Phone Developer Tools
- Visual Basic
for Windows Phone Developer Tools – RTW
Note: You can install the newer version- Windows Phone Developer Tools 7.1 Beta
instead of the above mentioned two tools as it will take comparatively
less time. However, this sample was created using the previous version.
To create the custom indeterminate progress bar application, let’s follow the 3 simple steps mentioned earlier:
Step 1 – Create a sample application and add controls and an event handler
Create a sample application
- Create a new project and browse to the “Silverlight for Windows Phone” node.
- Select the “Windows Phone Application” template.
- Enter a name for the application.
- Click OK. The MainPage.xaml page is displayed.
- Click the MY APPLICATION text. In the Properties window, change the text property to “CUSTOM INDETERMINATE PROGRESS BAR”.
- Click the page name text. In the Properties window, change the text property to “progress bar”.
- From the toolbox, drag and drop the Button control to the design surface.
- Click the Button control. In the Properties window, change the content property to “Toggle ProgressBar”.
- From the toolbox, drag and drop the ProgressBar control to the design surface.
- Add the following XAML code to set the Style and IsIndeterminate properties of the ProgressBar control:
- To add the CustomIndeterminateProgressBar style, open the App.xaml page. In the <Application> tag, add the following XAML code:
- In the <Application.Resources> tag, add the following XAML code:
Your application now looks like this:
Add an event handler
It is essential to add an event handler to the application because it determines the visibility of the progress bar.
To add an event handler:
- Double-click the Toggle ProgressBar button. The MainPage.xaml.vb page is displayed with the following code:
- Add the following namespace at the beginning of the code:
- Replace the Button1_Click event handler with the following code.
Voila! Now your custom indeterminate progress bar application for Windows Phone 7 is ready! You just need to build and debug the application.
Step 2 – Build and debug the application
- Select Build > Build Solution. The project should build without any errors. If there are errors, check the earlier steps, correct the errors, and then build the application again.
- To debug the application, set the deployment target of the application to “Windows Phone 7 Emulator”.
- Select Debug > Start Debugging. The emulator window is displayed.
- Click the Toggle ProgressBar button and test the visibility of the progress bar.
Note: To stop debugging the application, select Debug > Stop Debugging.
Step 3 – Rebuild in the release mode before publishing
- On the standard toolbar, change the configuration manager to Release.
- To rebuild the application, select Build > Rebuild. The XAP file of the application is generated.
Finally, to submit your application to the market place, you can refer to upload your application walkthrough.
That’s it! You have now successfully created the custom indeterminate progress bar application for Windows Phone 7, that too in just 3 simple steps!
You can find the full source code for the Visual Basic Custom Indeterminate Progress Bar application here.