SHOEISHA iD

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

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

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

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

(9) ProgressBarコントロール

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

09.色をカスタマイズする

 通常、進捗状況は緑のグラデーション、背景はグレーのグラデーションで表示されていますが、コントロールテンプレートを使用するとで任意の色に変更することができます。

 WPFとSilverlightではコードが異なりますので、分けて解説します。

WPFの場合

 WPFのProgressBarは下図に示すグラデーションの組み合わせで構成することとします。

グラデーションの構成
グラデーションの構成
グラデーションの構成
名称 説明
TrackBackground トラック部分の背景に使用
IndicatorBackground 進捗部分の背景に使用
LightingTop 進捗部分上部の光沢に使用
LightingBottom 進捗部分下部の光沢に使用

 上記のグラデーションはリソースとして定義し、コントロールテンプレート内でバインディングします。

 背景部分は PART_Trackと名前が付けられたBorder要素で、進捗部分はPART_Indicatorと名前が付けられたGrid内のRectangle要素でバインディングしています。

 下記はコントロールテンプレートを使用して色をカスタマイズした例です。

色をカスタマイズする例(WPF)
色をカスタマイズする例(WPF)
XAMLの例
<Window.Resources>
    <!-- トラックのバックグラウンド -->
    <LinearGradientBrush x:Key="TrackBackground" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFBFBFB" Offset="0"/>
            <GradientStop Color="#FFB1B1B1" Offset="1"/>
    </LinearGradientBrush>
    
    <!-- インジケーターのバックグラウンド -->
    <LinearGradientBrush x:Key="IndicatorBackground" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFE7EFF7" Offset="0"/>
            <GradientStop Color="#FF7FBFFF" Offset="0.5"/>
            <GradientStop Color="#FF0A4178" Offset="1"/>
    </LinearGradientBrush>
    <!-- 光沢上部 -->
    <LinearGradientBrush x:Key="LightingTop" 
                         StartPoint="0,0" EndPoint="0,0.5">
        <GradientStop Offset="0" Color="#CCFFFFFF" />
        <GradientStop Offset="0.1" Color="#CCFFFFFF" />
        <GradientStop Offset="0.4" Color="#99FFFFFF" />
        <GradientStop Offset="1" Color="#00FFFFFF" />
    </LinearGradientBrush>
    <!-- 光沢下部-->
    <RadialGradientBrush x:Key="LightingBottom"
                         GradientOrigin="0.5,1.0"
                         Center="0.5,1.0" RadiusX="1" RadiusY="0.1">
        <RadialGradientBrush.GradientStops>
            <GradientStop Color="#AAFFFFFF" Offset="0" />
            <GradientStop Color="#00FFFFFF" Offset="1" />
        </RadialGradientBrush.GradientStops>
    </RadialGradientBrush>


    <!-- ProgressBarのサイズ設定 -->
    <Style TargetType="ProgressBar" x:Key="ProgressBarSize">
        <Setter Property="Width" Value="100" />
        <Setter Property="Height" Value="100" />
        <Setter Property="Margin" Value="10,0,0,10" />
    </Style>
    <!-- プログレスバースタイルを定義 -->
    <Style TargetType="ProgressBar" x:Key="RectangleProgressBar">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ProgressBar">
                    <Grid>
                        <Border Name="PART_Track" CornerRadius="1"  BorderThickness="1" 
                                Background="{StaticResource TrackBackground}"
                                BorderBrush="{TemplateBinding BorderBrush}"/>
                        <Grid Name="PART_Indicator" HorizontalAlignment="Left" >
                            <Rectangle x:Name="prgBackground" Margin="0" RadiusX="1" RadiusY="1" 
                                       Fill="{StaticResource IndicatorBackground}" />
                            <Rectangle x:Name="Highlight1" Margin="1" RadiusX="1" RadiusY="1"
                                       Fill="{StaticResource LightingTop}" />
                            <Rectangle x:Name="Highlight2" Margin="0" RadiusX="1" RadiusY="1"
                                       Fill="{StaticResource LightingBottom}" />
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<Grid>    
    <ProgressBar Name="ProgressBar1" 
                VerticalAlignment="Top" HorizontalAlignment="Left" 
                Margin="12,12,0,0" Height="25" Width="254" 
                Minimum="0" Maximum="100"
                Style="{StaticResource RectangleProgressBar}"/>
    <Button Content="START" Height="23" HorizontalAlignment="Left" Margin="12,43,0,0" Name="btnStart" VerticalAlignment="Top" Width="75" />
    <Button Content="STOP" Height="23" Margin="93,43,110,0" Name="btnStop" VerticalAlignment="Top" />    
</Grid>

Silverlightの場合

 SilverlightのProgressBarは下図に示すグラデーションの組み合わせで構成することとします。

グラデーションの構成
名称 説明
TrackBackground トラック部分の背景に使用
IndicatorBackground 進捗部分の背景に使用
グラデーションの構成

 上記のグラデーションはリソースとして定義し、コントロールテンプレート内でバインディングします。

 背景部分は ProgressBarTrackと名前が付けられたBorder要素で、進捗部分はProgressBarRootGridと名前が付けられたGrid内のRectangle要素でバインディングしています。

 下記はコントロールテンプレートを使用して色をカスタマイズした例です。

色をカスタマイズする例(Silverlight)
色をカスタマイズする例(Silverlight)
XAMLの例
lt;Grid.Resources>
    <Style x:Key="ProgressBarStyle" TargetType="ProgressBar">
        <!-- トラック部分の背景 -->
        <Setter Property="Foreground">
            <Setter.Value>
                <LinearGradientBrush EndPoint=".5,1" StartPoint=".5,0">
                    <GradientStop Color="#FFF9F9F7" Offset="0"/>
                    <GradientStop Color="#FFC63131" Offset="0.5"/>
                    <GradientStop Color="#FFEF9437" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <!-- 進捗部分の背景 -->
        <Setter Property="Background" Value="Gray"/>
        
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Maximum" Value="100"/>
        <Setter Property="IsTabStop" Value="False"/>

        <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">
                        </Border>
                        <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>            
</Grid.Resources>
<sdk:Label Content="09.色をカスタマイズする" 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="23" Width="256" 
              Maximum="100" Minimum="0" 
              Style="{StaticResource ProgressBarStyle}"/>
<Button Content="START" Height="23" HorizontalAlignment="Left" Margin="12,73,0,0" Name="btnStart" VerticalAlignment="Top" Width="75" />
<Button Content="STOP" Height="23" HorizontalAlignment="Left" Margin="93,73,0,0" Name="btnStop" VerticalAlignment="Top" Width="75" />
ポイント

 色をカスタマイズするにはコントロールテンプレートをカスタマイズする。

 WPFのトラックはPART_Trackに、進捗部分はPART_Indicatorに色を設定する。

 SilverlightのトラックはProgressBarTrackに、進捗部分はProgressBarRootGridに色を設定する。 

次のページ
10.円形のプログレスバーを作成する

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

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング