开发者

How to style a fancy vertical ProgressBar correctly?

开发者 https://www.devze.com 2022-12-15 20:04 出处:网络
I\'m trying to make a stylish progress bar, but I\'m having a problem with its vertical version. A picture is worth a thousand words:

I'm trying to make a stylish progress bar, but I'm having a problem with its vertical version. A picture is worth a thousand words:

http://img402.开发者_StackOverflow社区imageshack.us/img402/2033/progressq.gif

Everything I've attempted so far has resulted in Wrong. How do I achieve Right? I'd prefer a XAML only solution unless it's slow or causes flickering when the progress bar is updated many times per second.


Here's one 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>

Note the third line from the top, that is where you bind your progress value.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号