Silverlight 3 ProgressBar Template

Question

Hi All,

I am trying to retemplate a Silverlight3 progress bar, to show the "Value" in a TextBlock within the ProgressBarIndicator, and the "Maximum" in another textblock in the ProgressBarTrack.

I think that using TemplateBinding on the Value and Maximum properties would do this, but it isn't working.

FYI the template I have so far is:

     <Style x:Key="ProgressBarStyle1" TargetType="ProgressBar">
  <Setter Property="Foreground" Value="#FF027DB8"/>
  <Setter Property="Background" Value="#FFD2D5D8"/>
  <Setter Property="BorderThickness" Value="0"/>
  <Setter Property="Maximum" Value="100"/>
  <Setter Property="Value" Value="50"/>
  <Setter Property="IsTabStop" Value="False"/>
  <Setter Property="BorderBrush">
   <Setter.Value>
    <LinearGradientBrush EndPoint=".5,1" StartPoint=".5,0">
     <GradientStop Color="#FFAEB7BF" Offset="0"/>
     <GradientStop Color="#FF919EA7" Offset="0.35"/>
     <GradientStop Color="#FF7A8A99" Offset="0.35"/>
     <GradientStop Color="#FF647480" Offset="1"/>
    </LinearGradientBrush>
   </Setter.Value>
  </Setter>
  <Setter Property="Template">
   <Setter.Value>
    <ControlTemplate TargetType="ProgressBar">
     <Grid x:Name="Root">
      <VisualStateManager.VisualStateGroups>
       <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Determinate"/>
        <VisualState x:Name="Indeterminate">
         <Storyboard RepeatBehavior="Forever">
          <ObjectAnimationUsingKeyFrames Duration="00:00:00" Storyboard.TargetName="IndeterminateRoot" Storyboard.TargetProperty="(UIElement.Visibility)">
           <DiscreteObjectKeyFrame KeyTime="00:00:00">
            <DiscreteObjectKeyFrame.Value>
             <Visibility>Visible</Visibility>
            </DiscreteObjectKeyFrame.Value>
           </DiscreteObjectKeyFrame>
          </ObjectAnimationUsingKeyFrames>
          <ObjectAnimationUsingKeyFrames Duration="00:00:00" Storyboard.TargetName="DeterminateRoot" Storyboard.TargetProperty="(UIElement.Visibility)">
           <DiscreteObjectKeyFrame KeyTime="00:00:00">
            <DiscreteObjectKeyFrame.Value>
             <Visibility>Collapsed</Visibility>
            </DiscreteObjectKeyFrame.Value>
           </DiscreteObjectKeyFrame>
          </ObjectAnimationUsingKeyFrames>
         </Storyboard>
        </VisualState>
       </VisualStateGroup>
      </VisualStateManager.VisualStateGroups>
      <Border x:Name="ProgressBarTrack" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3" ToolTipService.ToolTip="{TemplateBinding Maximum}">
       <Border.Effect>
        <DropShadowEffect Color="#FF626262" Opacity="0.8"/>
       </Border.Effect>
       <TextBlock HorizontalAlignment="Right" VerticalAlignment="Center" Text="{TemplateBinding Maximum}" TextWrapping="NoWrap" Foreground="White" Margin="0,0,2,0"/>
      </Border>
      <Grid x:Name="ProgressBarRootGrid">
       <Rectangle x:Name="ProgressBarRootGradient" RadiusX="1.5" RadiusY="1.5" Margin="{TemplateBinding BorderThickness}" Canvas.ZIndex="1" Stroke="Black">
        <Rectangle.Fill>
         <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
          <GradientStop Color="#B2FFFFFF" Offset="0"/>
          <GradientStop Color="#0CFFFFFF" Offset="0.198"/>
          <GradientStop Color="#91FFFFFF" Offset="0.336"/>
          <GradientStop Color="#0CFFFFFF" Offset="1"/>
         </LinearGradientBrush>
        </Rectangle.Fill>
       </Rectangle>
       <Grid x:Name="IndeterminateRoot" Visibility="Collapsed">
        <Rectangle x:Name="IndeterminateSolidFill" Fill="{TemplateBinding Foreground}" Stroke="#FF448DCA" StrokeThickness="0" RadiusX="2" RadiusY="2" Margin="{TemplateBinding BorderThickness}" Opacity="1" RenderTransformOrigin="0.5,0.5"/>
       </Grid>
       <Grid x:Name="DeterminateRoot" Margin="1">
        <Grid x:Name="ProgressBarIndicator" Margin="0" HorizontalAlignment="Left" ToolTipService.ToolTip="{TemplateBinding Value}">
         <Rectangle x:Name="ProgressBarIndicator1" Fill="{TemplateBinding Foreground}" StrokeThickness="0" RadiusX="1.5" RadiusY="1.5" Margin="0"/>
         <TextBlock HorizontalAlignment="Right" Margin="0,0,2,0" VerticalAlignment="Center" TextWrapping="Wrap" Foreground="White" Text="{TemplateBinding Value}"/>
        </Grid>
       </Grid>
      </Grid>
     </Grid>
    </ControlTemplate>
   </Setter.Value>
  </Setter>
 </Style>

And I am referencing this via local UserControl.Resources as follows:

     <ProgressBar x:Name="availableHoursProgress"
                 Margin="2" 
                 Foreground="#FF42B802" 
                 Background="Red" 
                 Style="{StaticResource ProgressBarStyle1}" 
                 BorderThickness="0" 
                 BorderBrush="{x:Null}" 
                 Value="2" 
                 Maximum="7.5"
     HorizontalAlignment="Stretch"
                 />

Thanks in advance for any help you can offer,

Mark

==== UPDATE ====

OK, this issue is because the object I am binding too is of type Double, and Textblock.Text is expecting a string.

So my new problem is how to apply a converter to the TemplateBinding, or alternatively expose a string property on ProgressBar:

public string ValueString{ get { return Value.ToString(); } }

Answer 1

This question has already been answered here.

Good work James!!