SHOEISHA iD

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

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

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

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

(9) ProgressBarコントロール

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

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

 本TipsはWPFのみとなります。あらかじめご了承ください。

 コントロールテンプレートを変更することで、任意の形状のProgressBarを作成することが可能です。

 ここでは、円形のProgressBarを作成する方法について説明します。

 「進捗状況をイメージで表示する」や「色をカスタマイズする」に掲載したコントロールテンプレートを見ると、ProgressBarのトラック部分はBorderで、進捗部分はGridとRectangleで構成されていることがわかります。

 そこで、トラック部分をEllipseを使用して円形にし、その内側をVisualBrushで塗りつぶします。

 VisualBrushはトラック領域用のBorder、進捗領域用のGridおよびRectangleを配置してます。

 進捗部分の塗りつぶしのグラデーションはリソース部に定義していますので、好みに合わせて変更してください。

 下記はコントロールテンプレートを使用してProgressBarを円形にする例です。

円形のプログレスバーを作成する例
円形のプログレスバーを作成する例
XAMLの例
<Window.Resources>
    <!-- インジケーターのバックグラウンド -->
    <LinearGradientBrush x:Key="IndicatorBackground" StartPoint="0,0" EndPoint="0,1">
        <GradientStop Offset="0" Color="#FF00FF00" />
        <GradientStop Offset="0.5" Color="#FF00FF00" />
        <GradientStop Offset="1" Color="#AA00FF00" />
    </LinearGradientBrush>
    <!-- 光沢上部 -->
    <LinearGradientBrush x:Key="LightingTop" 
                         StartPoint="0,0" EndPoint="0,1">
        <GradientStop Offset="0" Color="#CCFFFFFF" />
        <GradientStop Offset="0.1" Color="#CCFFFFFF" />
        <GradientStop Offset="0.4" Color="#99FFFFFF" />
        <GradientStop Offset="0.5" 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 x:Key="EllipseProgressBar" TargetType="ProgressBar" BasedOn="{StaticResource ProgressBarSize}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ProgressBar">
                    <Ellipse Name="PART_Track" Stroke="{TemplateBinding BorderBrush}" 
                             StrokeThickness="{TemplateBinding BorderThickness}" >
                        <Ellipse.Fill>
                            <VisualBrush>
                                <VisualBrush.Visual>
                                    <Border Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" 
                                            Background="{TemplateBinding Background}">
                                        <Grid Name="PART_Indicator" HorizontalAlignment="Left" >
                                            <Rectangle Margin="0" RadiusX="1" RadiusY="1" Fill="{StaticResource IndicatorBackground}" >
                                            </Rectangle>
                                            <Rectangle Margin="0" Fill="{StaticResource LightingTop}" />                                                
                                            <Rectangle Margin="0" Fill="{StaticResource LightingBottom}" />                                                
                                        </Grid>
                                    </Border>
                                </VisualBrush.Visual>
                            </VisualBrush>
                        </Ellipse.Fill>
                    </Ellipse>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Grid>
    <ProgressBar Name="ProgressBar1"
        VerticalAlignment="Top" HorizontalAlignment="Left" 
                Margin="41,12,0,0" Height="100" Width="100" 
                Minimum="0" Maximum="100"
                Style="{StaticResource EllipseProgressBar}" />       
    <Button Content="START" Height="23" HorizontalAlignment="Left" Margin="12,116,0,0" 
            Name="btnStart" VerticalAlignment="Top" Width="75" />
    <Button Content="STOP" Height="23" Margin="92,116,0,0" Name="btnStop" 
            VerticalAlignment="Top" HorizontalAlignment="Left" Width="75" />
</Grid>
ポイント

 任意の形のProgressBarを作成するにはコントロールテンプレートをカスタマイズする。

 円形のProgressBarははPART_Track部をEllipse要素で構成し、内部をVisualBrushで塗りつぶす。VisualBrushの内側にはトラック領域用のBorder、進捗領域用のGridおよびRectangleを配置する。

まとめ

 今回はProgressBarコントロールのTipsを紹介しました。

 単に進捗を表すにしても、カスタマイズ次第で効果的な表現を行うことが可能です。

 今回紹介したTipsの一部を変更することで、任意の色や形のプログレスバーを作成することができますので、是非挑戦してみてください。

 最後にProgressBarコントロールのMSDNリンクを下記に示します。

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

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング