ProgressBar Temat z ukośne linie dekoratora

Question

chcę urządzić WPF ProgressBar jak na zdjęciu poniżej:

Aktualny:

Zdobione:

Te puste linie po przekątnej powinny poruszać się w animacji z zaznaczaniem z lewej strony na prawą. W tej chwili mam ten prosty styl na obecny wygląd:

<Style x:Key="{x:Type ProgressBar}" TargetType="{x:Type ProgressBar}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type ProgressBar}"> 
       <Border x:Name="BorderBackground" CornerRadius="3" BorderThickness="1" BorderBrush="{StaticResource ProgressBarBorderBrush}" Background="{StaticResource ProgressBarBackgroundBrush}"> 
        <Grid> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Determinate" /> 
           <VisualState x:Name="Indeterminate" /> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Border x:Name="PART_Track" Margin="2" BorderThickness="1" CornerRadius="2" /> 
         <Border x:Name="PART_Indicator" Margin="2" BorderThickness="1" CornerRadius="2" HorizontalAlignment="Left" Background="{StaticResource ProgressBarTrackBackgroundBrush}"/> 
        </Grid> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Ktoś może mi pomóc to zdobyć? Szukałem go, ale może brakowało mi odpowiednich słów kluczowych, aby znaleźć coś takiego, przynajmniej zwykle widzę (jak na pasku postępu OS X), że ta "dekoracja" jest zwykle używana.

Z góry dziękuję;).

---

Rozwiązanie szablon z kodu odpowiedzi nieco zmodyfikowanej:

<Style x:Key="{x:Type ProgressBar}" TargetType="{x:Type ProgressBar}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type ProgressBar}"> 
       <Border x:Name="BorderBackground" CornerRadius="3" BorderThickness="1" BorderBrush="{StaticResource ProgressBarBorderBrush}" Background="{StaticResource ProgressBarBackgroundBrush}" Effect="{StaticResource LightStrongDownLinearShadowEffect}"> 
        <Grid> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Determinate" /> 
           <VisualState x:Name="Indeterminate" /> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Border x:Name="PART_Track" Margin="2" BorderThickness="1" CornerRadius="2" /> 
         <Border x:Name="PART_Indicator" Margin="2" BorderThickness="1" CornerRadius="2" HorizontalAlignment="Left" Background="{StaticResource ProgressBarTrackBackgroundBrush}" ClipToBounds="True"> 
          <Border x:Name="DiagonalDecorator" Width="5000"> 
           <Border.Background> 
            <DrawingBrush TileMode="Tile" Stretch="None" Viewbox="0,0,1,1" Viewport="0,0,25,25" ViewportUnits="Absolute"> 
             <DrawingBrush.RelativeTransform> 
              <TranslateTransform X="0" Y="0" /> 
             </DrawingBrush.RelativeTransform> 
             <DrawingBrush.Drawing> 
              <GeometryDrawing Brush="#20FFFFFF" Geometry="M10,0 22,0 12,25 0,22 Z" /> 
             </DrawingBrush.Drawing> 
            </DrawingBrush> 
           </Border.Background> 
           <Border.Triggers> 
            <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 
             <BeginStoryboard> 
              <Storyboard> 
               <DoubleAnimation Storyboard.TargetProperty="(Border.Background).(DrawingBrush.RelativeTransform).(TranslateTransform.X)" From="0" To=".25" RepeatBehavior="Forever" Duration="0:0:15" /> 
              </Storyboard> 
             </BeginStoryboard> 
            </EventTrigger> 
           </Border.Triggers> 
          </Border> 
         </Border> 
        </Grid> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Answer 1

Edit:

This artykuł z codeproject.com ma wersję roboczą "biegun fryzjera" pasek postępu. Wyszukaj w artykule "CandyCaneProgressPainter".

Poprzednia odpowiedź:

This robi prawie dokładnie to, co chcesz. Wszystko, co musisz zrobić, aby zrobić to, co chcesz, to ograniczyć widoczność prostokąta do pożądanego procentu i zmienić stosunek wysokości do szerokości.

słowa kluczowe, które są „storyboard”, „Animacja” i „wyzwalania”

Oto XAML od połączenia z niektórych komentarzy z linku na tworzeniu animacji gładkie:

<Rectangle x:Name="pole" Width="100" Height="20" Stroke="Black" StrokeThickness="1"> 
    <Rectangle.Fill> 
    <DrawingBrush TileMode="Tile" Stretch="None" Viewbox="0,0,1,1" Viewport="0,0,25,25" ViewportUnits="Absolute"> 
    <DrawingBrush.RelativeTransform> 
    <TranslateTransform X="0" Y="0" /> 
    </DrawingBrush.RelativeTransform> 
    <DrawingBrush.Drawing> 
    <GeometryDrawing Brush="Red" Geometry="M10,0 25,0 15,25 0,25 Z" /> </DrawingBrush.Drawing> 
    </DrawingBrush> 
    </Rectangle.Fill> 
    <Rectangle.Triggers> 
    <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 
    <BeginStoryboard> 
    <Storyboard> 
     <DoubleAnimation Storyboard.TargetProperty="(Rectangle.Fill).(DrawingBrush.RelativeTransform).(TranslateTransform.X)" From="0" To=".25" RepeatBehavior="Forever" Duration="0:0:1" /> 
    </Storyboard> 
    </BeginStoryboard> 
    </EventTrigger> 
    </Rectangle.Triggers> 
