自定义平进度条

Question

我正在尝试创建一个类似于下图所示的进度条，它处于不确定的效果，因此它只是一个循环的动画循环。

我有是我从哪里开始的问题？

我的主要逻辑就是我需要在另一个顶部重叠一个矩形，然后应用某种动画使顶部矩形移动，然后循环同样的东西。

我可以在Blend的故事板中做到这一点，但我不认为这是实现此目的的最佳方式。

任何人都可以指向正确的方向吗？

编辑：

工作XAML：

<Style x:Key="{x:Type ProgressBar}" 
     TargetType="{x:Type ProgressBar}"> 
    <Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="{x:Type ProgressBar}"> 
     <Grid MinHeight="14" 
       MinWidth="200" 
       Background="#FFF0F0F0"> 
      <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="CommonStates"> 
       <VisualState x:Name="Determinate" /> 
       <VisualState x:Name="Indeterminate"> 
       <Storyboard> 
        <ObjectAnimationUsingKeyFrames Duration="00:00:00" 
               Storyboard.TargetName="PART_Indicator" 
               Storyboard.TargetProperty="Background"> 
        <DiscreteObjectKeyFrame KeyTime="00:00:00"> 
         <DiscreteObjectKeyFrame.Value> 
         <SolidColorBrush>#FFF0F0F0</SolidColorBrush> 
         </DiscreteObjectKeyFrame.Value> 
        </DiscreteObjectKeyFrame> 
        </ObjectAnimationUsingKeyFrames> 

       </Storyboard> 
       </VisualState> 
      </VisualStateGroup> 
      </VisualStateManager.VisualStateGroups> 
      <Border x:Name="PART_Track" 
        CornerRadius="0" 
        BorderThickness="1"> 
      <Border.BorderBrush> 
       <SolidColorBrush Color="#FFF0F0F0" /> 
      </Border.BorderBrush> 
      </Border> 
      <Border x:Name="PART_Indicator" 
        CornerRadius="0" 
        BorderThickness="0" 
        HorizontalAlignment="Left" 
        Background="#FF4B8BC2" 
        Margin="0,-1,0,1"> 
      <Border.BorderBrush> 
       <SolidColorBrush Color="#FFD7D7D7" /> 

      </Border.BorderBrush> 
      <Grid ClipToBounds="True" 
        x:Name="Animation"> 
       <Border x:Name="PART_GlowRect" 
         Width="100" 
         HorizontalAlignment="Left" 
         Background="#FF4B8BC2" 
         Margin="-100,0,0,0" /> 
      </Grid> 
      </Border> 
     </Grid> 
     </ControlTemplate> 
    </Setter.Value> 
    </Setter> 
    <Setter Property="Background"> 
    <Setter.Value> 
     <SolidColorBrush Color="#FFF0F0F0" /> 
    </Setter.Value> 
    </Setter> 
    <Setter Property="Foreground"> 
    <Setter.Value> 
     <SolidColorBrush Color="#FF4B8BC2" /> 
    </Setter.Value> 
    </Setter> 
</Style> 

Answer 1

我想你应该阅读有关ProgressBar Styles and Templates开始。 ProgressBar有一些命名的部分，如PART_Indicator或PART_Track。它们通过名称来标识以便在正确的地方使用。它也有2 CommonStates：Determinate，当你想显示真正的进展，当你想显示进度时，Indeterminate。你不必担心叠加。如果你正确地命名模板的一部分，它会自动为你完成。