05.現在値がMaximum値に達したときにメッセージを表示する
本TipsはWPFのみとなります。あらかじめご了承ください。
DataTriggerクラスを使用すると、「オブジェクトの値が指定した値と等しくなったかどうか」を判定することが可能です。
このことを利用して、ProgressBarの現在値がMaximum値に達したときにメッセージを表示させる例を紹介します。
現在値がMaximum値に達したときにメッセージを表示する例
「04.ProgressBar上に進捗率を表示する」で紹介したProgressBarのXAMLコードで、TextBlockの部分を下記のように修正します。
このXAMLでは、DataTriggerでProgressBar1のValueをバインディングし、Value属性に"100"を指定しています。
これは「ProgressBar1.Value が100（Maximum値）になったら」を意味し、「この条件を満たした場合は TextBlock1.Textに"ダウンロード完了！！"と表示せよ」ということになります。
このようにXAMLだけでも値を判断してメッセージを表示することが可能です。
XAMLの例
<Grid Margin="12,12,0,0" HorizontalAlignment="Left" Width="249" Height="34" VerticalAlignment="Top">
<ProgressBar Name="ProgressBar1"
Minimum="0" Maximum="100" Value="0" />
<Viewbox>
<TextBlock Name="TextBlock1" TextAlignment="Center">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=ProgressBar1, Path=Value}" Value="100">
<Setter Property="Text" Value="ダウンロード完了！！" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Viewbox>
</Grid>
ポイント
DataTriggerを使用することで、オブジェクトの値を判断してテキストを表示することができる。
06.配置方向を設定する
WPFのProgressBarコントロールは Orientation プロパティを使用して、配置方向を水平または垂直に設定することができます。
Orientation プロパティにはOrientation列挙体の値を指定します。
Orientation列挙体
| 値 | 説明 |
| Horizontal | 水平方向に配置 |
| Vertical | 垂直方向に配置 |
SilverlightのProgressBarコントロールは Orientation プロパティがありませんが、RotateTransform クラスを使用することで実現可能です。
RotateTransformを使用すると角度を指定することができるため、斜めに配置することも可能です。
まずはWPFによる配置方向の設定例を下記に示します。
配置方向を設定する例（WPF）
XAMLの例
<!-- 水平方向 -->
<ProgressBar Name="ProgressBar1"
VerticalAlignment="Top" HorizontalAlignment="Left"
Margin="12,12,0,0" Height="16" Width="116"
Minimum="0" Maximum="100" Value="50"/>
<!-- 垂直方向 -->
<ProgressBar Name="ProgressBar2"
VerticalAlignment="Top" HorizontalAlignment="Left"
Margin="146,12,0,0" Height="95" Width="15"
Minimum="0" Maximum="100" Value="50"
Orientation="Vertical"/>
<!-- -45度 -->
<ProgressBar Name="ProgressBar3"
VerticalAlignment="Top" HorizontalAlignment="Left"
Margin="177,46,0,0" Height="16" Width="100"
Minimum="0" Maximum="100" Value="50">
<ProgressBar.RenderTransform>
<RotateTransform CenterX="50" CenterY="8" Angle="-45" />
</ProgressBar.RenderTransform>
</ProgressBar>
VBの例
Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
'水平方向に配置
ProgressBar1.Orientation = Orientation.Horizontal
'垂直方向に配置
ProgressBar2.Orientation = Orientation.Vertical
'-45度に配置
Dim wmt As New RotateTransform
wmt.CenterX = ProgressBar3.Width / 2
wmt.CenterY = ProgressBar3.Height / 2
wmt.Angle = -45.0
ProgressBar3.RenderTransform = wmt
End Sub
C#の例
private void Window_Loaded(object sender, RoutedEventArgs e)
{
// 水平方向に配置
progressBar1.Orientation = Orientation.Horizontal;
// 垂直方向に配置
progressBar2.Orientation = Orientation.Vertical;
// -45度に配置
RotateTransform wmt = new RotateTransform();
wmt.CenterX = progressBar3.Width / 2;
wmt.CenterY = progressBar3.Height / 2;
wmt.Angle = -45.0;
progressBar3.RenderTransform = wmt;
}
次にSilverlightの例を下記に示します。
冒頭でも述べたように、Orientation プロパティがないため、RenderTransformクラスを利用して配置方向を設定します。
配置方向を設定する例（Silverlight）
XAMLの例
<!-- 水平方向 -->
<ProgressBar Name="ProgressBar1"
VerticalAlignment="Top" HorizontalAlignment="Left"
Margin="12,44,0,0" Height="16" Width="116"
Minimum="0" Maximum="100" Value="50"/>
<!-- 垂直方向 -->
<ProgressBar Name="ProgressBar2"
VerticalAlignment="Top" HorizontalAlignment="Left"
Margin="107,104,0,0" Height="16" Width="116"
Minimum="0" Maximum="100" Value="50">
<ProgressBar.RenderTransform>
<RotateTransform CenterX="50" CenterY="8" Angle="-90" />
</ProgressBar.RenderTransform>
</ProgressBar>
<!-- -45度 -->
<ProgressBar Name="ProgressBar3"
VerticalAlignment="Top" HorizontalAlignment="Left"
Margin="178,83,0,0" Height="16" Width="100"
Minimum="0" Maximum="100" Value="50">
<ProgressBar.RenderTransform>
<RotateTransform CenterX="50" CenterY="8" Angle="-45" />
</ProgressBar.RenderTransform>
</ProgressBar>
VBの例
Private Sub Page_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
Dim wmt1 As New RotateTransform
Dim wmt2 As New RotateTransform
Dim wmt3 As New RotateTransform
'水平方向に配置（既定では水平に配置されるので特に設定する必要はない）
wmt1.CenterX = ProgressBar1.Width / 2
wmt1.CenterY = ProgressBar1.Height / 2
wmt1.Angle = 0
ProgressBar1.RenderTransform = wmt1
'垂直方向に配置
wmt2.CenterX = ProgressBar2.Width / 2
wmt2.CenterY = ProgressBar2.Height / 2
wmt2.Angle = 90.0
ProgressBar2.RenderTransform = wmt2
'-45度で配置
wmt3.CenterX = ProgressBar3.Width / 2
wmt3.CenterY = ProgressBar3.Height / 2
wmt3.Angle = -45.0
ProgressBar3.RenderTransform = wmt3
End Sub
C#の例
private void Page_Loaded(object sender, RoutedEventArgs e)
{
RotateTransform wmt1 = new RotateTransform();
RotateTransform wmt2 = new RotateTransform();
RotateTransform wmt3 = new RotateTransform();
// 水平方向に配置（既定では水平に配置されるので特に設定する必要はない）
wmt1.CenterX = progressBar1.Width / 2;
wmt1.CenterY = progressBar1.Height / 2;
wmt1.Angle = 0;
progressBar1.RenderTransform = wmt1;
// 垂直方向に配置
wmt2.CenterX = progressBar2.Width / 2;
wmt2.CenterY = progressBar2.Height / 2;
wmt2.Angle = 90.0;
progressBar2.RenderTransform = wmt2;
// -45度で配置
wmt3.CenterX = progressBar3.Width / 2;
wmt3.CenterY = progressBar3.Height / 2;
wmt3.Angle = -45.0;
progressBar3.RenderTransform = wmt3;
}
ポイント
WPFのProgressBarで配置方向を設定するには OrientationプロパティまたはRenderTransformクラスを使用する。
SilverlightのProgressBarで配置方向を設定するにはRenderTransformクラスを使用する。
