Sugerencias para la aplicación de estilos al control ScrollViewer para controles de Silverlight en Blend

Puede utilizar la plantilla de control ScrollViewer integrada para crear una plantilla ScrollViewer personalizada. La apariencia predeterminada del control ScrollViewer es la siguiente:

Elementos de la plantilla ScrollViewer

La plantilla ScrollViewer incluye los siguientes elementos:

Nombre de elemento	Tipo de objeto
ScrollContentPresenter	ScrollContentPresenter
HorizontalScrollBar	ScrollBar
VerticalScrollBar	ScrollBar

Sugerencia

Para ver los elementos de la plantilla, abra el panel Elementos al modificar la plantilla.

Sugerencias de ScrollViewer

Un ScrollViewer consta de contenido desplazable controlado por un objeto ScrollBar horizontal y un objeto ScrollBar vertical. Un objeto ScrollBar se puede establecer para que se muestre siempre, se oculte siempre o solo se muestre cuando sea necesario.

Elemento ScrollViewerPresenter

El elemento ScrollContentPresenter es obligatorio. ScrollContentPresenter muestra el contenido desplazable

Elemento HorizontalScrollBar

El elemento HorizontalScrollBar es opcional. Enlace mediante plantilla la propiedad Visibility a ComputedHorizontalScrollBarVisibility, su propiedad Maximum a ScrollableWidth, su propiedad Value a HorizontalOffset y su propiedad ViewportSize a ViewportWidth.

Elemento VerticalScrollBar

El elemento VerticalScrollBar es opcional. Enlace mediante plantilla la propiedad Visibility a ComputedVerticalScrollBarVisibility, su propiedad Maximum a ScrollableHeight, su propiedad Value a VerticalOffset y su propiedad ViewportSize a ViewportHeight.

Enlace de plantillas

Puede enlazar mediante plantilla las propiedades Background, BorderThickness o Padding. Para obtener más información, vea Trasladar propiedades de objetos a la plantilla en Blend.

Para convertir objetos en un control ScrollViewer

El gráfico siguiente es un diseño integral de un visor de desplazamiento creado por un diseñador.

Es importante tener en cuenta que el gráfico anterior no es todavía un visor de desplazamiento, sino una ilustración similar a un visor de desplazamiento.

Este ejemplo utiliza el código XAML en el paso 2 del procedimiento siguiente.

1. Abra un nuevo proyecto de Microsoft Silverlight. En la Vista de código, busque el código siguiente y, a continuación, elimine la barra diagonal (/) de cierre.

   <Grid x:Name="LayoutRoot" Background="White"/>
   

2. Copie y pegue el código siguiente en el nuevo proyecto, después del código que encontró en el paso 1.

   <Grid x:Name="root" Height="146" Width="146">
      <Rectangle Fill="#FF333333" RadiusX="3" RadiusY="3" />
      <Rectangle x:Name="content" Stroke="Black" Width="200" Height="200">
         <Rectangle.Fill>
         <RadialGradientBrush>
            <GradientStop Color="White"/>
            <GradientStop Color="Black" Offset="1"/>
         </RadialGradientBrush>
         </Rectangle.Fill>
      </Rectangle>
      <Grid x:Name="verticalscrollbar" Width="17" Height="146" HorizontalAlignment="Right">
         <Rectangle x:Name="track" Fill="#FF3D3D3D" StrokeThickness="0" />
         <Path x:Name="smalldecrease" Fill="Gray" Stretch="Fill" Width="7" Height="7" 
            Data="M200,312 L204,312 L200,305 z" Margin="0,5,0,0" 
            VerticalAlignment="Top"/>
         <Rectangle x:Name="thumb" Fill="Gray" RadiusX="3" RadiusY="3" Height="61" Width="7" Margin="0,24,0,0" VerticalAlignment="Top"/>
         <Path x:Name="smallincrease" Fill="Gray" Stretch="Fill" Width="7" Height="7" 
         Data="M200,305 L200,312 L204,305 z" Margin="0,0,0,5" VerticalAlignment="Bottom" />
      </Grid>
   </Grid>
   

3. Agregue una etiqueta Grid de cierre (</Grid>) después del código que acaba de pegar.

4. En el panel Objetos y escala de tiempo, haga clic con el botón secundario en root y, a continuación, haga clic en Crear en control. En el cuadro de diálogo Crear en control, haga clic en ScrollViewer y, a continuación, haga clic en Aceptar.

   En este paso, Blend quita root y todo su contenido, y lo sustituye por un nuevo ScrollViewer. A continuación, Blend convierte root en la plantilla de un nuevo estilo ScrollViewer y aplica ese nuevo estilo al nuevo ScrollViewer.

