07.値の進捗方向を反転させる
通常、値の進捗は左から右に向かって行われますが、FlowDirection プロパティにRightToLeftを指定すると、進捗を右から左に変更することができます。
FlowDirectionプロパティにはFlowDirection列挙体の値を指定します。
| 値 | 説明 |
| LeftToRight | 左から右に進捗させる |
| RightToLeft | 右から左に進捗させる |
<ProgressBar Name="ProgressBar1"
VerticalAlignment="Top" HorizontalAlignment="Left"
Margin="12,12,0,0" Height="16" Width="254"
Minimum="0" Maximum="100" Value="50"
FlowDirection="RightToLeft"/>
Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
'進捗方向を反転させる
ProgressBar1.FlowDirection = FlowDirection.RightToLeft
End Sub
private void Window_Loaded(object sender, RoutedEventArgs e)
{
// 進捗方向を反転させる
progressBar1.FlowDirection = FlowDirection.RightToLeft;
}
進捗方向を反転させるにはFlowDirectionプロパティを使用する。
08.進捗状況をイメージで表示する
通常進捗状況は、緑のグラデーションで表されますが、ControlTemplateを使用すると進捗部分およびその背景に任意のイメージを使用することができます。
WPFとSilverlightで、ControlTemplateの記述方法が異なりますので分けて説明します。
WPFの場合
WPFでは、ProgressBarの背景部分は「トラック」と呼ばれ、PART_Trackという名前が付けられています。
トラックはBorderコントロールでできており、この中に任意のイメージを設定することで背景にイメージを表示させることができます。
同様に、進捗部分にはPART_Indicatorという名前が付けられており、こちらもBorderコントロールでできています。こちらも任意のイメージを設定することで、進捗部分にイメージが表示されることになります。
このとき Stretch属性に UniformToFillを設定するとイメージの縦横比を保ったまま、進捗状況を表示させることができます。
下記は、背景部分と進捗部分にチューリップの画像を使用する例です。
背景部分には透明度を設定しており、進捗が進むごとにイメージが鮮明になるようにしています。
<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の場合
Silverlightも、ProgressBarの背景部分は「トラック」と呼ばれ、こちらはProgressBarTrackという名前が付けられています。
トラックはBorderコントロールでできており、Background属性に任意のイメージを設定することで背景にイメージを表示させています。
また、進捗部分にはProgressBarRootGridという名前が付けられており、こちらはGridコントロールでできています。
GridにはRectangleが配置されており、Fill属性に任意のイメージを設定することで、進捗部分にイメージが表示されることになります。
下記は、背景部分と進捗部分にチューリップの画像を使用する例です。
背景部分には透明度を設定しており、進捗が進むごとにイメージが鮮明になるようにしています。
Stretch属性にUniformToFillを設定していますが、WPFとは少し挙動が異なりますので注意してください（WPFでは背景と進捗部分のイメージがピッタリと重なるのですが、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>
進捗状況の表示にイメージを使用するにはコントロールテンプレートをカスタマイズする。
WPFのトラックはPART_Trackに、進捗部分はPART_Indicatorにイメージを設定する。
SilverlightのトラックはProgressBarTrackに、進捗部分はProgressBarRootGridにイメージを設定する。
