Custom Flat Progress Bar

Question

I'm trying to create a progress bar similar to what looks like below, it's in an Indeterminate effect so it'll just be an animation looping over and over.

The problem I'm having is where do I begin?

My main logic on this would be that i need to overlay a rectangle on top of another and then apply some sort of animation to make the top rectangle move and then just loop that same thing.

I can do this in a storyboard in Blend but I don't think this is the best way to achieve this.

Can anyone point me in the right direction?

EDIT:

Working 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

I think you should start by reading about ProgressBar Styles and Templates. ProgressBar has some named parts like PART_Indicator or PART_Track. They are identified by name in order to be used in correct places. It also has 2 CommonStates: Determinate for when you want to show real progress and Indeterminate for when you want to show a progress. You don't have to worry about overlays. If you name parts of the template correctly it will be done automatically for you.