Windows Phone ProgressRing 控件

在windows phone 8中，只有ProgressBar的控件，而没有圆环形的等待控件。今天我突发奇想，从Windows Store 的ProgressRing控件上copy下来的XAML 代码稍微修改一下就可以直接用了。

下面分享给大家，希望能有所帮助，

首先，在XAML 加入引用空间

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

然后，

       <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 是用来调节小圆圈直径的

ProgressRingEllipseOffset 是调节小圆圈的margin

这两个属性在Windows Store里面是根据控件大小自动调节的