创建 Windows Store App Pie Timer 或 Ellipse 顺时针填充或 Circular Progress Bar

Posted 2023-02-22

【中文标题】创建 Windows Store App Pie Timer 或 Ellipse 顺时针填充或 Circular Progress Bar

【英文标题】：Create a Windows Store App Pie Timer or Ellipse clockwise fill or Circular Progress Bar

【发布时间】：2015-01-19 18:22:57

【问题描述】：

我正在尝试在 Windows 应用商店应用程序中创建一个动画，类似于以下内容：http://codepen.io/HugoGiraudel/pen/BHEwo

根据我的搜索结果，我最终得到了 WinRT 中不存在的 RadialGradientBrush 或 Ellipse.OpacityMask。我考虑过使用 PieChart 库，但是，鉴于动画的简单性，我认为必须有更好的方法来做到这一点。有什么想法吗？

【问题讨论】：

背景是静态颜色还是动画需要出现在其他元素上方以便您可以看穿它（例如，如果您的示例或它总是会通过白色部分看到背景是白人？）我喜欢这个挑战，如果以后有时间我会解决的。

谢谢@ChrisW。在我的情况下，椭圆是白色的，将位于背景之上。它的颜色没有透明度（除了想要的清晰动画），它是纯色。

除非有人已经是made that wheel，尽管我可能会想出一种仅适用于 xaml 的方法

Charles Petzold、Jerry Nixon 和我似乎...winrtxamltoolkit.codeplex.com/SourceControl/…

我还没有时间尝试，但我仍然认为它可以在 xaml 中通过一些想象力和动画来完成，但在我尝试之前无法确定，哈哈。我在@FilipSkakun 那里看到了你的评论，应该首先在此处标记你。干杯朋友

【参考方案1】：

我昨晚发现了这个链接，我认为这与您的问题有些相关。

http://social.technet.microsoft.com/wiki/contents/articles/20648.using-the-rendertargetbitmap-in-windows-store-apps-with-xaml-and-c.aspx

我搜索了一下，发现了这个： https://msdn.microsoft.com/en-us/library/system.windows.uielement.clip(v=vs.110).aspx

我认为底部的 xaml 可能会让您朝着正确的方向前进。

  <Image
  Source="sampleImages\Waterlilies.jpg" 
  Width="200" Height="150" HorizontalAlignment="Left">
  <Image.Clip>
    <EllipseGeometry x:Name="MyEllipseGeometry1"
      RadiusX="100"
      RadiusY="75"
      Center="100,75"/>
  </Image.Clip>
  <Image.Triggers>
    <EventTrigger RoutedEvent="Image.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <PointAnimation 
            Storyboard.TargetName="MyEllipseGeometry1" 
            Storyboard.TargetProperty="(EllipseGeometry.Center)"
            From="0,0" To="200,150" Duration="0:0:3" RepeatBehavior="Forever" 
            AutoReverse="True" />
          </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Image.Triggers>
</Image>