Skip to content
NumberProgressBar for Windows Phone 8.1
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


NumberProgressBar for Windows Phone 8.1

The NumberProgressBar is a bar, slim and sexy (every man wants! ).

Thanks to daimajia design this beautiful Bar.

daimajia already build it for Android and Ming-zhe build it for IOS. So as beginner of Windows Phone 8.1 I decide build it for wp8.1. Hope I could learn more about wp8.1 and share it for every one who want to use it.



  • You should use Visual Studio 2013 with Update 2 or later.

  • Use NuGet to add the NumberProgressBar to your Project

  • To install NumberProgressBar, run the following command in the Package Manager Console

PM> Install-Package NumberProgressBar 


  • Open Nuget from Visual Studio

  • Search "NumberProgressBar" and Install it

  • add to your project

  • Now You could find it in the "References"

  • add namespace "Song" to your code



In c#

using Song;
  • Use it and enjoy
  • Use 'Progress' not 'Value' if you want to set the Progress you should use 'Progress' property.
  • Use some Style

I also move some predesign style from daimajia. You can use them via ProgressBarStyle property.

like blow:

ProgressBarStyle="NumberProgressBar_Passing_Green" >

In the above picture, the style is :

NumberProgressBar_Default NumberProgressBar_Passing_Green NumberProgressBar_Relax_Blue NumberProgressBar_Grace_Yellow NumberProgressBar_Warning_Red NumberProgressBar_Funny_Orange NumberProgressBar_Beauty_Red NumberProgressBar_Twinkle_Night

And you could create your own Style for it.

like blow:

            <Style x:Key="NumberProgressBar_Default" TargetType="song:NumberProgressBar">
                <Setter Property="Max" Value="100" />
                <Setter Property="Progress" Value="0" />

                <Setter Property="ProgressUnreachedColor" Value="#CCCCCC"/>
                <Setter Property="ProgressReachedColor" Value="#3498DB"/>

                <Setter Property="ProgressTextSize" Value="10"/>
                <Setter Property="ProgressTextColor" Value="#3498DB" />

                <Setter Property="ProgressReachedBarHeight" Value="1.5"/>
                <Setter Property="ProgressUnreachedBarHeight" Value="0.75"/>


        <song:NumberProgressBar x:Name="song" Margin="0,60,0,0" Loaded="song_Loaded" Style="{StaticResource NumberProgressBar_Default}"></song:NumberProgressBar>

You can get more beautiful color from kular, and you can also contribute your color style to NumberProgressBar!


There are several attributes you can set:

The reached area and unreached area:

  • color
  • height

The text area:

  • color
  • text size

The bar:

  • max progress
  • current progress

About me:

A student in mainland China

Welcom to contact me.

Also welcom to offer me intership.Thanks in advances. ^_^

My blog:


You can’t perform that action at this time.