如何正确设计精美的垂直进度条？

Question

我正在尝试制作一个时尚的进度条，但我对其垂直版本有疑问。一张图片胜过一千个单词：

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

到目前为止我所做的一切尝试都导致了错误。我怎样才能实现权利？我更喜欢仅 XAML 的解决方案，除非它很慢或在进度条每秒更新多次时导致闪烁。

Answer 1

这是一种替代方法：

<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>

请注意从顶部开始的第三行，这是您绑定进度值的地方。