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

我想在我的桌面应用程序中显示进度，例如Windows 8 ProgressRing。此类进度在安装时或Windows启动时显示，但此控件可用于许多应用程序，因为它非常干净和现代，但我不知道如何实现这一点。进度环图像在这里。如何在WPF中创建像Windows 8样式的进度环？

请参阅图像：

enter image description here

我可以知道我怎么代码，它可能会在XAML或代码？我已经看到在WPF ProgressRing控件不存在，所以我不得不去一些自定义控件。想法链接或建议请我如何继续。

来源

2014-03-18 Debhere

如果你想了解这个过程，请阅读这篇文章：http://blog.jerrynixon.com/2015/06/lets-code-build-custom-progress-ring-in.html –

使用MahApps.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个不同的不透明度值。

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

来源

2014-03-18 19:51:38 Stewbob

我想我需要使用'Grid'控件中的' ...'。但是，我如何触发动画？动画似乎并不开始，我是否需要在xaml.cs中编写任何代码？ – Debhere

在该示例中，一旦Path对象被加载，动画就会触发，这在设计视图中不会发生（您必须运行该窗口以查看动画）。 ''您可以通过使用XAML或使用代码从几乎所有您想要的事件触发动画。 – Stewbob

你的例子是完美的工作，但完成后，它停止。任何想法为什么它停止？ 'RepeatBehaviour'是'永远'，但它仍然停止。旋转270度后。 – Debhere

使用ProgressRing从MahApps.Metro：

的ProgressRing控制在Windows 8类似的控制后，风格，以指示活动，而不是完成进度的百分比。

例子：

<Controls:ProgressRing IsActive="True" />

要改变环的大小，你需要设置Width和Height。另外，您可以为每个戒指设置不同的颜色，并将尺寸设置为小于已建立的尺寸。要做到这一点，让这种控制没有安装全MahApps.Metro包，看看我以前的答案：

Make the ProgressRing in MahApps.Metro Smaller

来源

2014-03-18 17:50:25

我相信MahApps地铁不是免费的。可能有一些授权问题，任何想法如何在代码中实现？ – Debhere

@Debhere：据我所知它是免费的。如果你想在没有安装的情况下得到这个控件，参见我的例子，它有一个对项目的引用。 –

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

回答

相关问题