Using ProgressRing in Windows Phone

26 Mart 2014Windows Phone

ProgressRingAs you know, ProgressRing Control is only available for Windows 8. So, I tried to use it on my Windows Phone project and I failed but I found the right answer to add ProgressRing Control to my Windows Phone project.

If you have no idea about ProgressRing Control, I can easily say that, this is the most smooth and the best waiting screen ProgressBar control I’ve ever seen! And at this tutorial we’ll have that perfect ProgressBar control on Windows Phone too :).

Let’s see how can we add that control to our Windows Phone project step-by-step from the beggining of creating a new project.

Firstly, I’m creating an empty Windows Phone project.

1-Creating-WP-Project
 

After creation of the project you’ll see an empty project page on your screen like this:

2-Empty-WP-Screen
 

After this step we can start to add ProgressRing Control to our own project. If you want to add this control to an existing project, you can start from this step.

We have a style code to add our Resources. Firstly we’re going to add that code to our MainPage.xaml (or any page name that you want to add this control). But, please remember, you have to put this code between that XAML tag.

So, here is our code which going to be added between our XAML tag, this is “a little” long, so be careful while you’re using copy-paste method. This code contains some animations and styles that lets us show and use ProgessRing on our project:

After this step we’ll create a class file to add some runtime code for ProgressRing. The upper style code contains some XAML stuff, but this C# code gonna make our ProgressRing able to run correctly.

Now, create a class from Solution Explorer and right click to your project, after that point to Add label and you’ll see “Class…” button right there, it should be look like this:

3-Adding-Class-to-Project
 

After you created your class, you can give any name to your class it but I’m giving “ProgressRing.cs” name to it, so you can to the same!

4-Naming-Class
 

After this step, our ProgressRing.cs should be visible on our page, if it doesn’t, please open it from your Solution Explorer window by double-clicking.

On your ProgressRing.cs file you should see a few lines of codes. We won’t need them, delete them and make yourself sure there aren’t any lines of codes. It should be completely empty. After that we can add our code C# code to our ProgressRing.cs file. Here is the code:

After that step we’re going back to our XAML page to add a few line codes. I’m giving the code to add it XAML:

Add this code into the red point, here is the point:

5-Adding-XAML-Part
 

After you add the code your XAML page should be look like this:

6-Added-XAML-Part
 

So, after this step we’ll add the ProgressRing Control to MainPage.xaml, and it’ll be ready to use after this step!

Add this code to a place where you want to show ProgressRing Control. I’ll add it into my ContentPanel Grid. So do the same thing 🙂 Here is the image and the code.

7-Changed-Grid

We’re geting close to end of the adding ProgressRing Control to our project 🙂

Let’s test our control, here is Screenshot and Preview of Screenrecord for ProgressRing Control.

8-Emulator-Preview
 

If you want to see a Screenrecord, check this:

I hope you like the tutorial and ProgressRing Control.

 

If you want to download sample project, you can get it here;

OneDrive: http://aka.ms/ProgressRingforWindowsPhone

Github: https://github.com/onurtirpan/ProgressRingforWindowsPhone

Thanks: http://briandunnington.github.io/progressring-wp8.html

Etiketler:

"Using ProgressRing in Windows Phone" yazısı için hiç yorum yapılmamış..

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

bodrum escort bodrum escort