A thicker ProgressBar in WP7, how? - xaml

Question

im making an app who have a counter and a progressbar representing the time left, so if the counter reaches its 50%, the progressbar value is 50. So far so good, I make a progressbar animation of counter total and go.
My question is: How can I make the progressbar thicker? The line itself is too small and the "principal attraction" of my app is the progressbar and I want to make it bigger. Have I to make a template and using another control? (Like using a rectangle visually). I tried changing the progressbar to a rectangle but I don't know how to fill the 60% (e.g) of the rectangle.
Any ideas? Thank you!

Answer 1

This can be done in the progress bar's style.
In the default progress bar's style, you need to
Add a Height to ProgressBar style,
say 30.
Increase the Height of two Rectangles
ProgressBarTrack and
ProgressBarIndicator to 24. They are
inside the ProgressBar's ControlTemplate.
Increase the Height of
HorizontalThumb to 24. It's inside
the PhoneProgressBarSliderStyle.
In PhoneProgressBarSliderThumb
ConttrolTemplate, increase both the
Rectangle's Width and Height to 24.
Here is all styles just in case.:)
<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>