色をカスタマイズする

2013.06.25
スポンサーリンク

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

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

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

グラデーションの組み合わせ

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

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

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

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

色をカスタマイズする例

 

 

XAMLの例(WPF)

<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のProgressBarは下図に示すグラデーションの組み合わせで構成することとします。

グラデーションの組み合わせ(Silverlight)

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

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

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

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

色をカスタマイズする例

 

XAMLの例

<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/Silverlight アプリ
コントロール
ProgressBar
タイトルとURLをコピーしました