Tutorial: Editar XAML en WPF Designer

Actualización: noviembre 2007

Windows Presentation Foundation (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.

Realizará las tareas siguientes:

• 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, dependiendo de los valores de configuración o de edición activos. Para cambiar la configuración, elija Importar y exportar configuraciones en el menú Herramientas. Para obtener más información, vea Valores de configuración de Visual Studio.

Requisitos previos

Necesita los componentes siguientes para completar este tutorial:

• Visual Studio 2008.

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.

  Window1.xaml se abrirá en el 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 Window1.xaml en WPF Designer.

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

   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 texto siguiente.

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

  Cada elemento, propiedad y valor de propiedad tienen un color único. Además, la extensión de marcado está enlazada a la propiedad Background. Por añadidura, se actualiza el fondo de cuadrícula de la vista 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 Window1.

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

   La etiqueta de apertura para Window1 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 Selección siguiente situada a la izquierda de Recursos.

   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 propiedad Children seleccionada.

4. Utilice la tecla FLECHA ABAJO para desplazarse a la propiedad ColumnDefinitions.

5. Presione TAB para completar la etiqueta.

   Para obtener más información sobre cómo utilizar IntelliSense para 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>. 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. Presione la tecla ENTRAR para iniciar una nueva línea.

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

6. Presione CTRL+KD.

   Los atributos permanecen en las nuevas líneas.

7. 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