How to increase the thickness of a determinant progress bar?

Question

I've added a determinant progress bar to a Windows 8.1 phone app but I don't see a method of increasing the thickness of the progress bar.

I tried to change the thickness by increasing the height property but this has no effect on it's size.

Does anyone have any idea how to increase the height/thickness of the red progress bar?

This is the declaration of the progress bar in my xaml:

    <ProgressBar IsIndeterminate="False" Maximum="100" Value="30" Width="200" Margin="128,240,128,262"/>

Answer 1

You should be able to change ProgressBar's 'thickness' just by setting its Height property. Just like this:

<ProgressBar Height="50" IsIndeterminate="False" Maximum="100" Value="30" Width="200" Margin="128,240,128,262"/>

Here at GitHub you can find a working sample.

In case you need to change more things - you can redefine the Style of the ProgressBar:

Open designer window, right click on progress bar and then Edit Template, then create a copy. You should then see a Style of your progress bar in resources. In this style you will find ControlTemplate and inside there is Rectangle with name ProgressBarIndicator (at the end):

    ... something above
    <Border x:Name="DeterminateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" MinHeight="{TemplateBinding MinHeight}">
      <Rectangle x:Name="ProgressBarIndicator" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}"/>
    </Border>
  </Grid>
</ControlTemplate>

For example you can set the Height property of this rectangle and you should achieve your goal.