SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Silverlight/WPFで使える逆引きTips集

Silverlight/WPFで使える逆引きTips集
――プログレスバー機能

(9) ProgressBarコントロール

  • X ポスト
  • このエントリーをはてなブックマークに追加

05.現在値がMaximum値に達したときにメッセージを表示する

 本TipsはWPFのみとなります。あらかじめご了承ください。

 DataTriggerクラスを使用すると、「オブジェクトの値が指定した値と等しくなったかどうか」を判定することが可能です。

 このことを利用して、ProgressBarの現在値がMaximum値に達したときにメッセージを表示させる例を紹介します。

現在値が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)
配置方向を設定する例(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)
配置方向を設定する例(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クラスを使用する。 

次のページ
07.値の進捗方向を反転させる

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Silverlight/WPFで使える逆引きTips集連載記事一覧

もっと読む

この記事の著者

HIRO(ヒロ)

HIRO's.NETのHIROです。とある半導体工場のSEです。VB.NET, C#, PowerShellによるプログラミングを楽しんでいます。最近はBlog でPowerShellについて書いています。2008/07/07にPowerShell from Japan!!というサイトを立ち上げまし...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5758 2011/02/17 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング