試試看：自訂 SimpleProgressBar 的進度指示器

您可以在 Microsoft Expression Blend 中，使用 SimpleProgressBar 控制項範本輕易地自訂進度指示器的外觀。請注意，SimpleProgressBar 僅支援水平方向的進度列。

自訂 SimpleProgressBar 的進度指示器

1. 在 Expression Blend 的畫板上繪製一個 SimpleProgressBar。

   秘訣：
   在 [資產庫] 中，可以從 [控制項] 索引標籤的 [簡單樣式] 類別中取得簡單樣式 (Simple Styles) 控制項。從清單中選取簡單樣式 (Simple Styles) 控制項之後，就可以在畫板上繪製該控制項。

2. 以滑鼠右鍵按一下 [物件與時間軸] 底下的進度列，指向 [編輯控制項組件 (範本)]，然後按一下 [編輯範本]。若不想變更 SimpleStyles.xaml 資源字典，您可以按一下 [編輯複本] 代替 [編輯範本] 來建立新範本並儲存至文件中。如需有關建立複本的詳細資訊，請參閱建立資源。

   秘訣：
   若要結束範本編輯模式並返回您的文件範圍，請在 [互動] 面板中的元素樹狀目錄上方，按一下 [選定範圍] 按鈕 。若要返回現有範本的範本編輯模式，請在 [物件與時間軸] 下，以滑鼠右鍵按一下要編輯範本的元素，指向 [編輯控制項組件 (範本)]，然後按一下 [編輯範本]。

3. 在 [物件與時間軸] 下，以滑鼠右鍵按一下 [PART_Indicator] 元素，指向 [變更版面配置類型]，然後按一下 [格線]。在畫板上使用滑鼠，或在 [屬性] 面板的 [版面配置] 下修改 [Width] 屬性，以增加 PART_Indicator 的寬度。

4. 在 [物件與時間軸] 下按兩下 PART_Indicator 元素，使其成為使用中的狀態。

   因為 PART_Indicator 元素是使用中狀態且為格線面板 (而非框線)，所以現在您可以將子元素新增至該元素。

5. 在 [工具箱] 中，按兩下 [橢圓形] 工具 ，將圓形新增至 PART_Indicator 元素中並加以填滿。只要變更圓形的寬度就可以看到圓形。在 [屬性] 面板的 [筆刷] 下修改圓形的色彩。使用 [屬性] 面板中的 [版面配置] 下的屬性來調整圓形的大小。請確定 [HorizontalAlignment] 屬性已設定為 [Stretch] 。

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