</Rectangle> 

Podejrzewam, że szarpnięcie ma miejsce, gdy usuniesz wartość "width", ale jeśli wartość zostanie zwrócona, działa gładko. Dziwne.

Tak, w zasadzie potrzebował kilka poprawek z wielokrotnościami reguł liczbowych, szerokość w tym przypadku animacja może wynosić .1 lub .05 jeśli na przykład masz 5000 szerokości .... teraz to działa świetnie!

Answer 2

W swojej PART_Indicator granicy osadzić ścieżkę złożoną z kształtów, aby ukośne linie. Będziesz musiał sfałszować efekt Marquee, aby uzyskać przewijane ukośne linie, chyba że chcesz użyć wtyczki jquery lub innej alternatywy.

Jednak to, co MOŻNA zrobić w czystym formacie xaml, tworzy ścieżki linii ukośnych, sprawiając, że wiele z nich powoduje, że rząd linii diagnolowych jest bardzo długi. Ponieważ są osadzone w ramce wskaźnika, są widoczne tylko w jej obrębie.

Teraz utwórz nową animację storyboardów i użyj zachowania Actionboard ControlStory, aby wyzwolić ją i ustawić na powtarzanie. Chwyć ścieżkę złożoną z ukośnych linii i wybierz klatkę kluczową na osi czasu jako wyjście z ramki początkowej, a następnie przeciągnij ścieżkę złożoną z ukośnych linii na jedną stronę lub ustaw duży margines po lewej, tak aby podczas sekwencji animacji przesuwał się w prawo. . Chodzi o wizualną mistyfikację. Twoje ukośne linie będą działać tylko jako storyboard animacji, który tylko naśladuje animację markizy. Tak więc te linie będą nadal poruszać się po pasku i mam nadzieję, że wystarczająco dużo animacji nie powtórzy się przed załadowaniem zawartości. Mam nadzieję, że to ma sens, haha. Potrzeba trochę poprawek, ale możesz przyzwoitego rozwiązania. Powodzenia!

Answer 3

Ten post jest dość stary, ale po prostu w obliczu tego samego problemu i dostaliśmy przyjemny rozwiązanie chciałbym podzielić:

<SolidColorBrush x:Key="ProgressBarBackgroundBrush" Color="Gray" /> 
    <SolidColorBrush x:Key="ProgressBarTrackBackgroundBrush" Color="#105295" /> 
    <Style x:Key="{x:Type ProgressBar}" TargetType="{x:Type ProgressBar}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type ProgressBar}"> 
         <controls:RoundBorder x:Name="BorderBackground" CornerRadius="3" BorderThickness="0" 
         BorderBrush="{StaticResource ProgressBarBorderBrush}" 
         Background="{StaticResource ProgressBarBackgroundBrush}"> 
          <Grid> 
           <VisualStateManager.VisualStateGroups> 
            <VisualStateGroup x:Name="CommonStates"> 
             <VisualState x:Name="Determinate" /> 
             <VisualState x:Name="Indeterminate" /> 
            </VisualStateGroup> 
           </VisualStateManager.VisualStateGroups> 
           <Border x:Name="PART_Track" Margin="0" BorderThickness="0" CornerRadius="3" /> 
           <Border x:Name="PART_Indicator" Margin="0" BorderThickness="0" CornerRadius="3" HorizontalAlignment="Left" 
           Background="{StaticResource ProgressBarTrackBackgroundBrush}" ClipToBounds="True"> 
            <Border x:Name="DiagonalDecorator" Width="5000"> 
             <Border.Background> 
              <DrawingBrush TileMode="Tile" Stretch="None" Viewbox="0,0,1,1" Viewport="0,0,36,34" ViewportUnits="Absolute"> 
               <DrawingBrush.RelativeTransform> 
                <TranslateTransform X="0" Y="0" /> 
               </DrawingBrush.RelativeTransform> 
               <DrawingBrush.Drawing> 
                <GeometryDrawing Brush="#156dc7" Geometry="M0,0 18,0 36,34 18,34 Z" /> 
               </DrawingBrush.Drawing> 
              </DrawingBrush> 
             </Border.Background> 
             <Border.Triggers> 
              <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 
               <BeginStoryboard> 
                <Storyboard> 
                 <DoubleAnimation Storyboard.TargetProperty="(Border.Background).(DrawingBrush.RelativeTransform).(TranslateTransform.X)" 
                From="0" To=".36" RepeatBehavior="Forever" Duration="0:0:18" /> 
                </Storyboard> 
               </BeginStoryboard> 
              </EventTrigger> 
             </Border.Triggers> 
            </Border> 
           </Border> 
          </Grid> 
         </controls:RoundBorder > 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style>