5. En el panel Objetos y escala de tiempo, haga clic con el botón secundario en ContentPresenter y, a continuación, haga clic en Eliminar.

6. En el panel Objetos y escala de tiempo, haga clic en root. En el panel Elementos, haga doble clic en ScrollContentPresenter.

7. Haga clic con el botón secundario en verticalscrollbar, elija Crear en elemento de ScrollViewer y, a continuación, haga clic en VerticalScrollBar. Haga clic en Aceptar.

   Para aplicar estilo a VerticalScrollBar, vea Sugerencias para la aplicación de estilos al control ScrollBar para controles de Silverlight en Blend.

8. Haga clic en **Devolver ámbito a ** para volver a ScrollViewerStyle1 (plantilla de ScrollViewer).

9. VerticalScrollBar debe ser capaz de desplazar la ventanilla del área desplazable. Para que esto sea posible, puede usar la opción Expresión personalizada del menú Opciones avanzadas en el panel Propiedades. Establezca Visibility en {TemplateBinding ComputedVerticalScrollBarVisibility}, Maximum en {TemplateBinding ScrollableHeight}, Value en {TemplateBinding VerticalOffset} y ViewportSize en {TemplateBinding ViewportHeight}.

   O bien, en la Vista en dos paneles, con VerticalScrollBar seleccionado en el panel Objetos y escala de tiempo, busque la línea de código que comienza por <ScrollBar x:Name="VerticalScrollBar y, a continuación, pegue el siguiente código al final de la línea que acaba de buscar.

   Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" 
   Maximum="{TemplateBinding ScrollableHeight}" 
   Value="{TemplateBinding VerticalOffset}" 
   ViewportSize="{TemplateBinding ViewportHeight}"
   

10. ScrollContentPresenter y VerticalScrollBar deben estar en paralelo, con cada uno en su propia columna. En el panel Objetos y escala de tiempo, haga clic en root. En la mesa de trabajo, haga clic en el borde azul por encima del control y, a continuación, arrastre la flecha naranja hasta colocarla justo al lado de la barra de desplazamiento, como se ilustra en la siguiente imagen:

    

11. Para la columna derecha, haga clic en **Estrella ** dos veces. Aparece el icono Automático .

12. En el panel Objetos y escala de tiempo, haga clic en ScrollContentPresenter. En la categoría Diseño del panel Propiedades, haga clic en Opciones avanzadas a la derecha de ColumnSpan y, a continuación, haga clic en Restablecer.

13. En el panel Objetos y escala de tiempo, haga clic en VerticalScrollBar. En la categoría Diseño del panel Propiedades, haga clic en Opciones avanzadas a la derecha de Margin y, a continuación, haga clic en Restablecer.

14. El objeto denominado content todavía está en la plantilla. Este objeto es el Rectángulo de 200 píxeles cuadrados sobre el cual debe desplazarle el ScrollViewer de 146 píxeles cuadrados. El paso siguiente consiste en recortarlo de la plantilla y pegarlo en la propiedad Content de ScrollViewer. A continuación, ScrollContentPresenter lo mostrará. En el panel Objetos y escala de tiempo, haga clic con el botón secundario en el contenido y, a continuación, haga clic en Cortar.

15. Haga clic en **Devolver ámbito a ** y, a continuación, presione Ctrl+V para pegar el contenido en la propiedad Content de ScrollViewer.

16. Compile el proyecto (Ctrl+Mayús+B) y, a continuación, presione F5 para probarlo.

    Importante

    El control ListBox no funcionará según lo previsto a menos que haya aplicado un estilo a ScrollBar según la información de Sugerencias para la aplicación de estilos al control ScrollBar para controles de Silverlight en Blend como se describe en el paso 7.

Para obtener información acerca de cómo aplicar la nueva plantilla ComboBox a otros objetos ComboBox, vea Aplicar o quitar un recurso en Blend.

Referencias

Encontrará información detallada acerca de las propiedades y eventos del control ScrollViewer de Silverlight en la página de controles y cuadros de diálogo de Silverlight en MSDN.

Vea también

Conceptos

Sugerencias para la aplicación de estilos a controles Silverlight comunes en Blend

Aplicar estilos a objetos en Blend

SimpleScrollBar (soporte WPF en Blend)