NumberProgressBar

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.

---

Demo

Usage

• 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 

OR

• 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 XAML

<Page
......
xmlns:song="using:Song"
......
>
</Page>

In c#

usingSong;

• Use it and enjoy

<song:NumberProgressBar></song:NumberProgressBar>

• 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:

<song:NumberProgressBar
ProgressBarStyle="NumberProgressBar_Passing_Green" >
</song:NumberProgressBar>

In the above picture, the style is :

NumberProgressBar_DefaultNumberProgressBar_Passing_GreenNumberProgressBar_Relax_BlueNumberProgressBar_Grace_YellowNumberProgressBar_Warning_RedNumberProgressBar_Funny_OrangeNumberProgressBar_Beauty_RedNumberProgressBar_Twinkle_Night

And you could create your own Style for it.

like blow:

<StackPanel>
<StackPanel.Resources>
<Stylex:Key="NumberProgressBar_Default"TargetType="song:NumberProgressBar">
<SetterProperty="Max"Value="100" />
<SetterProperty="Progress"Value="0" />
<SetterProperty="ProgressUnreachedColor"Value="#CCCCCC"/>
<SetterProperty="ProgressReachedColor"Value="#3498DB"/>
<SetterProperty="ProgressTextSize"Value="10"/>
<SetterProperty="ProgressTextColor"Value="#3498DB" />
<SetterProperty="ProgressReachedBarHeight"Value="1.5"/>
<SetterProperty="ProgressUnreachedBarHeight"Value="0.75"/>
</Style>
</StackPanel.Resources>
<song:NumberProgressBarx:Name="song"Margin="0,60,0,0"Loaded="song_Loaded"Style="{StaticResource NumberProgressBar_Default}"></song:NumberProgressBar>
</StackPanel>

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

###Attributes

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: http://s2003zy.com

My email:s2003zy@gmail.com