自定义扁平进度条

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>

- Sandeep Bansal

---

那么问题似乎是什么？你已经有一个模板了。 - dkozl

Answer 1

我认为你应该先阅读进度条样式和模板。 ProgressBar有一些命名部分，如PART_Indicator或PART_Track。它们通过名称进行标识，以便在正确的位置使用。它还有两个CommonStates：当您想显示实际进度时，使用Determinate，当您想显示进度时，则使用Indeterminate。您不必担心重叠。如果您正确命名模板的部分，则会自动完成。

- dkozl

---

谢谢你指出那个链接，我已经更新了我的问题，并附上了我尝试过的代码和结果。虽然还不够完美，但你有什么想法我做错了什么吗？ - Sandeep Bansal

那些看起来褪色的渐变色是由视觉状态引起的吗？ - Sandeep Bansal

在您的模板中，将 PART_GlowRect 的 Rectagle 替换为 Border，将 Fill 替换为 Background 并将其设置为您想要的蓝色。这应该会有所帮助。 - dkozl