Click here to Skip to main content
11,641,067 members (64,248 online)
Click here to Skip to main content

Tagged as

Using ProgressRing in Windows Phone

, 27 Mar 2014 CPOL 7.3K 328 4
Rate this:
Please Sign up or sign in to vote.
Using ProgressRing (actually it's only available for Windows 8) Control on Windows Phone 8

Introduction

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 in this tutorial, we’ll have that perfect ProgressBar control on Windows Phone too Smile | :) .

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

Using the Code

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.

<phone:PhoneApplicationPage.Resources>

</phone:PhoneApplicationPage.Resources> 

So, here is our code which is 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 let us show and use ProgessRing on our project:

<Style TargetType="controls:ProgressRing">
            <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}" />
            <Setter Property="IsHitTestVisible" Value="False" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="MinHeight" Value="20" />
            <Setter Property="MinWidth" Value="20" />
            <Setter Property="IsTabStop" Value="False" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="controls:ProgressRing">
                        <Border x:Name="ProgressRingRoot" Background="{TemplateBinding Background}"
                    BorderThickness="{TemplateBinding BorderThickness}"
                    BorderBrush="{TemplateBinding BorderBrush}">
                            <Border.Resources>
                                <Style x:Key="ProgressRingEllipseStyle" TargetType="Ellipse">
                                    <Setter Property="Opacity" Value="0" />
                                    <Setter Property="HorizontalAlignment" Value="Left" />
                                    <Setter Property="VerticalAlignment" Value="Top" />
                                </Style>
                            </Border.Resources>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="SizeStates">
                                    <VisualState x:Name="Large">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0"
                                                Storyboard.TargetName="SixthCircle"
                                                Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Small" />
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="ActiveStates">
                                    <VisualState x:Name="Inactive" />
                                    <VisualState x:Name="Active">
                                        <Storyboard RepeatBehavior="Forever">
                                            <ObjectAnimationUsingKeyFrames Duration="0"
                                                Storyboard.TargetName="Ring"
                                                Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames
                                                Storyboard.TargetName="E1"
                                                Storyboard.TargetProperty="Opacity"
                                                BeginTime="0">
                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="1" />
                                                <DiscreteDoubleKeyFrame KeyTime="0:0:3.21" Value="1" />
                                                <DiscreteDoubleKeyFrame KeyTime="0:0:3.22" Value="0" />
                                                <DiscreteDoubleKeyFrame KeyTime="0:0:3.47" Value="0" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames
                                                Storyboard.TargetName="E2"
                                                Storyboard.TargetProperty="Opacity"
                                                BeginTime="00:00:00.167">
                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="1" />
                                                <DiscreteDoubleKeyFrame KeyTime="0:0:3.21" Value="1" />
                                                <DiscreteDoubleKeyFrame KeyTime="0:0:3.22" Value="0" />
                                                <DiscreteDoubleKeyFrame KeyTime="0:0:3.47" Value="0" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames
                                                Storyboard.TargetName="E3"
                                                Storyboard.TargetProperty="Opacity"
                                                BeginTime="00:00:00.334">
                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="1" />
                                                <DiscreteDoubleKeyFrame KeyTime="0:0:3.21" Value="1" />
                                                <DiscreteDoubleKeyFrame KeyTime="0:0:3.22" Value="0" />
                                                <DiscreteDoubleKeyFrame KeyTime="0:0:3.47" Value="0" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames
                                                Storyboard.TargetName="E4"
                                                Storyboard.TargetProperty="Opacity"
                                                BeginTime="00:00:00.501">
                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="1" />
                                                <DiscreteDoubleKeyFrame KeyTime="0:0:3.21" Value="1" />
                                                <DiscreteDoubleKeyFrame KeyTime="0:0:3.22" Value="0" />
                                                <DiscreteDoubleKeyFrame KeyTime="0:0:3.47" Value="0" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames
                                                Storyboard.TargetName="E5"
                                                Storyboard.TargetProperty="Opacity"
                                                BeginTime="00:00:00.668">
                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="1" />
                                                <DiscreteDoubleKeyFrame KeyTime="0:0:3.21" Value="1" />
                                                <DiscreteDoubleKeyFrame KeyTime="0:0:3.22" Value="0" />
                                                <DiscreteDoubleKeyFrame KeyTime="0:0:3.47" Value="0" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames
                                                Storyboard.TargetName="E6"
                                                Storyboard.TargetProperty="Opacity"
                                                BeginTime="00:00:00.835">
                                                <DiscreteDoubleKeyFrame KeyTime="0" Value="1" />
                                                <DiscreteDoubleKeyFrame KeyTime="0:0:3.21" Value="1" />
                                                <DiscreteDoubleKeyFrame KeyTime="0:0:3.22" Value="0" />
                                                <DiscreteDoubleKeyFrame KeyTime="0:0:3.47" Value="0" />
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames
                                                Storyboard.TargetName="E1R"
                                                BeginTime="0"
                                                Storyboard.TargetProperty="Angle">
                                                <SplineDoubleKeyFrame KeyTime="0" Value="-110" 
                                                KeySpline="0.13,0.21,0.1,0.7"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:0.433" 
                                                Value="10" KeySpline="0.02,0.33,0.38,0.77"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:1.2" 
                                                Value="93"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:1.617" 
                                                Value="205" KeySpline="0.57,0.17,0.95,0.75"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:2.017" 
                                                Value="357" KeySpline="0,0.19,0.07,0.72"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:2.783" 
                                                Value="439"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:3.217" 
                                                Value="585" KeySpline="0,0,0.95,0.37"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames
                                                Storyboard.TargetName="E2R"
                                                BeginTime="00:00:00.167"
                                                Storyboard.TargetProperty="Angle">
                                                <SplineDoubleKeyFrame KeyTime="0" 
                                                Value="-116" KeySpline="0.13,0.21,0.1,0.7"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:0.433" Value="4" KeySpline="0.02,0.33,0.38,0.77"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:1.2" 
                                                Value="87"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:1.617" Value="199" KeySpline="0.57,0.17,0.95,0.75"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:2.017" 
                                                Value="351" KeySpline="0,0.19,0.07,0.72"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:2.783" 
                                                Value="433"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:3.217" 
                                                Value="579" KeySpline="0,0,0.95,0.37"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames
                                                Storyboard.TargetName="E3R"
                                                BeginTime="00:00:00.334"
                                                Storyboard.TargetProperty="Angle">
                                                <SplineDoubleKeyFrame KeyTime="0" 
                                                Value="-122" KeySpline="0.13,0.21,0.1,0.7"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:0.433" 
                                                Value="-2" KeySpline="0.02,0.33,0.38,0.77"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:1.2" 
                                                Value="81"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:1.617" 
                                                Value="193" KeySpline="0.57,0.17,0.95,0.75"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:2.017" 
                                                Value="345" KeySpline="0,0.19,0.07,0.72"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:2.783" 
                                                Value="427"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:3.217" 
                                                Value="573" KeySpline="0,0,0.95,0.37"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames
                                                Storyboard.TargetName="E4R"
                                                BeginTime="00:00:00.501"
                                                Storyboard.TargetProperty="Angle">
                                                <SplineDoubleKeyFrame KeyTime="0" 
                                                Value="-128" KeySpline="0.13,0.21,0.1,0.7"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:0.433" 
                                                Value="-8" KeySpline="0.02,0.33,0.38,0.77"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:1.2" 
                                                Value="75"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:1.617" 
                                                Value="187" KeySpline="0.57,0.17,0.95,0.75"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:2.017" 
                                                Value="339" KeySpline="0,0.19,0.07,0.72"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:2.783" 
                                                Value="421"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:3.217" 
                                                Value="567" KeySpline="0,0,0.95,0.37"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames
                                                Storyboard.TargetName="E5R"
                                                BeginTime="00:00:00.668"
                                                Storyboard.TargetProperty="Angle">
                                                <SplineDoubleKeyFrame KeyTime="0" 
                                                Value="-134" KeySpline="0.13,0.21,0.1,0.7"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:0.433" Value="-14" KeySpline="0.02,0.33,0.38,0.77"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:1.2" 
                                                Value="69"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:1.617" 
                                                Value="181" KeySpline="0.57,0.17,0.95,0.75"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:2.017" 
                                                Value="331" KeySpline="0,0.19,0.07,0.72"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:2.783" 
                                                Value="415"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:3.217" 
                                                Value="561" KeySpline="0,0,0.95,0.37"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames
                                                Storyboard.TargetName="E6R"
                                                BeginTime="00:00:00.835"
                                                Storyboard.TargetProperty="Angle">
                                                <SplineDoubleKeyFrame KeyTime="0" 
                                                Value="-140" KeySpline="0.13,0.21,0.1,0.7"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:0.433" Value="-20" KeySpline="0.02,0.33,0.38,0.77"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:1.2" 
                                                Value="63"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:1.617" 
                                                Value="175" KeySpline="0.57,0.17,0.95,0.75"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:2.017" 
                                                Value="325" KeySpline="0,0.19,0.07,0.72"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:2.783" 
                                                Value="409"/>
                                                <SplineDoubleKeyFrame KeyTime="0:0:3.217" 
                                                Value="555" KeySpline="0,0,0.95,0.37"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid x:Name="Ring"
                                Margin="{TemplateBinding Padding}"
                                MaxWidth="{Binding TemplateSettings.MaxSideLength, 
                                RelativeSource={RelativeSource TemplatedParent}}"
                                MaxHeight="{Binding TemplateSettings.MaxSideLength, 
                                RelativeSource={RelativeSource TemplatedParent}}"
                                Visibility="Collapsed"
                                RenderTransformOrigin=".5,.5"
                                FlowDirection="LeftToRight">
                                <Canvas RenderTransformOrigin=".5,.5">
                                    <Canvas.RenderTransform>
                                        <RotateTransform x:Name="E1R" />
                                    </Canvas.RenderTransform>
                                    <Ellipse
                                        x:Name="E1"
                                        Style="{StaticResource ProgressRingEllipseStyle}"
                                        Width="{Binding TemplateSettings.EllipseDiameter, 
                                        RelativeSource={RelativeSource TemplatedParent}}"
                                        Height="{Binding TemplateSettings.EllipseDiameter, 
                                        RelativeSource={RelativeSource TemplatedParent}}"
                                        Margin="{Binding TemplateSettings.EllipseOffset, 
                                        RelativeSource={RelativeSource TemplatedParent}}"
                                        Fill="{TemplateBinding Foreground}"/>
                                </Canvas>
                                <Canvas RenderTransformOrigin=".5,.5">
                                    <Canvas.RenderTransform>
                                        <RotateTransform x:Name="E2R" />
                                    </Canvas.RenderTransform>
                                    <Ellipse
                                        x:Name="E2"
                                        Style="{StaticResource ProgressRingEllipseStyle}"
                                        Width="{Binding TemplateSettings.EllipseDiameter, 
                                        RelativeSource={RelativeSource TemplatedParent}}"
                                        Height="{Binding TemplateSettings.EllipseDiameter, 
                                        RelativeSource={RelativeSource TemplatedParent}}"
                                        Margin="{Binding TemplateSettings.EllipseOffset, 
                                        RelativeSource={RelativeSource TemplatedParent}}"
                                        Fill="{TemplateBinding Foreground}"/>
                                </Canvas>
                                <Canvas RenderTransformOrigin=".5,.5">
                                    <Canvas.RenderTransform>
                                        <RotateTransform x:Name="E3R" />
                                    </Canvas.RenderTransform>
                                    <Ellipse
                                        x:Name="E3"
                                        Style="{StaticResource ProgressRingEllipseStyle}"
                                        Width="{Binding TemplateSettings.EllipseDiameter, 
                                        RelativeSource={RelativeSource TemplatedParent}}"
                                        Height="{Binding TemplateSettings.EllipseDiameter, 
                                        RelativeSource={RelativeSource TemplatedParent}}"
                                        Margin="{Binding TemplateSettings.EllipseOffset, 
                                        RelativeSource={RelativeSource TemplatedParent}}"
                                        Fill="{TemplateBinding Foreground}"/>
                                </Canvas>
                                <Canvas RenderTransformOrigin=".5,.5">
                                    <Canvas.RenderTransform>
                                        <RotateTransform x:Name="E4R" />
                                    </Canvas.RenderTransform>
                                    <Ellipse
                                        x:Name="E4"
                                        Style="{StaticResource ProgressRingEllipseStyle}"
                                        Width="{Binding TemplateSettings.EllipseDiameter, 
                                        RelativeSource={RelativeSource TemplatedParent}}"
                                        Height="{Binding TemplateSettings.EllipseDiameter, 
                                        RelativeSource={RelativeSource TemplatedParent}}"
                                        Margin="{Binding TemplateSettings.EllipseOffset, 
                                        RelativeSource={RelativeSource TemplatedParent}}"
                                        Fill="{TemplateBinding Foreground}"/>
                                </Canvas>
                                <Canvas RenderTransformOrigin=".5,.5">
                                    <Canvas.RenderTransform>
                                        <RotateTransform x:Name="E5R" />
                                    </Canvas.RenderTransform>
                                    <Ellipse
                                        x:Name="E5"
                                        Style="{StaticResource ProgressRingEllipseStyle}"
                                        Width="{Binding TemplateSettings.EllipseDiameter, 
                                        RelativeSource={RelativeSource TemplatedParent}}"
                                        Height="{Binding TemplateSettings.EllipseDiameter, 
                                        RelativeSource={RelativeSource TemplatedParent}}"
                                        Margin="{Binding TemplateSettings.EllipseOffset, 
                                        RelativeSource={RelativeSource TemplatedParent}}"
                                        Fill="{TemplateBinding Foreground}"/>
                                </Canvas>
                                <Canvas RenderTransformOrigin=".5,.5"
                                    Visibility="Collapsed"
                                    x:Name="SixthCircle">
                                    <Canvas.RenderTransform>
                                        <RotateTransform x:Name="E6R" />
                                    </Canvas.RenderTransform>
                                    <Ellipse
                                        x:Name="E6"
                                        Style="{StaticResource ProgressRingEllipseStyle}"
                                        Width="{Binding TemplateSettings.EllipseDiameter, 
                                        RelativeSource={RelativeSource TemplatedParent}}"
                                        Height="{Binding TemplateSettings.EllipseDiameter, 
                                        RelativeSource={RelativeSource TemplatedParent}}"
                                        Margin="{Binding TemplateSettings.EllipseOffset, 
                                        RelativeSource={RelativeSource TemplatedParent}}"
                                        Fill="{TemplateBinding Foreground}"/>
                                </Canvas>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style> 

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 is going to 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 look like this:

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

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 sure there aren’t any lines of codes. It should be completely empty. After that, we can add our C# code to our ProgressRing.cs file. Here is the code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
namespace Additional.WindowsPhone.Controls
{
    public class ProgressRing : Control
    {
        bool hasAppliedTemplate = false;
        public ProgressRing()
        {
            this.DefaultStyleKey = typeof(ProgressRing);
            TemplateSettings = new TemplateSettingValues(60);
        }
        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            hasAppliedTemplate = true;
            UpdateState(this.IsActive);
        }
        void UpdateState(bool isActive)
        {
            if (hasAppliedTemplate)
            {
                string state = isActive ? "Active" : "Inactive";
                System.Windows.VisualStateManager.GoToState(this, state, true);
            }
        }
        protected override System.Windows.Size MeasureOverride(System.Windows.Size availableSize)
        {
            var width = 100D;
            if (!System.ComponentModel.DesignerProperties.IsInDesignTool)
                width = this.Width != double.NaN ? this.Width : availableSize.Width;
            TemplateSettings = new TemplateSettingValues(width);
            return base.MeasureOverride(availableSize);
        }
        public bool IsActive
        {
            get { return (bool)GetValue(IsActiveProperty); }
            set { SetValue(IsActiveProperty, value); }
        }
        // Using a DependencyProperty as the backing store for IsActive.  
        //This enables animation, styling, binding, etc...
        public static readonly DependencyProperty IsActiveProperty =
            DependencyProperty.Register("IsActive", 
            typeof(bool), typeof(ProgressRing), new PropertyMetadata
            (false, new PropertyChangedCallback(IsActiveChanged)));
        private static void IsActiveChanged(DependencyObject d, 
        DependencyPropertyChangedEventArgs args)
        {
            var pr = (ProgressRing)d;
            var isActive = (bool)args.NewValue;
            pr.UpdateState(isActive);
        }
        public TemplateSettingValues TemplateSettings
        {
            get { return (TemplateSettingValues)GetValue(TemplateSettingsProperty); }
            set { SetValue(TemplateSettingsProperty, value); }
        }
        // Using a DependencyProperty as the backing store for TemplateSettings.  
        // This enables animation, styling, binding, etc...
        public static readonly DependencyProperty TemplateSettingsProperty =
            DependencyProperty.Register("TemplateSettings", 
            typeof(TemplateSettingValues), typeof(ProgressRing), 
            new PropertyMetadata(new TemplateSettingValues(100)));
        public class TemplateSettingValues : System.Windows.DependencyObject
        {
            public TemplateSettingValues(double width)
            {
                MaxSideLength = 400;
                EllipseDiameter = width / 10;
                EllipseOffset = new System.Windows.Thickness(EllipseDiameter);
            }
            public double MaxSideLength
            {
                get { return (double)GetValue(MaxSideLengthProperty); }
                set { SetValue(MaxSideLengthProperty, value); }
            }
            // Using a DependencyProperty as the backing store for MaxSideLength.  
            // This enables animation, styling, binding, etc...
            public static readonly DependencyProperty MaxSideLengthProperty =
                DependencyProperty.Register("MaxSideLength", 
                typeof(double), typeof(TemplateSettingValues), new PropertyMetadata(0D));
            public double EllipseDiameter
            {
                get { return (double)GetValue(EllipseDiameterProperty); }
                set { SetValue(EllipseDiameterProperty, value); }
            }
            // Using a DependencyProperty as the backing store for EllipseDiameter.  
            // This enables animation, styling, binding, etc...
            public static readonly DependencyProperty EllipseDiameterProperty =
                DependencyProperty.Register("EllipseDiameter", typeof(double), 
                typeof(TemplateSettingValues), new PropertyMetadata(0D));
            public Thickness EllipseOffset
            {
                get { return (Thickness)GetValue(EllipseOffsetProperty); }
                set { SetValue(EllipseOffsetProperty, value); }
            }
            // Using a DependencyProperty as the backing store for EllipseOffset.  
            // This enables animation, styling, binding, etc...
            public static readonly DependencyProperty EllipseOffsetProperty =
                DependencyProperty.Register("EllipseOffset", typeof(Thickness), 
                typeof(TemplateSettingValues), new PropertyMetadata(new Thickness()));
        }
    }
} 

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

