¿Puedo separar el panel de diseño del panel XAML en Visual Studio?


83

¿Es posible separar la ventana de WPF que estoy diseñando de su código XAML? Al hacer doble clic en cualquier archivo XAML, se abrirá y se mostrará tanto el código XAML como la ventana de WPF en una ventana, dividiéndolos horizontal o verticalmente, pero ambos están en una ventana. Tengo 4 monitores y el código XAML que escribo tiene líneas largas, por lo que me gustaría editar el código XAML solo en un monitor y ver la ventana de WPF en otro, pero no parece que dividirlos en dos ventanas diferentes posible.

Un par de soluciones pésimas que puedo hacer pero no me gustan son:

  1. Desacople todo el editor XAML con el diseñador, luego cambie el tamaño de esa ventana en dos monitores para que el código XAML esté en un monitor y la ventana WPF en otro.
  2. Use "Abrir con ..." para abrir un segundo editor del mismo documento XAML, pero luego el resaltado de código y el resaltado de la ventana de WPF no están sincronizados.

Entonces, ¿es posible dividirlos? ¿O tal vez tienes una solución mejor que la mía?


2
Esta publicación de blog de msdn (consejo 10) parece sugerir que las dos soluciones que ya conoce son la solución oficial. blogs.msdn.com/b/wpfsldesigner/archive/2010/06/30/…
Chris Petheram

14
Es triste que después de 4 años todavía no hayan implementado esta función. Las configuraciones de varios monitores se han utilizado comúnmente durante al menos 10 años.
Plain Coder

2
6 años ahora, me pregunto si algo cambió
Ateik

1
@PlainCoder Más como 20 años.
John Stock

1
2019 aquí estamos y aún no está implementado: D
Zeta

Respuestas:


79

Tuve el mismo problema, luego encontré una manera de separarlo así,

  • Haga clic con el botón derecho en el archivo XAML en el explorador de soluciones y seleccione Abrir con ;
  • seleccione Editor de código fuente (texto) (en lugar del editor XML (texto) ).

Esto crea una pestaña separada para el editor de código fuente XAML, simplemente desacople y cree una nueva ventana.


6
¿Leíste mi segunda solución anterior? Es exactamente lo que sugieres.
Plain Coder

1
@PlainCoder, solo quiero confirmar que en VS2015 esto funciona muy bien y como se esperaba, con aspectos destacados de sintaxis (incluso con aspectos destacados de ReSharper 10) y completamente sincronizado. Parece que ahora es seguro aceptar esta respuesta.
Sevenate

Puedo confirmar que esto también funciona en VS2013 como lo describe @Sevenate.
Kidiskidvogingogin

1
@Sevenate My Visual Studio 2015 no funciona como se esperaba y no sincroniza los aspectos destacados de la sintaxis.
Steve.NayLinAung

3
está sincronizado en el sentido de que realiza un cambio y la otra ventana se actualiza, pero desafortunadamente no puede hacer clic en un elemento para ver el elemento o código correspondiente en la otra ventana :-(
Simon_Weaver

12

Haga clic en el botón de doble flecha que se encuentra en el lado derecho del código XML.

Al hacer clic en una de estas opciones, el XAML y el Diseño se separarán en dos paneles separados dentro de la misma ventana. Desde allí, los paneles se pueden alternar.

Para restaurar la configuración original, >>vuelva a hacer clic en el botón de doble flecha .

Estas opciones se destacan a continuación:

Opciones de alternancia de XAML / Design


3

Visual Studio 2017 tiene un nuevo modo 'Editar y continuar' para XAML, que es realmente impresionante y para mí ha eliminado la necesidad de esta funcionalidad de 'división'.

https://blogs.msdn.microsoft.com/visualstudio/2016/04/06/ui-development-made-easier-with-xaml-edit-continue/

Puede escribir literalmente el XAML y hacer que la aplicación en ejecución se actualice instantáneamente, así que colóquelo en la pantalla que desee.

Mi edición de Visual Studio para XAML se había vuelto súper súper lenta y las actualizaciones ahora son instantáneas y ocurren dentro de la aplicación en ejecución real, lo que hará que el desarrollo sea mucho más rápido.


Tampoco es exactamente una solución completa, ya que las personas deben hacer clic en la representación de la interfaz de usuario e ir al XAML.
j riv

Además, editar y continuar para XAML no puede manejar todas las ediciones. Por ejemplo, la inclusión de un diccionario en un MergedDictionary o la adición de plantillas de datos no parece funcionar siempre.
Mike de Klerk

También no se puede acercar
Ateik

0

Use la opción emergente XAML junto a Design & XAML Panes que desplegará el editor XAML en una nueva ventana, que se puede mover a otra pantalla. Los elementos destacados no funcionarán, pero los cambios se reflejarán sobre la marcha.


-2

Si tiene dos pantallas, divida la ventana del diseñador verticalmente, desacople la ventana de Visual Studio y luego cambie el tamaño de la ventana para que el ancho abarque las pantallas duales.


Esa es exactamente su primera opción
Ateik
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.