Tutorial: Editar XAML en WPF Designer

WPF Designer for Visual Studio proporciona al editor XAML muchas de las características que están presentes en otros editores de lenguajes de Visual Studio. En este tema se muestra cómo utilizar algunas características, como IntelliSense y la esquematización.

En este tutorial realizará las siguientes tareas:

• Crear un proyecto de WPF.

• Crear recursos.

• Ver el resaltado de la sintaxis.

• Utilizar la navegación por etiquetas.

• Utilizar la esquematización.

• Utilizar IntelliSense.

• Utilizar la concordancia de llaves.

• Utilizar el formato automático.

Nota

Los cuadros de diálogo y comandos de menú que se ven pueden diferir de los descritos en la Ayuda, en función de los valores de configuración o de edición activos. Para cambiar la configuración, elija la opción Importar y exportar configuraciones del menú Herramientas. Para obtener más información, vea Trabajar con valores de configuración.

Requisitos previos

Necesita los componentes siguientes para completar este tutorial:

• Visual Studio 2010.

Creación del proyecto

El primer paso es crear el proyecto para la aplicación host.

Para crear el proyecto

• Cree un nuevo proyecto de aplicación de WPF en Visual Basic o en Visual C# denominado XamlEditing. Para obtener más información, vea Cómo: Crear un nuevo proyecto de aplicación de WPF.

  MainWindow.xaml se abre en WPF Designer.

Crear recursos

Con frecuencia utilizará recursos en las aplicaciones de WPF. WPF Designer proporciona esquematización contraíble para las secciones de recursos y la posibilidad de navegar a ellas en la ventana Esquema del documento.

Para crear recursos

1. Abra MainWindow.xaml en WPF Designer.

2. En la vista XAML, inserte el siguiente marcado XAML después de la etiqueta de apertura de MainWindow.

   Este XAML crea un pincel de degradado lineal que tiene un espectro de colores.

   <Window.Resources>
       <LinearGradientBrush x:Key="backgroundBrush1" StartPoint="0,0" EndPoint="1,1">
           <GradientStop Color="Yellow" Offset="0.0" />
           <GradientStop Color="Red" Offset="0.25" />
           <GradientStop Color="Blue" Offset="0.75" />
           <GradientStop Color="LimeGreen" Offset="1.0" />
       </LinearGradientBrush>
   </Window.Resources>
   

Resaltado de la sintaxis

WPF Designer facilita la lectura del código XAML coloreando el texto según su sintaxis.

Para ver el resaltado de la sintaxis

• En la vista XAML, reemplace el elemento <Grid> predeterminado con el marcado siguiente.

  <Grid Name="grid1" Background="{StaticResource backgroundBrush1}">
  
  </Grid>
  

  Cada elemento, propiedad y valor de propiedad tienen un color único.

  

  La extensión de marcado se enlaza a la propiedad Background. Por añadidura, se actualiza el fondo de cuadrícula de la Vista de diseño.

  

  Puede cambiar el color de los elementos y atributos XAML. Para obtener más información, vea Cómo: Cambiar la configuración de la vista XAML.

Navegación por etiquetas

Puede moverse de etiqueta en etiqueta utilizando el explorador de etiquetas. También puede navegar desde la vista Esquema del documento. Para obtener más información, vea Navegar en la jerarquía de elementos de un documento de WPF.

Para utilizar el explorador de etiquetas

1. En la vista XAML, haga clic en la etiqueta de apertura del elemento <Grid>.

2. En la parte inferior de WPF Designer, localice el explorador de etiquetas. Muestra: Grid (grid1) Window/Grid.

3. En el explorador de etiquetas, mueva el puntero del mouse sobre el elemento Window.

   Aparece una miniatura representada de MainWindow.

   

4. En el explorador de etiquetas, haga clic en el hipervínculo Window.

   La etiqueta de apertura para MainWindow aparece resaltada en la vista XAML.

5. En la vista XAML, haga clic en la etiqueta <Window.Resources>.

   El explorador de etiquetas muestra la jerarquía del árbol de XAML del elemento <Window.Resources>.

6. En el explorador de etiquetas, haga clic en la flecha Seleccionar etiqueta secundaria situada a la derecha de Recursos.

   El elemento secundario aparece en un menú emergente.

7. Haga clic en LinearGradientBrush (backgroundBrush1).

   Se selecciona el elemento <LinearGradientBrush> en la vista XAML.

Esquematización

WPF Designer es plenamente compatible con la esquematización contraíble. 

Para utilizar la esquematización

1. En la vista XAML, desplácese hasta el elemento <Window.Resources>.

2. A la izquierda de la etiqueta de apertura, haga clic en el botón de contraer.

   Se contrae el elemento <Window.Resources> para ocupar una sola línea.

   

3. A la izquierda de la etiqueta de apertura, haga clic en el botón de expandir.

   El elemento <Window.Resources> se expande a su estado original.

IntelliSense

WPF Designer es plenamente compatible con IntelliSense.

Para usar IntelliSense

1. En el elemento grid1, escriba <Gr.

   Aparece la lista de IntelliSense, con la clase Grid seleccionada.

   

2. Presione TAB para completar la etiqueta de apertura.

3. Escriba .c. (no olvide incluir el punto.)

   Aparece la lista de IntelliSense, con la primera propiedad que empieza por la letra C seleccionada.

4. Utilice la tecla de dirección ABAJO para desplazarse a la propiedad ColumnDefinitions.

5. Presione TAB para completar la etiqueta.

   Para obtener más información sobre cómo usar IntelliSense para los tipos personalizados, vea Cómo: Importar un espacio de nombres a XAML.

Concordancia de llaves

Puede navegar dentro de un elemento utilizando la característica de concordancia de llaves.

Para utilizar la concordancia de llaves

1. En la vista XAML, haga clic en la etiqueta de apertura <LinearGradientBrush>.

2. Presione CTRL+].

   El cursor se desplaza al final de la etiqueta de apertura.

3. Presione CTRL+] de nuevo.

   El cursor se desplaza al comienzo de la etiqueta de cierre.

4. Elimine el corchete angular final ">" de la etiqueta de cierre del elemento <LinearGradientBrush>.

5. Escriba ">" para completar la etiqueta de cierre.

   En la vista XAML se resaltan las etiquetas de apertura y cierre.

   

Formato automático

Puede dar formato al XAML presionando CTRL+KD; también puede especificar una configuración de formato automático. Para obtener más información, vea Cómo: Cambiar la configuración de la vista XAML.

Para utilizar el formato automático

1. En la vista XAML, seleccione los cuatro elementos <GradientStop>.

2. Presione MAYÚS+TAB.

   Las cuatro declaraciones de elemento se mueven hacia la izquierda.

3. Presione CTRL+KD.

   Se aplica una sangría a las cuatro declaraciones de elemento. Puede que observe otros cambios en el XAML.

4. En la primera etiqueta <GradientStop>, haga clic en el espacio situado antes del atributo Color.

5. Presione la tecla ENTRAR para iniciar una nueva línea.

6. Haga clic en el espacio situado antes del atributo Offset y presione la tecla ENTRAR para iniciar una nueva línea.

7. Presione CTRL+KD.

   Los atributos permanecen en las nuevas líneas.

8. Inserte cuatro espacios antes del atributo Color y presione CTRL+KD.

   El atributo Color no cambia de posición.

Vea también

Tareas

Cómo: Importar un espacio de nombres a XAML

Cómo: Cambiar la configuración de la vista XAML

Conceptos

Navegar en la jerarquía de elementos de un documento de WPF

Otros recursos

WPF Designer

Tutoriales para el uso de XAML y código