xmlns:controls="clr-namespace:Additional.WindowsPhone.Controls" 
Add this code into the red point, here is the point:

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

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. Smile | :) Here is the image and the code.

 <controls:ProgressRing Width="70" Height="70" IsActive="True" /> 

We’re geting close to the end of adding ProgressRing control to our project. Smile | :)

Let’s test our control, here is the screenshot and preview of Screenrecord for ProgressRing control.

If you want to see a Screenrecord, check out https://www.youtube.com/watch?v=ZMOLh_aye60.

I hope you like the tutorial and ProgressRing control.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Onur Tırpan
Microsoft MEA
Turkey Turkey
Microsoft MEA, Developer Platform Evangelism Intern, Nokia Developer Champion. Windows Phone & Windows 8 Application Developer.

You may also be interested in...

Comments and Discussions

 
QuestionError in XAML page Pin
Arzoo Singh23-Jan-15 9:32
memberArzoo Singh23-Jan-15 9:32 
AnswerRe: Error in XAML page Pin
Onur Tırpan29-Jan-15 2:18
memberOnur Tırpan29-Jan-15 2:18 
QuestionHow did you Create XAML style for Progress Ring ? Pin
pardeep sharma931-Mar-14 21:06
memberpardeep sharma931-Mar-14 21:06 
AnswerRe: How did you Create XAML style for Progress Ring ? Pin
Onur Tırpan2-Apr-14 3:56
memberOnur Tırpan2-Apr-14 3:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150731.1 | Last Updated 27 Mar 2014
Article Copyright 2014 by Onur Tırpan
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid