Personalizar el indicador de progreso de un control SimpleProgressBar

Personalizar la apariencia de un indicador de progreso en Microsoft® Expression Blend™ es fácil cuando se usa la plantilla del control SimpleProgressBar. Observe que el control SimpleProgressBar sólo admite una barra de progreso horizontal.

Para personalizar el indicador de progreso de un control SimpleProgressBar

  1. Dibuje un control SimpleProgressBar en el área de diseño de Expression Blend.
    Sugerencia Los controles de estilo simple están disponibles en la categoría Simple Styles, en la ficha Controles del Panel biblioteca Botón Panel biblioteca. Una vez seleccionado un control de estilo simple de la lista, puede dibujarlo en el área de diseño.
  2. Haga clic con el botón secundario en la barra de progreso de Objetos y escala de tiempo, elija Editar partes del control (Plantilla) y, después, haga clic en Editar plantilla. Si no desea modificar el diccionario de recursos SimpleStyles.xaml, puede hacer clic en Editar una copia en lugar de en Editar plantilla para crear una plantilla nueva y guardarla en el documento. Para obtener más información sobre cómo crear una copia, vea Crear un recurso.
    Sugerencia Para salir del modo de edición de plantilla y volver al ámbito del documento, haga clic en el botón Ámbito superior Botón Ámbito superior, que está situado encima del árbol de elementos del panel Interacción.

    Para volver al modo de edición de plantilla de una plantilla existente, en Objetos y escala de tiempo, haga clic con el botón secundario en el elemento cuya plantilla desea editar, elija Editar partes del control (Plantilla) y, a continuación, haga clic en Editar plantilla.
  3. En Objetos y escala de tiempo, haga clic con el botón secundario en el elemento PART_Indicator, elija Cambiar tipo de diseño y, a continuación, haga clic en Cuadrícula. Utilice el mouse en el área de diseño o modifique la propiedad Width en la categoría Diseño del panel Propiedades para aumentar el ancho de PART_Indicator.
  4. Haga doble clic en el elemento PART_Indicator en Objetos y escala de tiempo para activarlo.
    Ahora puede agregar elementos secundarios al elemento PART_Indicator porque está activo y porque se trata de un panel de cuadrícula en lugar de un borde.
  5. En el Cuadro de herramientas, haga doble clic en la herramienta Elipse Herramienta Elipse para agregar un círculo al elemento PART_Indicator y rellenarlo. Puede ver el círculo si modifica el ancho del mismo. Modifique el color del círculo en la categoría Pinceles del panel Propiedades. Ajuste el tamaño del círculo con las propiedades de Diseño en el panel Propiedades. Asegúrese de que la propiedad HorizontalAlingment está establecia en Expandir Expandir horizontalmente.
  6. Si desea aplicar un efecto de imagen, haga clic en el botón Mostrar propiedades avanzadas Botón Mostrar propiedades avanzadas para la categoría Apariencia del panel Propiedades, haga clic en la flecha de lista desplegable situada junto a la propiedad BitMapEffect y, a continuación, seleccione un efecto, como Resplandor exterior.
  7. Para ver la barra de progreso en acción, puede agregar código al archivo de código subyacente del documento. Por ejemplo, si el nombre del documento es Window1.xaml, el archivo de código subyacente será Window1.xaml.cs o Window1.xaml.vb, dependiendo del lenguaje de programación que haya elegido al crear el proyecto.
    En Objetos y escala de tiempo, haga clic en el botón Ámbito superior Botón Ámbito superior para volver al ámbito de edición del documento y, a continuación, asigne a la barra de progreso un nombre como "ProgressBar1" (los corchetes indican que el elemento no tiene nombre todavía).
  8. Abra el archivo de código subyacente desde el panel Proyecto y agregue el siguiente código. Para obtener información acerca de cómo abrir un archivo de código subyacente, vea Editar un archivo de código subyacente.
    • Para C# 
          // 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);
    • Para Visual Basic.NET 
          ' 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. Pruebe la aplicación (F5) para ver los efectos.