09.色をカスタマイズする
通常、進捗状況は緑のグラデーション、背景はグレーのグラデーションで表示されていますが、コントロールテンプレートを使用するとで任意の色に変更することができます。
WPFとSilverlightではコードが異なりますので、分けて解説します。
WPFの場合
WPFのProgressBarは下図に示すグラデーションの組み合わせで構成することとします。
名称 | 説明 |
TrackBackground | トラック部分の背景に使用 |
IndicatorBackground | 進捗部分の背景に使用 |
LightingTop | 進捗部分上部の光沢に使用 |
LightingBottom | 進捗部分下部の光沢に使用 |
上記のグラデーションはリソースとして定義し、コントロールテンプレート内でバインディングします。
背景部分は PART_Trackと名前が付けられたBorder要素で、進捗部分はPART_Indicatorと名前が付けられたGrid内のRectangle要素でバインディングしています。
下記はコントロールテンプレートを使用して色をカスタマイズした例です。
<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要素でバインディングしています。
下記はコントロールテンプレートを使用して色をカスタマイズした例です。
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に色を設定する。