SHOEISHA iD

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

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

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

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

(9) ProgressBarコントロール

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

07.値の進捗方向を反転させる

 通常、値の進捗は左から右に向かって行われますが、FlowDirection プロパティRightToLeftを指定すると、進捗を右から左に変更することができます。

 FlowDirectionプロパティにはFlowDirection列挙体の値を指定します。

FlowDirection列挙体
説明
LeftToRight 左から右に進捗させる
RightToLeft 右から左に進捗させる
値の進捗方向を反転させる例
値の進捗方向を反転させる例
XAMLの例
<ProgressBar Name="ProgressBar1" 
             VerticalAlignment="Top" HorizontalAlignment="Left" 
             Margin="12,12,0,0" Height="16" Width="254" 
             Minimum="0" Maximum="100" Value="50"
             FlowDirection="RightToLeft"/>
VBの例
Private Sub Window_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
    '進捗方向を反転させる
    ProgressBar1.FlowDirection = FlowDirection.RightToLeft
End Sub
C#の例
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を設定するとイメージの縦横比を保ったまま、進捗状況を表示させることができます。

 下記は、背景部分と進捗部分にチューリップの画像を使用する例です。

 背景部分には透明度を設定しており、進捗が進むごとにイメージが鮮明になるようにしています。

進捗状況をイメージで表示する例(WPF)
進捗状況をイメージで表示する例(WPF)

  

進捗状況をイメージで表示する例(Silverlight)
進捗状況をイメージで表示する例(Silverlight)
XAMLの例
<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ではズレが生じます)。

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

次のページ
09.色をカスタマイズする

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

  • 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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング