Inténtelo: Personalizar el indicador de progreso de un control SimpleProgressBar

En Microsoft Expression Blend se puede personalizar la apariencia de un indicador de progreso de manera sencilla mediante 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 la mesa de trabajo 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. Una vez seleccionado un control de estilo simple de la lista, puede dibujarlo en la mesa de trabajo.

2. Haga clic con el botón secundario en la barra de progreso en 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 acerca de 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, que se encuentra encima del árbol de elementos en el panel Interacción. Para volver al modo de edición de plantillas para una plantilla existente, haga clic con el botón secundario en el elemento cuya plantilla desea editar en Objetos y escala de tiempo, 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. Use el mouse en la mesa de trabajo o modifique la propiedad Width (ancho) 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 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 (alineación horizontal) esté establecida en Expandir.

6. Si desea aplicar un efecto de imagen, haga clic en el botón Mostrar propiedades avanzadas de la categoría Apariencia del panel Propiedades, haga clic en la flecha de lista desplegable situada junto a la propiedad BitmapEffect (efecto de imagen) y, a continuación, seleccione un efecto, como Iluminado 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 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.

     // 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. Pruebe la aplicación (F5) para ver los efectos.

Vea también

Conceptos

SimpleProgressBar