动手试验：自定义 SimpleProgressBar 的进度指示器

在 Microsoft Expression Blend 中，可以使用“SimpleProgressBar”控件模板，轻松自定义进度指示器的外观。请注意，“SimpleProgressBar”仅支持水平方向的进度栏。

自定义 SimpleProgressBar 的进度指示器

1. 在 Expression Blend 中的美工板上绘制“SimpleProgressBar”。

   提示：
   “资源库” 中的“控件”选项卡的“简单样式”类别中提供了简单样式控件。从列表中选择简单样式控件后，即可在美工板上进行绘制。

2. 在“对象和时间线”下右键单击进度栏，指向“编辑控件部件(模板)”，然后单击“编辑模板”。如果不希望更改 SimpleStyles.xaml 资源字典，则可以单击“编辑副本”（而不是“编辑模板”），以创建新模板并将其保存到文档中。有关创建副本的详细信息，请参阅创建资源。

   提示：
   若要退出模板编辑模式并返回到文档范围：请单击位于“交互”面板中的元素树上方的“范围上移” 按钮。若要返回到现有模板的模板编辑模式：请在“对象和时间线”下，右键单击要编辑其模板的元素，指向“编辑控件部件(模板)”，然后单击“编辑模板”。

3. 在“对象和时间线”下，右键单击“PART_Indicator”元素，指向“更改布局类型”，然后单击“Grid”。通过在美工板上使用鼠标或者在“属性”面板中的“布局”下修改“Width”属性，增大 PART_Indicator 的宽度。

4. 在“对象和时间线”下双击 PART_Indicator 元素以将其激活。

   此时便可以向 PART_Indicator 元素中添加子元素，因为它已激活，并且它是网格面板而不是 Border。

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