How to create a Spinner control on Windows Phone

Comments

Hamishwillee - Licensing

Hi

Useful component.

YOu've written "However, if you CAN afford to buy a licence, you can use the one I provide below. " - do you mean "CAN'T"? If you're proposing to publish this under a commercial license propose you don't use the wiki as this would not match with the Terms & Conditions of the site.

I will do some minor subediting.

Regards

Hamish

hamishwillee 07:28, 13 September 2012 (EEST)

ArchieCoder - My typo

Hello Hamish,

Thank you for the catch! I corrected my mistake.

In other subject, I didn't receive a notification that you wrote a comment even if I'm watching my wiki post. I just went to visit my post. I'll go check my other wiki posts.

Regards

ArchieCoder

ArchieCoder 15:11, 13 September 2012 (EEST)

Hamishwillee - Great

Thanks. Notifications are sent once, and you don't get another until you visit the page again (logged in). Could it be that you missed the notification of this change?

On the watchlist tab of Special:Preferences, are the checkboxes set for "Add pages I edit to my watchlist, Add pages I move to my watchlist, Add pages I delete to my watchlist, Add pages I create to my watchlist"

Did you get a notification when I added this note? (and it didn't go to Spam filter?)

hamishwillee 04:54, 14 September 2012 (EEST)

ArchieCoder - Notification

Hello,

I did not receive an email when you added your previous note even if the checkboxes were set to true. However tonight, I received 6-7 emails of notifications. I think the notification system caught up.

Cheers

ArchieCoder

ArchieCoder 05:46, 14 September 2012 (EEST)

Hamishwillee - OK

Well if you see anything "reproducable" again, please let me know.

Personally I do not trust the notification system, which is why I go through this list most days: Sandbox/Hamishwillee/Reports/RecentTalkChanges. Unfortunately I've never been able to reliably duplicate problem behaviour, so the web team doubt me :-0

hamishwillee 08:34, 17 September 2012 (EEST)

Log in or Join to leave comments.

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

Article Metadata

---

Code Example

Source file: Media:SpinnerApp.zip

---

Tested with

SDK: Windows Phone 7.1

Devices(s): Any Windows Phones

---

Compatibility

Platform(s): Windows Phone

---

Article

Keywords: spinner, loading

Created: ArchieCoder (13 Sep 2012)

Last edited: hamishwillee (10 Apr 2013)

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