Code Snippet: XAML Progress Indicator (Marquee)

Motivation

In Windows 95 haben wir gemerkt, dass Fortschrittsbalken nicht nur wachsen, sondern auch schrumpfen können. Progressive Fortschrittskorrektur nennt das der Klugscheißer, sogar die Überschreitung der 100% war in der Vergangenheit durchaus möglich.

Für den Anwender sind Fortschrittsbalken hauptsächlich ein Indikator dafür, dass ein Vorgang noch sehr lange dauert - Wenn der Balken nicht zuverlässig ist, sollte man ihn ganz lassen, oder eben nur durch "Bewegung" dem Anwender signalisieren, dass etwas bearbeitet wird. Bei diversen Videoplattformen kennt man ddies als "den Kreisel des Wartens". In Windows 8 jedoch sieht man oft eine Schlange von Punkten die von links nach rechts Pendeln, diese habe ich hier in XAML nachempfunden, viel Spaß damit:

 

<Canvas VerticalAlignment="Center" HorizontalAlignment="Center">
 <Path Fill="Black" Name="Path5">
  <Path.Data >
   <EllipseGeometry Center="15,0" RadiusX="3.8" RadiusY="3.8" x:Name="Ell5"></EllipseGeometry>
  </Path.Data>
 </Path>

 <Path Fill="Black" Name="Path4">
  <Path.Data >
   <EllipseGeometry Center="15,0" RadiusX="3.8" RadiusY="3.8" x:Name="Ell4"></EllipseGeometry>
  </Path.Data>
 </Path>
 <Path Fill="Black" Name="Path3">
  <Path.Data >
   <EllipseGeometry Center="15,0" RadiusX="3.8" RadiusY="3.8" x:Name="Ell3"></EllipseGeometry>
  </Path.Data>
 </Path>
 <Path Fill="Black" Name="Path2">
  <Path.Data >
   <EllipseGeometry Center="15,0" RadiusX="3.8" RadiusY="3.8" x:Name="Ell2"></EllipseGeometry>
  </Path.Data>
 </Path>
 <Path Fill="Black" Name="Path1">
  <Path.Data >
   <GeometryGroup>
    <EllipseGeometry Center="15,0" RadiusX="3.5" RadiusY="3.5" x:Name="Ell1"></EllipseGeometry>
   </GeometryGroup>

  </Path.Data>
  <Path.Triggers>
   <EventTrigger RoutedEvent="Path.Loaded">
    <BeginStoryboard>
     <Storyboard SpeedRatio="4">
      <PointAnimationUsingKeyFrames
        Storyboard.TargetName="Ell1" Storyboard.TargetProperty="Center"
        Duration="0:0:15" FillBehavior="Stop" RepeatBehavior="Forever"
                >
       <EasingPointKeyFrame KeyTime="0:0:0" Value="-100,0" />
       <EasingPointKeyFrame KeyTime="0:0:2" Value="32,0" />
       <EasingPointKeyFrame KeyTime="0:0:8" Value="42,0" />
       <EasingPointKeyFrame KeyTime="0:0:10" Value="100,0" />
       <EasingPointKeyFrame KeyTime="0:0:15" Value="100,0" />
      </PointAnimationUsingKeyFrames>
      <PointAnimationUsingKeyFrames
        Storyboard.TargetName="Ell2" Storyboard.TargetProperty="Center"
        Duration="0:0:15" FillBehavior="Stop" RepeatBehavior="Forever"
                >
       <EasingPointKeyFrame KeyTime="0:0:0" Value="-100,0" />
       <EasingPointKeyFrame KeyTime="0:0:1" Value="-100,0" />
       <EasingPointKeyFrame KeyTime="0:0:3" Value="15,0" />
       <EasingPointKeyFrame KeyTime="0:0:9" Value="25,0" />
       <EasingPointKeyFrame KeyTime="0:0:11" Value="100,0" />
       <EasingPointKeyFrame KeyTime="0:0:15" Value="100,0" />
      </PointAnimationUsingKeyFrames>
      <PointAnimationUsingKeyFrames
        Storyboard.TargetName="Ell3" Storyboard.TargetProperty="Center"
        Duration="0:0:15" FillBehavior="Stop" RepeatBehavior="Forever"
                >
       <EasingPointKeyFrame KeyTime="0:0:0" Value="-100,0" />
       <EasingPointKeyFrame KeyTime="0:0:2" Value="-100,0" />
       <EasingPointKeyFrame KeyTime="0:0:4" Value="0,0" />
       <EasingPointKeyFrame KeyTime="0:0:10" Value="10,0" />
       <EasingPointKeyFrame KeyTime="0:0:12" Value="100,0" />
       <EasingPointKeyFrame KeyTime="0:0:15" Value="100,0" />
      </PointAnimationUsingKeyFrames>
      <PointAnimationUsingKeyFrames
        Storyboard.TargetName="Ell4" Storyboard.TargetProperty="Center"
        Duration="0:0:15" FillBehavior="Stop" RepeatBehavior="Forever"
                >
       <EasingPointKeyFrame KeyTime="0:0:0" Value="-100,0" />
       <EasingPointKeyFrame KeyTime="0:0:3" Value="-100,0" />
       <EasingPointKeyFrame KeyTime="0:0:5" Value="-15,0" />
       <EasingPointKeyFrame KeyTime="0:0:11" Value="-5,0" />
       <EasingPointKeyFrame KeyTime="0:0:13" Value="100,0" />
       <EasingPointKeyFrame KeyTime="0:0:15" Value="100,0" />
      </PointAnimationUsingKeyFrames>
      <PointAnimationUsingKeyFrames
        Storyboard.TargetName="Ell5" Storyboard.TargetProperty="Center"
        Duration="0:0:15" FillBehavior="Stop" RepeatBehavior="Forever"
                >
       <EasingPointKeyFrame KeyTime="0:0:0" Value="-100,0" />
       <EasingPointKeyFrame KeyTime="0:0:4" Value="-100,0" />
       <EasingPointKeyFrame KeyTime="0:0:6" Value="-30,0" />
       <EasingPointKeyFrame KeyTime="0:0:12" Value="-20,0" />
       <EasingPointKeyFrame KeyTime="0:0:14" Value="100,0" />
       <EasingPointKeyFrame KeyTime="0:0:15" Value="100,0" />
      </PointAnimationUsingKeyFrames>

      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Path1" Storyboard.TargetProperty="Opacity"
        Duration="0:0:15" FillBehavior="Stop" RepeatBehavior="Forever">
       <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
       <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
       <EasingDoubleKeyFrame KeyTime="0:0:8" Value="1"/>
       <EasingDoubleKeyFrame KeyTime="0:0:10" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Path2" Storyboard.TargetProperty="Opacity"
        Duration="0:0:15" FillBehavior="Stop" RepeatBehavior="Forever">
       <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
       <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
       <EasingDoubleKeyFrame KeyTime="0:0:3" Value="1"/>
       <EasingDoubleKeyFrame KeyTime="0:0:9" Value="1"/>
       <EasingDoubleKeyFrame KeyTime="0:0:11" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Path3" Storyboard.TargetProperty="Opacity"
        Duration="0:0:15" FillBehavior="Stop" RepeatBehavior="Forever">
       <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
       <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
       <EasingDoubleKeyFrame KeyTime="0:0:4" Value="1"/>
       <EasingDoubleKeyFrame KeyTime="0:0:10" Value="1"/>
       <EasingDoubleKeyFrame KeyTime="0:0:12" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Path4" Storyboard.TargetProperty="Opacity"
        Duration="0:0:15" FillBehavior="Stop" RepeatBehavior="Forever">
       <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
       <EasingDoubleKeyFrame KeyTime="0:0:3" Value="0"/>
       <EasingDoubleKeyFrame KeyTime="0:0:5" Value="1"/>
       <EasingDoubleKeyFrame KeyTime="0:0:11" Value="1"/>
       <EasingDoubleKeyFrame KeyTime="0:0:13" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
      <DoubleAnimationUsingKeyFrames Storyboard.TargetName="Path5" Storyboard.TargetProperty="Opacity"
        Duration="0:0:15" FillBehavior="Stop" RepeatBehavior="Forever">
       <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
       <EasingDoubleKeyFrame KeyTime="0:0:4" Value="0"/>
       <EasingDoubleKeyFrame KeyTime="0:0:6" Value="1"/>
       <EasingDoubleKeyFrame KeyTime="0:0:12" Value="1"/>
       <EasingDoubleKeyFrame KeyTime="0:0:14" Value="0"/>
      </DoubleAnimationUsingKeyFrames>
     </Storyboard>
    </BeginStoryboard>
   </EventTrigger>
  </Path.Triggers>
 </Path>
</Canvas>