通常進捗状況は、緑のグラデーションで表されますが、ControlTemplateを使用すると進捗部分およびその背景に任意のイメージを使用することができます。
WPFとSilverlightで、ControlTemplateの記述方法が異なりますので分けて説明します。
WPFでは、ProgressBarの背景部分は「トラック」と呼ばれ、PART_Trackという名前が付けられています。
トラックはBorderコントロールでできており、この中に任意のイメージを設定することで背景にイメージを表示させることができます。
同様に、進捗部分にはPART_Indicatorという名前が付けられており、こちらもBorderコントロールでできています。こちらも任意のイメージを設定することで、進捗部分にイメージが表示されることになります。
このとき Stretch属性に UniformToFillを設定するとイメージの縦横比を保ったまま、進捗状況を表示させることができます。
下記は、背景部分と進捗部分にチューリップの画像を使用する例です。
背景部分には透明度を設定しており、進捗が進むごとにイメージが鮮明になるようにしています。
XAMLの例(WPF)
<Window.Resources>
<Style x:Key="{x:Type ProgressBar}" TargetType="{x:Type ProgressBar}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ProgressBar}">
<Grid MinHeight="14" MinWidth="200">
<!-- ProgressBarの背景部分-->
<Border Name="PART_Track"
CornerRadius="2" BorderThickness="1"
Background="#E0E0E0" BorderBrush="#888888">
<Image Source="Images/Tulips.jpg" Stretch="UniformToFill" Opacity="0.5"/>
</Border>
<!-- ProgressBarのインジケーター部分-->
<Border Name="PART_Indicator"
CornerRadius="2" BorderThickness="1"
BorderBrush="#404040"
HorizontalAlignment="Left" >
<Image Source="Images/Tulips.jpg" Stretch="UniformToFill"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ProgressBar Name="ProgressBar1"
VerticalAlignment="Top" HorizontalAlignment="Left"
Margin="12,12,0,0" Height="192" Width="256"
Minimum="0" Maximum="100" />
<Button Name="btnStart"
Content="START" Height="23" HorizontalAlignment="Left"
Margin="12,210,0,0" VerticalAlignment="Top" Width="75" />
<Button Name="btnStop"
Content="STOP" Height="23" HorizontalAlignment="Right"
Margin="0,210,110,0" VerticalAlignment="Top" Width="75" />
</Grid>
Silverlightも、ProgressBarの背景部分は「トラック」と呼ばれ、こちらはProgressBarTrackという名前が付けられています。
トラックはBorderコントロールでできており、Background属性に任意のイメージを設定することで背景にイメージを表示させています。
また、進捗部分にはProgressBarRootGridという名前が付けられており、こちらはGridコントロールでできています。
GridにはRectangleが配置されており、Fill属性に任意のイメージを設定することで、進捗部分にイメージが表示されることになります。
下記は、背景部分と進捗部分にチューリップの画像を使用する例です。
背景部分には透明度を設定しており、進捗が進むごとにイメージが鮮明になるようにしています。
Stretch属性に UniformToFillを設定していますが、WPFとは少し挙動がことなりますので注意してください（WPFでは背景と進捗部分のイメージがピッタリと重なるのですが、Silverlightではズレが生じます）。
XAMLの例(Silverlight)
<navigation:Page.Resources>
<Style x:Key="ProgressBarStyle" TargetType="ProgressBar">
<!-- 進捗状況用イメージ -->
<Setter Property="Foreground">
<Setter.Value>
<ImageBrush ImageSource="../Images/Tulips.jpg" Stretch="UniformToFill"/>
</Setter.Value>
</Setter>
<!-- トラック用イメージ -->
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="../Images/Tulips.jpg" Stretch="UniformToFill" Opacity="0.3"/>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ProgressBar">
<Grid x:Name="Root">
<!-- トラック用 -->
<Border x:Name="ProgressBarTrack" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
CornerRadius="3"/>
<!-- 進捗状況表示用 -->
<Grid x:Name="ProgressBarRootGrid">
<Grid x:Name="DeterminateRoot" Margin="1">
<Rectangle x:Name="ProgressBarIndicator" Fill="{TemplateBinding Foreground}"
HorizontalAlignment="Left" Margin="{TemplateBinding BorderThickness}"
RadiusY="1.5" RadiusX="1.5" StrokeThickness="0.5"/>
</Grid>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</navigation:Page.Resources>
<Grid x:Name="LayoutRoot">
<sdk:Label Content="08.進捗状況をイメージで表示する" FontSize="16" Height="28" HorizontalAlignment="Left"
Margin="10,10,0,0" Name="Label1" VerticalAlignment="Top" Width="616" />
<ProgressBar Name="ProgressBar1"
VerticalAlignment="Top" HorizontalAlignment="Left"
Margin="12,44,0,0" Height="192" Width="256"
Maximum="100" Minimum="0"
Style="{StaticResource ProgressBarStyle}"/>
<Button Content="START" Height="23" HorizontalAlignment="Left" Margin="12,242,0,0"
Name="btnStart" VerticalAlignment="Top" Width="75" />
<Button Content="STOP" Height="23" HorizontalAlignment="Left" Margin="93,242,0,0"
Name="btnStop" VerticalAlignment="Top" Width="75" />
</Grid>