Un ProgressBar más grueso en WP7, ¿cómo?

Question

estoy haciendo una aplicación que tiene un contador y una barra de progreso que representa el tiempo restante, así que si el contador alcanza el 50%, el valor de la barra de progreso es 50. Hasta ahora todo bien, hago una animación de barra de progreso de contador total y listo.

Mi pregunta es: ¿Cómo puedo hacer que la barra de progreso sea más gruesa? La línea en sí es demasiado pequeña y la "principal atracción" de mi aplicación es la barra de progreso y quiero agrandarla. ¿Debo hacer una plantilla y usar otro control? (Como usar un rectángulo visualmente). Traté de cambiar la barra de progreso a un rectángulo, pero no sé cómo llenar el 60% (por ejemplo) del rectángulo.

¿Alguna idea? ¡Gracias!

Answer 1

Esto se puede hacer en el estilo de la barra de progreso.

En el estilo de la barra de progreso por defecto, es necesario

• Añadir a una altura de estilo ProgressBar, dicen
30.
• aumentar la altura de dos rectángulos ProgressBarTrack y ProgressBarIndicator a 24. Son dentro de ControlTemplate de ProgressBar.
• Aumente la altura de HorizontalThumb a 24. Está dentro de PhoneProgressBarSliderStyle.
• En PhoneProgressBarSliderThumb ConttrolTemplate, aumentar tanto la anchura y la altura del rectángulo a 24.

Aquí es todos los estilos por si acaso. :)

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