Custom Flat Progress Bar

Question

Я пытаюсь создать индикатор выполнения, похожий на то, что выглядит ниже, оно находится в неопределенном эффекте, так что это будет просто цикл анимации снова и снова.

Проблема у меня в том, где я начинаю?

Моя основная логика в этом заключается в том, что мне нужно наложить прямоугольник поверх другого, а затем применить некоторую анимацию, чтобы сделать верхний прямоугольник, а затем просто зациклировать ту же самую вещь.

Я могу сделать это в раскадровке в Blend, но я не думаю, что это лучший способ достичь этого.

Может ли кто-нибудь указать мне правильное направление?

EDIT:

Рабочая 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, если вы хотите показать прогресс. Вам не нужно беспокоиться о наложениях. Если вы правильно укажете части шаблона, это будет сделано автоматически для вас.