Controles de WPF y Silverlight y capacidades de panoramización y zoom

Question

Me gustaría comprender los requisitos generales para el diseño de WPF/Silverlight para posibilitar la implementación de las funciones de acercamiento (arrastrar y acercar) pan &. No me refiero a pan & hacer zoom para una imagen, sino para un diseño de página (ventana) total (o parte de ella) con algunos controles.

¿Qué características del diseño y qué características de los controles personalizados usados ​​hacen que el diseño sea fijo y pan & zoom imposible?

Answer 1

regla general

Con pocas excepciones, todo en WPF puede ser desplazada, zoom, rotar, estirado, etc. al contenido de su corazón. Esto incluye controles individuales como Button, controles compuestos como ListBox y contenedores como StackPanel.

Las excepciones

Estas son las excepciones:

1. Si está utilizando Adorner y su AdornerDecorator está fuera del área criticada/ampliada, a continuación, los Adorners unidos a su área criticada/ampliada se desplazará pero no hará zoom. La solución es colocar un AdornerDecorator adicional dentro del área panorámica/ampliada.

2. Si usa una ventana emergente, se mostrará en la ubicación desplazada/ampliada de su PlacementTarget, pero no se escalará. Tampoco se moverá mientras navegas por el área que contiene su PlacementTarget (básicamente se encuentra en su propia superficie por encima del control objetivo). Para evitar esto, utilice un lienzo de tamaño cero con un alto orden de Z en su lugar cuando desee que aparezca algo dentro del área de zoom/panorámica.

3. Cualquier menú contextual que defina se mostrará dentro de una ventana emergente, por lo que los elementos del menú mostrarán el tamaño normal incluso cuando el área en la que hizo clic se acerca o aleja. Debido a la naturaleza de un menú contextual, este es probablemente un comportamiento deseable. De lo contrario, puede envolver los elementos del menú en un ViewBox y vincular el zoom al zoom de su área principal.

4. La información sobre herramientas mostrará el tamaño normal, incluso si la interfaz de usuario se desplaza o se acerca. La misma solución que para ContextMenu.

5. Si usó la integración de WinForms para integrar los controles WinForms heredados y la IU, no se desplazarán, acercarán y recortarán correctamente en ciertas situaciones. Existe una técnica avanzada para solucionar este problema, donde implementa el control de WinForms fuera de la pantalla, luego utiliza BitBlt o similar y copia la imagen en su ventana como una imagen, y adelanta los clics del mouse y las teclas a la ventana fuera de pantalla. Esto es mucho trabajo, sin embargo.

6. Si omite WPF y usa directamente GDI + o DirectX, o usa Win32 hWnds para mostrar contenido o UI, ese contenido o UI no se panoramizará, reducirá o recortará a la ventana a menos que lo haga usted mismo en su interfaz código.

Notas finales

• Un buen WPF UI siempre utiliza paneles como cuadrícula, DockPanel, etc para diseñar los controles de una manera flexible, de modo que se ajustan automáticamente al tamaño de los contenedores, en lugar de utilizar tamaños y posiciones fijas. Esto también es cierto para los contenidos internos de su área panorámica/zoom, PERO hay una excepción a esta regla: el elemento más externo en su área de panorámica/zoom debe tener un tamaño específico. De lo contrario, ¿qué definirá el área que se va a panoramizar/ampliar?

• La forma fácil de implementar las funciones de desplazamiento/zoom es ajustar la Transformación Render del control más externo en el área de desplazamiento/zoom. Hay muchas maneras diferentes de implementar controles para panoramizar y ampliar, por ejemplo, puede usar botones y controles deslizantes, barras de desplazamiento, rueda del mouse, barra espaciadora + arrastrar para desplazarse, áreas arrastrables de la interfaz de usuario panoramizada, o cualquier combinación de estos. Independientemente de la interfaz que elijas, solo tienes que actualizar RenderTransform de forma adecuada desde el código subyacente y listo.

• Si el mecanismo de panoramización elegido es barras de desplazamiento, es posible que desee utilizar un ScrollViewer y solo usar RenderTransform para el zoom.

• Asegúrese de establecer el recorte en el área del zoom/panorámica. De lo contrario, si amplía o desplaza los elementos del lateral, seguirán siendo visibles fuera del área de panorámica/zoom.

Answer 2

Una forma muy sencilla de implementar el zoom en XAML es utilizar un Silverlight ViewBox. Esto amplía el XAML no los píxeles. Puede especificar el estiramiento a usar y ViewBox se escalará según esto (Relleno, Ninguno, Uniforme, etc.). Si busca Silverlight + Viewbox en Google, encontrará algunas excelentes publicaciones en el blog de Viewbox en la web.

La panoramización se realiza fácilmente con un mecanismo similar para arrastrar y soltar, y también hay numerosas entradas de blog de cómo hacerlo disponibles en Google. Solo equivale a capturar eventos MouseDown, MouseMove y MouseUp.

Answer 3

Usar una zona MultiScaleImage o lienzo, y colocar todo lo necesario para desplazarse y hacer zoom en ella

<Canvas x:Name="panZoomPanel" Background="Transparent"> 
</Canvas> 

En utilice el código de hacer una TranslateTransform y una ScaleTransform en un TransformGroup para alejar o acercar

Comprobar a cabo otra SO post o esta example o this one

Answer 4

En general se puede tratar a cualquier conjunto compuesto de elementos de interfaz de usuario de la misma como lo haría con un solo UIElement lo que el caso de una imagen no es realmente diferente de hacer lo mismo para una aplicación completa. La mejor forma de manejar el zoom en función de la entrada del usuario (en contraposición a la escala automática que hace Viewbox) es aplicar un ScaleTransform. Esto se puede establecer en un elemento padre de alto nivel, como una cuadrícula en la raíz de un diseño de ventana. Para la panorámica, puede combinarla en una TranslateTransform o, en algunos casos, utilizar ScrollViewer para mover la vista del contenido.