Windows Phone ProgressRing control

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

In Windows Phone 8, only the ProgressBar controls, and no circular wait control. Today I whim, down from copy Windows Store on the ProgressRing control XAML code slightly modified can be directly used.

Below share with you, hoping to help,

First of all, in the XAML into the reference space

xmlns:System="clr-namespace:System;assembly=mscorlib"

Then,

       <Style x:Key="ProgressRingStyle" TargetType="ProgressBar">
            <Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>
            <Setter Property="Background" Value="{StaticResource PhoneProgressBarBackgroundBrush}"/>
            <Setter Property="Maximum" Value="100"/>
            <Setter Property="IsHitTestVisible" Value="False"/>
            <Setter Property="Padding" Value="{StaticResource PhoneHorizontalMargin}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ProgressBar">
                        <Grid>
                            <Grid.Resources>
                                <System:Double x:Key="ProgressRingEllipseDiameter">5</System:Double>
                                <Thickness  x:Key="ProgressRingEllipseOffset">0</Thickness>
                                <Style x:Key="ProgressRingEllipseStyle" TargetType="Ellipse">
                                    <Setter Property="Opacity" Value="0" />
                                    <Setter Property="HorizontalAlignment" Value="Left" />
                                    <Setter Property="VerticalAlignment" Value="Top" />
                                </Style>
                            </Grid.Resources>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Determinate"/>
                                    <VisualState x:Name="Indeterminate">
                                        <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}"
                         
                          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="{StaticResource ProgressRingEllipseDiameter}"
                                Height="{StaticResource ProgressRingEllipseDiameter}"
                                Margin="{StaticResource ProgressRingEllipseOffset}"
                                Fill="{TemplateBinding Foreground}"/>
                                </Canvas>
                                <Canvas RenderTransformOrigin=".5,.5">
                                    <Canvas.RenderTransform>
                                        <RotateTransform x:Name="E2R" />
                                    </Canvas.RenderTransform>
                                    <Ellipse
                                x:Name="E2"
                                Style="{StaticResource ProgressRingEllipseStyle}"
                                Width="{StaticResource ProgressRingEllipseDiameter}"
                                Height="{StaticResource ProgressRingEllipseDiameter}"
                                Margin="{StaticResource ProgressRingEllipseOffset}"
                                Fill="{TemplateBinding Foreground}"/>
                                </Canvas>
                                <Canvas RenderTransformOrigin=".5,.5">
                                    <Canvas.RenderTransform>
                                        <RotateTransform x:Name="E3R" />
                                    </Canvas.RenderTransform>
                                    <Ellipse
                                x:Name="E3"
                                Style="{StaticResource ProgressRingEllipseStyle}"
                                Width="{StaticResource ProgressRingEllipseDiameter}"
                                Height="{StaticResource ProgressRingEllipseDiameter}"
                                Margin="{StaticResource ProgressRingEllipseOffset}"
                                Fill="{TemplateBinding Foreground}"/>
                                </Canvas>
                                <Canvas RenderTransformOrigin=".5,.5">
                                    <Canvas.RenderTransform>
                                        <RotateTransform x:Name="E4R" />
                                    </Canvas.RenderTransform>
                                    <Ellipse
                                x:Name="E4"
                                Style="{StaticResource ProgressRingEllipseStyle}"
                                Width="{StaticResource ProgressRingEllipseDiameter}"
                                Height="{StaticResource ProgressRingEllipseDiameter}"
                                Margin="{StaticResource ProgressRingEllipseOffset}"
                                Fill="{TemplateBinding Foreground}"/>
                                </Canvas>
                                <Canvas RenderTransformOrigin=".5,.5">
                                    <Canvas.RenderTransform>
                                        <RotateTransform x:Name="E5R" />
                                    </Canvas.RenderTransform>
                                    <Ellipse
                                x:Name="E5"
                                Style="{StaticResource ProgressRingEllipseStyle}"
                                Width="{StaticResource ProgressRingEllipseDiameter}"
                                Height="{StaticResource ProgressRingEllipseDiameter}"
                                Margin="{StaticResource ProgressRingEllipseOffset}"
                                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="{StaticResource ProgressRingEllipseDiameter}"
                                Height="{StaticResource ProgressRingEllipseDiameter}"
                                Margin="{StaticResource ProgressRingEllipseOffset}"
                                Fill="{TemplateBinding Foreground}"/>
                                </Canvas>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

ProgressRingEllipseDiameter is used to adjust the small circle diameter

ProgressRingEllipseOffset is the regulation of small circle of margin

These two properties in the Windows Store which is based on the size of the control automatic regulation

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Eve at November 19, 2013 - 4:57 PM