如何在WPF中创建像Windows 8样式的进度环？

时间：2014-03-18 17:41:37

标签： c# wpf xaml windows-8 progress-bar

我想在Windows 8 ProgressRing等桌面应用中显示进度。这种类型的进度在安装时或Windows Start时显示，但是这种控件可以在许多应用程序中使用，因为它非常干净和现代，但我不知道如何实现这一点。进度环图像在这里。

请看图片：

enter image description here

我是否知道如何编写代码可能是在XAML或代码中？我已经看到在WPF中ProgressRing控件不存在，所以我必须去一些自定义控件。想法链接或建议请问我该如何处理。

2 个答案:

答案 0 :(得分：10)

使用MahApps.Metro会更简单，但下面给出的是一个简单的类似Metro的等待指示器，显示如何在XAML中完成。

<Viewbox>
        <Canvas Width="50" Height="50"
                HorizontalAlignment="Left"
                VerticalAlignment="Top">
            <Path Data="M50,27.5 C50,24.23333 45,24.23333 45,27.5 C45,30.83333 50,30.83333 50,27.5"
                  Fill="#FFFFFFFF"
                  RenderTransformOrigin="0.5,0.83333">
                <Path.RenderTransform >
                    <RotateTransform x:Name="_rot1" Angle="0"/>
                </Path.RenderTransform>
                <Path.Triggers>
                    <EventTrigger RoutedEvent="Path.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="_rot1"
                                                               Storyboard.TargetProperty="Angle"
                                                               RepeatBehavior="Forever">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="360"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <PowerEase Power="1.3" EasingMode="EaseInOut"/>
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                    <EasingDoubleKeyFrame KeyTime="0:0:3" Value="0"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Path.Triggers>
            </Path>
            <Path Data="M50,27.5 C50,24.23333 45,24.23333 45,27.5 C45,30.83333 50,30.83333 50,27.5"
                  Fill="#DDFFFFFF"
                  RenderTransformOrigin="0.5,0.83333">
                <Path.RenderTransform>
                    <RotateTransform x:Name="_rot2" Angle="13"/>
                </Path.RenderTransform>
                <Path.Triggers>
                    <EventTrigger RoutedEvent="Path.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="_rot2"
                                                               Storyboard.TargetProperty="Angle"
                                                               RepeatBehavior="Forever">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="13"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="13"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:2.2" Value="-347">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <PowerEase Power="1.3" EasingMode="EaseInOut"/>
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                    <EasingDoubleKeyFrame KeyTime="0:0:3" Value="-347"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Path.Triggers>
            </Path>
            <Path Data="M50,27.5 C50,24.23333 45,24.23333 45,27.5 C45,30.83333 50,30.83333 50,27.5"
                  Fill="#BBFFFFFF"
                  RenderTransformOrigin="0.5,0.83333">
                <Path.RenderTransform>
                    <RotateTransform x:Name="_rot3" Angle="26"/>
                </Path.RenderTransform>
                <Path.Triggers>
                    <EventTrigger RoutedEvent="Path.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="_rot3"
                                                               Storyboard.TargetProperty="Angle"
                                                               RepeatBehavior="Forever">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="26"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="26"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:2.4" Value="-334">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <PowerEase Power="1.3" EasingMode="EaseInOut"/>
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                    <EasingDoubleKeyFrame KeyTime="0:0:3" Value="-334"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Path.Triggers>
            </Path>

            <Path Data="M50,27.5 C50,24.23333 45,24.23333 45,27.5 C45,30.83333 50,30.83333 50,27.5"
                  Fill="#99FFFFFF"
                  RenderTransformOrigin="0.5,0.83333">
                <Path.RenderTransform>
                    <RotateTransform x:Name="_rot4" Angle="39"/>
                </Path.RenderTransform>
                <Path.Triggers>
                    <EventTrigger RoutedEvent="Path.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="_rot4"
                                                               Storyboard.TargetProperty="Angle"
                                                               RepeatBehavior="Forever">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="39"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.6" Value="39"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:2.6" Value="-321">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <PowerEase Power="1.3" EasingMode="EaseInOut"/>
                                        </EasingDoubleKeyFrame.EasingFunction>
                                    </EasingDoubleKeyFrame>
                                    <EasingDoubleKeyFrame KeyTime="0:0:3" Value="-321"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Path.Triggers>
            </Path>
            <Path Data="M50,27.5 C50,24.23333 45,24.23333 45,27.5 C45,30.83333 50,30.83333 50,27.5"
                  Fill="#77FFFFFF"
                  RenderTransformOrigin="0.5,0.83333">
                <Path.RenderTransform>
                    <RotateTransform x:Name="_rot5" Angle="52"/>
                </Path.RenderTransform>
                <Path.Triggers>
                    <EventTrigger RoutedEvent="Path.Loaded">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="_rot5"
                                                               Storyboard.TargetProperty="Angle"
                                                               RepeatBehavior="Forever">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="52"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="52"/>
                                    <EasingDoubleKeyFrame KeyTime="0:0:2.8" Value="-308">
                                        <EasingDoubleKeyFrame.EasingFunction>
                                            <PowerEase Power="1.3" EasingMode="EaseInOut"/>
                                        </EasingDoubleKeyFrame.EasingFunction>
                                        </EasingDoubleKeyFrame>
                                    <EasingDoubleKeyFrame KeyTime="0:0:3" Value="-308"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Path.Triggers>
            </Path>
        </Canvas>
    </Viewbox>

它基本上是相同的Path物体，一个实心圆圈，使用5次，5种不同的旋转角度和5种不同的不透明度值。

毫无疑问，有一种更有效的方法可以做到这一点，但是当圆圈旋转并停止时，这种方法可以显示动画和时间，以及使其更自然，更不突然的感觉。

答案 1 :(得分：6)

使用MahApps.Metro中的ProgressRing：

  

{8}控件在Windows 8中的类似控件之后设置样式，以指示活动而不是完成进度的百分比。

示例：

ProgressRing

要更改响铃的大小，您需要设置<Controls:ProgressRing IsActive="True" /> 和Width。此外，您可以为每个环设置不同的颜色，并将尺寸设置为小于已建立的尺寸。要执行此操作并在不安装完整Height包的情况下获取此控件，请查看我之前的答案：

Make the ProgressRing in MahApps.Metro Smaller

相关问题
最新问题