WPFのProgressBarコントロールは Orientation プロパティを使用して、配置方向を水平または垂直に設定することができます。
Orientation プロパティにはOrientation列挙体の値を指定します。
Orientation列挙体 メンバ名 説明 Horizontal 水平方向に配置 Veritical 司直方向に配置
SilverlightのProgressBarコントロールは Orientation プロパティがありませんが、RotateTransform クラスを使用することで実現可能です。
RotateTransformを使用すると角度を指定することができるため、斜めに配置することも可能です。
まずは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クラスを利用して配置方向を設定します。
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; }