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

此页仅适用于 WPF 项目

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

自定义 SimpleProgressBar 的进度指示器

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

    Cc295375.alert_tip(zh-cn,Expression.10).gif提示:

    “资源库”Cc295375.0224cabd-5da1-4e01-bddd-4a647401a098(zh-cn,Expression.10).png 中的“控件”选项卡的“简单样式”类别中提供了简单样式控件。从列表中选择简单样式控件后,即可在美工板上进行绘制。

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

    Cc295375.alert_tip(zh-cn,Expression.10).gif提示:

    若要退出模板编辑模式并返回到文档范围:请单击位于“交互”面板中的元素树上方的“范围上移”Cc295375.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-cn,Expression.10).png 按钮。若要返回到现有模板的模板编辑模式:请在“对象和时间线”下,右键单击要编辑其模板的元素,指向“编辑控件部件(模板)”,然后单击“编辑模板”。

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

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

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

  5. 在“工具箱”中,双击“椭圆形”Cc295375.8938cfdf-9b75-4a33-bc88-b0636e114a0d(zh-cn,Expression.10).png 工具,向 PART_Indicator 元素中添加圆并填充它。可以查看圆的宽度变化。在“属性”面板的“画笔”下,修改圆的颜色。通过使用“属性”面板的“布局”下的属性,调整圆的大小。确保将“HorizontalAlignment”属性设置为“Stretch”Cc295375.90aa9534-0480-4a7f-b992-1af23c71ea9c(zh-cn,Expression.10).png

  6. 如果希望应用位图效果,请在“属性”面板的“外观”类别中,单击“显示高级属性”Cc295375.81e110f1-4068-4299-957d-0693cea95088(zh-cn,Expression.10).png 按钮,单击“BitmapEffect”属性旁边的下拉箭头,然后选择一种效果(如“外发光”)。

  7. 为了查看进度栏的实际效果,可以向文档的代码隐藏文件中添加代码。例如,如果文档名为“Window1.xaml”,则根据创建项目时选择的编程语言,代码隐藏文件将名为“Window1.xaml.cs”或“Window1.xaml.vb”。

    在“对象和时间线”下,单击“范围上移”Cc295375.55844eb3-ed98-4f20-aa66-a6f5b23eeb2b(zh-cn,Expression.10).png 按钮返回到文档的编辑范围,然后为进度栏指定一个类似于“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