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にイメージを設定する。