進捗状況をイメージで表示する

通常進捗状況は、緑のグラデーションで表されますが、ControlTemplateを使用すると進捗部分およびその背景に任意のイメージを使用することができます。

WPFとSilverlightで、ControlTemplateの記述方法が異なりますので分けて説明します。

WPFでは、ProgressBarの背景部分は「トラック」と呼ばれ、PART_Trackという名前が付けられています。

トラックはBorderコントロールでできており、この中に任意のイメージを設定することで背景にイメージを表示させることができます。

同様に、進捗部分にはPART_Indicatorという名前が付けられており、こちらもBorderコントロールでできています。こちらも任意のイメージを設定することで、進捗部分にイメージが表示されることになります。

このとき Stretch属性に UniformToFillを設定するとイメージの縦横比を保ったまま、進捗状況を表示させることができます。

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

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

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

XAMLの例(WPF)

<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も、ProgressBarの背景部分は「トラック」と呼ばれ、こちらはProgressBarTrackという名前が付けられています。

トラックはBorderコントロールでできており、Background属性に任意のイメージを設定することで背景にイメージを表示させています。

また、進捗部分にはProgressBarRootGridという名前が付けられており、こちらはGridコントロールでできています。

GridにはRectangleが配置されており、Fill属性に任意のイメージを設定することで、進捗部分にイメージが表示されることになります。

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

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

Stretch属性に UniformToFillを設定していますが、WPFとは少し挙動がことなりますので注意してください(WPFでは背景と進捗部分のイメージがピッタリと重なるのですが、Silverlightではズレが生じます)。

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

 

XAMLの例(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>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください