Как правильно оформить причудливый вертикальный ProgressBar?

Пытаюсь сделать стильный прогресс-бар, но у меня проблема с его вертикальной версией. Одна картинка стоит тысячи слов:

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

Все, что я пытался до сих пор, привело к неправильному. Как мне достичь Правды? Я бы предпочел решение только на XAML, если оно не медленное или не вызывает мерцание, когда индикатор выполнения обновляется много раз в секунду.


wpf xaml styles progress-bar
person CannibalSmith    schedule 06.01.2010    source источник
comment
эта картина завораживает...   -  person Robert Fraser    schedule 06.01.2010

Ответы (1)


arrow_upward
5
arrow_downward

Вот один из вариантов:

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

Обратите внимание на третью строку сверху, где вы привязываете свое значение прогресса.

person Aviad P.    schedule 06.01.2010
comment
Ваш код не совсем то, как работает шаблон ProgressBar, но да, вложение дополнительной сетки (или границы) внутри PART_Indicator, выравнивание его по низу и привязка его высоты к ActualHeight PART_Tracks сделали свое дело. - person CannibalSmith; 07.01.2010
comment
Если мой ответ вдохновил вас на поиск решения - я счастлив :) - person Aviad P.; 07.01.2010