如何正确设置精美的垂直 ProgressBar 样式？答案

【问题标题】：How to style a fancy vertical ProgressBar correctly?如何正确设置精美的垂直 ProgressBar 样式？
【发布时间】：2010-01-06 18:47:50
【问题描述】：

我正在尝试制作一个时尚的进度条，但我遇到了垂直版本的问题。一图胜千言：

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

到目前为止，我所做的一切都导致了错误。我如何实现正确？我更喜欢仅使用 XAML 的解决方案，除非它很慢或在每秒更新多次进度条时会导致闪烁。

【问题讨论】：

那张照片令人着迷……

标签： wpf xaml styles progress-bar

【解决方案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>

请注意从顶部数第三行，这是您绑定进度值的位置。

【讨论】：

您的代码并不完全是 ProgressBar 模板的工作方式，但是，是的，在 PART_Indicator 内嵌套一个额外的网格（或边框），将其与底部对齐，并将其高度绑定到 PART_Tracks 的 ActualHeight 就可以了。
如果我的回答启发了您找到解决方案 - 我很高兴 :)