試してみよう : SimpleProgressBar の進行状況インジケータのカスタマイズ

SimpleProgressBar コントロール テンプレートを使用すると、Microsoft Expression Blend で進行状況インジケータの外観を簡単にカスタマイズできます。SimpleProgressBar は水平方向の進行状況バーのみをサポートします。

SimpleProgressBar の進行状況インジケータをカスタマイズするには

1. Expression Blend で、アートボード上に SimpleProgressBar を描画します。

   ヒント :
   簡易スタイルを使用するには、アセット ライブラリ の [コントロール] タブで [簡易スタイル] をクリックします。一覧から簡易スタイル コントロールを選択したら、アートボード上で描画できます。

2. [オブジェクトとタイムライン] で進行状況バーを右クリックし、[コントロール パーツ (テンプレート) の編集] をポイントして [テンプレートの編集] をクリックします。SimpleStyles.xaml リソース ディクショナリを変更しない場合は、[テンプレートの編集] ではなく、[コピーの編集] をクリックし、新しいテンプレートを作成してドキュメントに保存します。コピーの作成の詳細については、「リソースの作成」を参照してください。

   ヒント :
   テンプレートの編集モードを終了し、ドキュメントのスコープに戻るには、[上へスコープ] ボタン をクリックします。このボタンは、[組み合わせ] パネルの要素ツリーの上にあります。既存テンプレートのテンプレート編集モードに戻るには、[オブジェクトとタイムライン] でテンプレートを編集する要素を右クリックし、[コントロール パーツ (テンプレート) の編集] をポイントして、[テンプレートの編集] をクリックします。

3. [オブジェクトとタイムライン] で PART_Indicator 要素を右クリックし、[レイアウトの種類の変更] をポイントして、[グリッド] をクリックします。アートボード上でマウスを使用して、または [プロパティ] パネルの [レイアウト] で Width プロパティを変更して、PART_Indicator の幅を広げます。

4. [オブジェクトとタイムライン] で PART_Indicator 要素をダブルクリックしてアクティブにします。

   PART_Indicator 要素がアクティブにされ、Border ではなくグリッド パネルであるため、PART_Indicator 要素に子要素を追加できます。

5. ツールボックスの [楕円] ツール をダブルクリックし、PART_Indicator 要素に円を追加して、塗りつぶします。幅を変更すると、円が表示されます。[プロパティ] パネルの [ブラシ] で、円の色を変更します。[プロパティ] パネルのレイアウトのプロパティを使用して、円のサイズを調整します。HorizontalAlignment プロパティが [拡大して表示] に設定されていることを確認してください。

6. ビットマップ効果を適用する場合は、[プロパティ] パネルの [外観] カテゴリにある [詳細プロパティの表示] ボタン をクリックし、BitmapEffect プロパティの横のドロップダウン矢印をクリックして、[光彩 (外側)] などの効果を選択します。

7. 進行状況バーを動作させるには、ドキュメントのコードビハインド ファイルにコードを追加します。たとえば、ドキュメントの名前が Window1.xaml であるときに、コードビハインド ファイルの名前は、プロジェクト作成時に選択したプログラミング言語に従って Window1.xaml.cs または Window1.xaml.vb となります。

   [オブジェクトとタイムライン] で、[上へスコープ] ボタンをクリックしてドキュメントの編集スコープに戻り、進行状況バーに "ProgressBar1" などの名前を付けます (名前を囲んでいる角かっこは、要素に名前が付けられていないことを示します)。

8. [プロジェクト] パネルからコードビハインド ファイルを開き、次のコードを追加します。コードビハインド ファイルを開く方法の詳細については、「コードビハインド ファイルの編集」を参照してください。

     // Insert code required on object creation below this point.   
       Duration duration = new Duration(System.TimeSpan.FromSeconds(10));
       DoubleAnimation doubleanimation = new DoubleAnimation(ProgressBar1.Maximum, duration);
       ProgressBar1.BeginAnimation(ProgressBar.ValueProperty, doubleanimation); 
   

   ' Insert code required on object creation below this point.
       Dim duration As New Duration(System.TimeSpan.FromSeconds(10))
       Dim doubleanimation As New DoubleAnimation(ProgressBar1.Maximum, duration)
       ProgressBar1.BeginAnimation(ProgressBar.ValueProperty, doubleanimation)
   

9. アプリケーションを実行して (F5)、効果を確認してください。

関連項目

概念

SimpleProgressBar