Более толстый ProgressBar в WP7, как?

Question

Я создаю приложение, у которого есть счетчик и индикатор выполнения, представляющий оставшееся время, поэтому, если счетчик достигает 50%, значение индикатора выполнения равно 50. Пока все хорошо, я делаю анимацию индикатора выполнения для общего количества счетчиков и запускаю.

Мой вопрос: как я могу сделать индикатор выполнения толще? Сама строка слишком мала, и «главной достопримечательностью» моего приложения является индикатор выполнения, и я хочу увеличить его. Должен ли я сделать шаблон и использовать другой элемент управления? (Как визуально с помощью прямоугольника). Я попытался изменить индикатор выполнения на прямоугольник, но я не знаю, как заполнить 60% (например) прямоугольника.

Есть идеи? Спасибо!

Answer 1

Это можно сделать в стиле индикатора выполнения.

В стиле индикатора выполнения по умолчанию вам нужно

• Добавление высоты в стиль ProgressBar, скажем 30.
• Увеличить высоту двух прямоугольников ProgressBarTrack и ProgressBarIndicator до 24. Они внутри шаблона управления ProgressBar.
• Увеличение высоты HorizontalThumb до 24. Это внутри PhoneProgressBarSliderStyle.
• В PhoneProgressBarSliderThumb ConttrolTemplate, увеличить как Ширина и высота прямоугольника до 24.

Вот все стили на всякий случай. :)

    <ControlTemplate x:Key="PhoneProgressBarSliderThumb" TargetType="Thumb">
        <Rectangle Fill="{TemplateBinding Foreground}" Height="24" IsHitTestVisible="False" Width="24"/>
    </ControlTemplate>
    <Style x:Key="PhoneProgressBarSliderStyle" TargetType="Slider">
        <Setter Property="Maximum" Value="3000"/>
        <Setter Property="Minimum" Value="0"/>
        <Setter Property="Value" Value="0"/>
        <Setter Property="Opacity" Value="0"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Slider">
                    <Grid IsHitTestVisible="False">
                        <Grid x:Name="HorizontalTemplate">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" Grid.Column="0" Height="0" Template="{x:Null}"/>
                            <Thumb x:Name="HorizontalThumb" Grid.Column="1" Foreground="{TemplateBinding Foreground}" Height="24" IsTabStop="False" Template="{StaticResource PhoneProgressBarSliderThumb}"/>
                            <RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2" Height="0" Template="{x:Null}"/>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ProgressBarStyle1" TargetType="ProgressBar">
        <Setter Property="Height" Value="30"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>
        <Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/>
        <Setter Property="Maximum" Value="100"/>
        <Setter Property="IsHitTestVisible" Value="False"/>
        <Setter Property="Padding" Value="{StaticResource PhoneHorizontalMargin}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ProgressBar">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Determinate"/>
                                <VisualState x:Name="Indeterminate">
                                    <Storyboard Duration="00:00:04.4" RepeatBehavior="Forever">
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="IndeterminateRoot">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DeterminateRoot">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Value" Storyboard.TargetName="Slider1">
                                            <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="1000">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <ExponentialEase EasingMode="EaseOut" Exponent="1"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="2000"/>
                                            <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="3000">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <ExponentialEase EasingMode="EaseIn" Exponent="1"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2" Storyboard.TargetProperty="Value" Storyboard.TargetName="Slider2">
                                            <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="1000">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <ExponentialEase EasingMode="EaseOut" Exponent="1"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="2000"/>
                                            <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="3000">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <ExponentialEase EasingMode="EaseIn" Exponent="1"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.4" Storyboard.TargetProperty="Value" Storyboard.TargetName="Slider3">
                                            <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="1000">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <ExponentialEase EasingMode="EaseOut" Exponent="1"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="2000"/>
                                            <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="3000">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <ExponentialEase EasingMode="EaseIn" Exponent="1"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.6" Storyboard.TargetProperty="Value" Storyboard.TargetName="Slider4">
                                            <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="1000">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <ExponentialEase EasingMode="EaseOut" Exponent="1"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="2000"/>
                                            <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="3000">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <ExponentialEase EasingMode="EaseIn" Exponent="1"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.8" Storyboard.TargetProperty="Value" Storyboard.TargetName="Slider5">
                                            <EasingDoubleKeyFrame KeyTime="00:00:00.5" Value="1000">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <ExponentialEase EasingMode="EaseOut" Exponent="1"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                            <LinearDoubleKeyFrame KeyTime="00:00:02.0" Value="2000"/>
                                            <EasingDoubleKeyFrame KeyTime="00:00:02.5" Value="3000">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <ExponentialEase EasingMode="EaseIn" Exponent="1"/>
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Slider1">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                                            <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.2" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Slider2">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                                            <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.4" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Slider3">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                                            <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Slider4">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                                            <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.8" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Slider5">
                                            <DiscreteDoubleKeyFrame KeyTime="0" Value="1"/>
                                            <DiscreteDoubleKeyFrame KeyTime="00:00:02.5" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid x:Name="DeterminateRoot" Margin="{TemplateBinding Padding}" Visibility="Visible">
                            <Rectangle x:Name="ProgressBarTrack" Fill="{TemplateBinding Background}" Height="24" Opacity="0.1"/>
                            <Rectangle x:Name="ProgressBarIndicator" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" Height="24"/>
                        </Grid>
                        <Border x:Name="IndeterminateRoot" Margin="{TemplateBinding Padding}" Visibility="Collapsed">
                            <Grid>
                                <Slider x:Name="Slider1" Foreground="{TemplateBinding Foreground}" Style="{StaticResource PhoneProgressBarSliderStyle}"/>
                                <Slider x:Name="Slider2" Foreground="{TemplateBinding Foreground}" Style="{StaticResource PhoneProgressBarSliderStyle}"/>
                                <Slider x:Name="Slider3" Foreground="{TemplateBinding Foreground}" Style="{StaticResource PhoneProgressBarSliderStyle}"/>
                                <Slider x:Name="Slider4" Foreground="{TemplateBinding Foreground}" Style="{StaticResource PhoneProgressBarSliderStyle}"/>
                                <Slider x:Name="Slider5" Foreground="{TemplateBinding Foreground}" Style="{StaticResource PhoneProgressBarSliderStyle}"/>
                            </Grid>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Answer 2

<ProgressBar Width="300" Background="White" Foreground="Red" Height="28" Margin="78,0"   RenderTransformOrigin="0.5,0.5">
    <ProgressBar.RenderTransform>
    <CompositeTransform ScaleY="-5"/>
    </ProgressBar.RenderTransform>
</ProgressBar>