WP7 ProgressBar高度和颜色问题

Question

I'd like to change the height of the progress bar within my project however the height property doesn't seem to be doing anything when I set it. Also, is it possible to change the colour of the progress bar from the default blue to another colour? Orange for example.

Answer 1

The ProgressBar have two colours. A background, which is the background of the ProgressBar at all times, and the foreground which is the colour of the ProgressBar when it have a Value that's greater than the minimum. Both can be customized easily, but keep in mind that it defaults to using the Accent colour of the phone, which is recommended, unless you have a really good reason.

To change the actual height, override it's ControlTemplate, and change the height of the ProgressBarIndicator and the ProgressBarTrack , like this: (here set to 20px)

<Style TargetType="ProgressBar">
    <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>
                        <!-- Visual States removed for clarity -->
                    </VisualStateManager.VisualStateGroups>
                    <Grid x:Name="DeterminateRoot" Margin="{TemplateBinding Padding}" Visibility="Visible">


                        <!-- CHANGE THE HEIGHT HERE -->
                        <Rectangle x:Name="ProgressBarTrack" Fill="{TemplateBinding Background}" Height="20" Opacity="0.1"/>
                        <Rectangle x:Name="ProgressBarIndicator" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" Height="20"/>


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