×
Namespaces

Variants
Actions

How to create a Spinner control on Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to create a simple progress indicator called a SpinnerControl.

WP Metro Icon UI.png
SignpostIcon XAML 40.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested with
SDK: Windows Phone 7.1
Devices(s): Any Windows Phones
Compatibility
Platform(s): Windows Phone
Windows Phone 7.5
Article
Keywords: spinner, loading
Created: ArchieCoder (13 Sep 2012)
Last edited: hamishwillee (02 Jul 2013)

Contents

Introduction

Most of the commercial components of Windows Phone contain a spinner control. However, if you can't afford to buy a licence, you can use the one I provide below. Here is a screenshot:

Screenshot showing Spinner control

Usage

To include the SpinnerControl in your project, you need to:

  1. Unzip SpinnerControl.zip.
  2. Add the three unzipped files to your project in the root.
  3. Set the build action of the Spinner.png to Content
  4. Add the SpinnerControl XAML code.

If you look at my sample project, which is an empty Windows Phone application (see download link at end of blog post), you will see:

<DotNetApp:SpinnerControl Grid.RowSpan="2"
IsSpinning="True"
Status="Loading..."
VerticalAlignment="Center"
x:Name="spinner"/>

The simple SpinnerControl that I provide contains only 2 bindable properties:

  • IsSpinning: When it is set to true, the spinner rotates and it is visible. When it is set to false, the control is collapsed.
  • Status: This property is optional and it is used to put text under the spinner. It is useful if you wish to display the progress.

Details

If we look at the file in more detail, SpinnerControl.xaml has is two important parts:

  1. The Storyboard to rotate the image:
    <Storyboard x:Name="StoryBoardAnimateSpinner">
     
    <DoubleAnimation AutoReverse="False"
    Duration="0:0:2"
    From="0"
    RepeatBehavior="Forever"
    Storyboard.TargetName="SpinnerTransform"
    Storyboard.TargetProperty="Angle"
    To="360" />
     
    </Storyboard>
    This storyboard can be translated to: The image will rotate through 360 degrees every two seconds at a constant rate of rotation, and will continue to rotate forever. If you wish, you can set it to rotate through 360 degrees at a different speed, for example, every five seconds instead of every two seconds. You simply need to modify the Duration property.
  2. The Image:
    <Image Height="50"
    Margin="10,10"
    Source="/Spinner.png"
    Stretch="Uniform"
    Width="50"
    x:Name="spinImage">
     
    <Image.RenderTransform>
     
    <RotateTransform x:Name="SpinnerTransform"
    CenterX="25"
    CenterY="25" />
     
    </Image.RenderTransform>
     
    </Image>

The Height and Width of spin image need to be equal, otherwise, you’ll get a weird rotation. The CenterX and CenterY need to be half the value of the Height (or Width). The image Spinner.png that I provided in the SpinnerControl is 40 x 40, but in the above code, I specified 50 x 50 and I made sure to set the Stretch property to Uniform.

The other control in the SpinnerControl is a TextBlock which you probably know. You can configure it with your own values and you can even add dependency properties to the control to make it more general.

Conclusion

If your application has loading period, it is highly recommended that you use some sort of a loading indicator like the one provided in this article.

Download the sample project: File:SpinnerApp.zip

Version Hint

Windows Phone: [[Category:Windows Phone]]
[[Category:Windows Phone 7.5]]
[[Category:Windows Phone 8]]

Nokia Asha: [[Category:Nokia Asha]]
[[Category:Nokia Asha Platform 1.0]]

Series 40: [[Category:Series 40]]
[[Category:Series 40 1st Edition]] [[Category:Series 40 2nd Edition]]
[[Category:Series 40 3rd Edition (initial release)]] [[Category:Series 40 3rd Edition FP1]] [[Category:Series 40 3rd Edition FP2]]
[[Category:Series 40 5th Edition (initial release)]] [[Category:Series 40 5th Edition FP1]]
[[Category:Series 40 6th Edition (initial release)]] [[Category:Series 40 6th Edition FP1]] [[Category:Series 40 Developer Platform 1.0]] [[Category:Series 40 Developer Platform 1.1]] [[Category:Series 40 Developer Platform 2.0]]

Symbian: [[Category:Symbian]]
[[Category:S60 1st Edition]] [[Category:S60 2nd Edition (initial release)]] [[Category:S60 2nd Edition FP1]] [[Category:S60 2nd Edition FP2]] [[Category:S60 2nd Edition FP3]]
[[Category:S60 3rd Edition (initial release)]] [[Category:S60 3rd Edition FP1]] [[Category:S60 3rd Edition FP2]]
[[Category:S60 5th Edition]]
[[Category:Symbian^3]] [[Category:Symbian Anna]] [[Category:Nokia Belle]]

This page was last modified on 2 July 2013, at 12:49.
109 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×