自定義平進度條

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。你不必擔心疊加。如果你正確地命名模板的一部分，它會自動爲你完成。