Wie stylen Sie eine schicke vertikale ProgressBar korrekt?

Question

Ich versuche, einen stilvollen Fortschrittsbalken zu machen, aber ich habe ein Problem mit seiner vertikalen Version. Ein Bild sagt mehr als tausend Worte wert:

http://img402.imageshack.us/img402/2033/progressq.gif

Alles, was ich bisher versucht habe, hat in Wrong geführt. Wie erreiche ich richtig? Ich würde eine einzige XAML-Lösung bevorzugen, es sei denn, sie ist langsam oder verursacht Flimmern, wenn der Fortschrittsbalken mehrmals pro Sekunde aktualisiert wird.

Answer 1

Hier ist eine Alternative:

<Border BorderBrush="Black" BorderThickness="2" CornerRadius="3" Padding="3"> 
    <Grid Width="20" Height="100"> 
     <Grid Height="{Binding ProgressValue}" VerticalAlignment="Bottom"> 
      <Grid Height="100" VerticalAlignment="Bottom"> 
       <Grid.Background> 
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> 
         <GradientStop Color="Yellow" Offset="0.0" /> 
         <GradientStop Color="Red" Offset="0.25" /> 
         <GradientStop Color="Blue" Offset="0.75" /> 
         <GradientStop Color="LimeGreen" Offset="1.0" /> 
        </LinearGradientBrush> 
       </Grid.Background> 
      </Grid> 
     </Grid> 
    </Grid> 
</Border> 

Beachten Sie die dritte Zeile von oben, das ist, wo Sie Ihren Fortschritt Wert binden.