Presentación gráfica de WPF

Este tema proporciona una descripción general de la capa de visualización de WPF. Este tema se centra en el papel de la clase Visual en el soporte de representación en el modelo WPF.

El papel del objeto Visual. La clase Visual es la clase básica de la que se deriva cada objeto FrameworkElement. Resumen Esta clase también sirve como punto de entrada para escribir nuevos controles en WPF. En el modelo de aplicación Win, esta clase se puede considerar de muchas maneras como un identificador de ventana (. HWND).

El objeto Visual es un objeto central de WPF. Su función principal es proporcionar soporte de representación (como botones y cuadros de texto) que se derivan de la clase Visual y utilizan esta clase para contener. los datos que representan. Los objetos visuales brindan soporte para las siguientes funciones

Representación de visualización de salida Objetos visuales Contenido de dibujo serializado persistente

Las transformaciones realizan transformaciones en objetos visuales

El recorte proporciona soporte para la región de recorte para objetos visuales

Prueba de impacto Determina si las coordenadas o formas geométricas están contenidas dentro de los límites de un objeto visual

El cálculo del cuadro delimitador determina el cuadro delimitador de un objeto visual

Sin embargo, los objetos visuales no incluyen soporte para funciones que no son de representación, como ◆Manejo de eventos

　◆Diseño

　◆Estilo

　◆Enlace de datos

　◆Globalización

Se requiere visual como subclase. Se exponen clases abstractas públicas derivadas. La siguiente figura muestra la jerarquía de objetos visuales expuestos en. WPF.

Jerarquía de clases visuales

?

　Clase DrawingVisual DrawingVisual es una clase de dibujo liviana que se utiliza para representar imágenes de formas o texto. no proporciona funciones de diseño o manejo de eventos, lo que mejora el rendimiento en tiempo de ejecución, por lo que el dibujo es más adecuado para fondos y imágenes prediseñadas. DrawingVisual se puede utilizar para crear objetos de visualización personalizados

Clase Viewport DVisual Viewport DVisual sirve como puente entre ellos. Objetos Visual y Visual D bidimensionales. La clase Visual D es la clase base para todos los elementos de visualización tridimensionales. Viewport DVisual Debe definir un valor de cámara y un valor de ventana gráfica. Puede usar la cámara para ver la proyección de la escena. asignado a la superficie bidimensional. El área se llama ventana gráfica

Clase ContainerVisual La clase ContainerVisual se utiliza como contenedor para el conjunto de objetos Visual. La clase DrawingVisual se deriva de la clase ContainerVisual. para contener una colección de objetos de visualización

El contenido del dibujo en el objeto de visualización El objeto Visual guarda sus datos de representación como una lista de directivas de gráficos vectoriales Cada elemento de la lista de directivas se representa en un formato serializado Un conjunto de datos gráficos a nivel y sus recursos asociados*** Hay cuatro tipos diferentes de datos de representación que pueden contener contenido de dibujo

Con DrawingContext puedes completar Visual con contenido visual. Cuando usas el comando de dibujo del objeto DrawingContext, en realidad almacenas un conjunto de datos de renderizado que serán utilizados por el sistema de gráficos en el futuro en lugar de dibujarlos en la pantalla en tiempo real.

Cuando creas un control WPF (como un botón), el control será El objeto de dibujo en sí genera implícitamente datos de representación, como configuraciones

La propiedad Contenido de un Botón hace que el control almacene una representación renderizada del glifo. Visual describe su contenido como uno o más objetos de Dibujo contenidos en un Grupo de Dibujo. El Grupo de Dibujo también describe efectos y aplicaciones de mapa de bits de conversión de máscara opaca. Al renderizar contenido, las operaciones de DrawingGroup se aplican en el siguiente orden: OpacityMask, Opacity, BitmapEffect, ClipGeometry, GuidelineSet y Transform

La siguiente figura muestra el orden en el que se aplican las operaciones de DrawingGroup durante la renderización

?

Secuencia de operaciones de DrawingGroup

El contenido del dibujo en la capa visual no debe crear una instancia directa de DrawingContext, pero se puede realizar a través de ciertos métodos

(como como DrawingGroup:: Open y DrawingVisual :: RenderOpen) Obtener el contexto del dibujo El siguiente ejemplo recupera el DrawingContext de DrawingVisual y lo usa para dibujar un rectángulo

Enumerar el contenido del dibujo en la capa de visualización Además, el objeto Dibujo también puede proporcionar El modelo de objeto utilizado para enumerar el contenido visual

Explique que cuando enumera el contenido de la capa visual, equivale a recuperar el objeto Dibujo en lugar de recuperar la representación subyacente de los datos de representación en forma de una lista de instrucciones de gráficos vectoriales. El siguiente ejemplo Utilice el método GetDrawing para recuperar el valor de Visual DrawingGroup y enumerar el valor

. Cómo utilizar objetos visuales para generar controles. Muchos objetos en WPF se componen de otros objetos visuales. Esto significa que pueden contener varias jerarquías de objetos descendientes. Muchos elementos de la interfaz de usuario en WPF, como los controles, se componen de múltiples objetos visuales que representan. diferentes tipos de elementos de representación. Por ejemplo, un control Botón puede contener muchos otros objetos, incluidos ClassicBorderDecorator, ContentPresenter y TextBlock

¿El siguiente código muestra el control Botón definido en el marcado

?

Si desea enumerar el objeto visual que contiene el control Botón predeterminado, encontrará la siguiente jerarquía de objetos visuales mostrada

Diagrama de jerarquía de árbol visual

?

El control Button contiene un elemento ClassicBorderDecorator, que a su vez contiene un elemento ContentPresenter ClassicBorderDecorator El elemento es responsable de dibujar el borde y el fondo del Botón. El elemento ContentPresenter es responsable de mostrar el contenido del Botón. En este caso, dado que desea mostrar texto, el elemento ContentPresenter contiene un elemento TextBlock. El control Button usa ContentPresenter. Esto significa que el contenido del control se puede representar mediante otros elementos como Image. como EllipseGeometry) para representar

Plantilla de control La clave para extender un control a una jerarquía de control es que la plantilla de control ControlTemplate especifica una jerarquía visual predeterminada para el control. Cuando hace referencia explícita a un control, lo hará implícitamente. su jerarquía de visualización

Estructura Puede anular los valores predeterminados de una plantilla de control para crear una apariencia visual personalizada para el control. Por ejemplo, puede modificar el valor del color de fondo del control Botón para que utilice un valor de color de degradado lineal en lugar de uno sólido. valor de color

Interfaz de usuario Un elemento (como un control Botón) contiene varias listas de instrucciones de gráficos vectoriales. Estas listas describen la definición de representación completa del control. El siguiente código muestra un control Botón definido en un marcado.

?

Si desea enumerar la lista de objetos visuales e instrucciones de gráficos vectoriales que contienen el control Botón

, encontrará el objeto visual. jerarquía que se muestra a continuación

Árbol visual y diagrama de relaciones que presenta los datos

p>

El control Button contiene un elemento ClassicBorderDecorator, que a su vez contiene un elemento ContentPresenter El elemento ClassicBorderDecorator es responsable de dibujar todos los elementos gráficos discretos que componen el borde y el fondo del botón. El elemento ContentPresenter es responsable de mostrar el contenido del botón. El elemento ContentPresenter contiene un elemento Imagen

Hay varias cosas a tener en cuenta sobre la jerarquía de objetos visuales y listas de instrucciones de gráficos vectoriales

Orden en esta jerarquía Indica que comienza el orden de representación de la información del dibujo desde la raíz del elemento visual y atraviesa los subelementos en orden de izquierda a derecha y de arriba a abajo. Si un elemento tiene subelementos visuales, los subelementos del elemento se atravesarán primero y luego los elementos hermanos. del elemento se atravesará.

Los elementos de nodo que no son hoja en la jerarquía (como ContentPresenter) se utilizan para contener elementos secundarios.

Si es un. El elemento visual contiene una lista de instrucciones de gráficos vectoriales y un nivel secundario de visualización. El nivel representará primero la lista de instrucciones en el elemento visual principal antes de representar el dibujo en cualquier objeto visual secundario.

Los elementos de la lista de instrucciones de gráficos vectoriales son representados en orden de izquierda a derecha

Árbol visual Un árbol visual contiene todos los elementos visuales utilizados por la interfaz de usuario de una aplicación. Debido a que los elementos visuales contienen información de dibujo persistente, puede pensar en un árbol visual como un gráfico de escena. , que contiene la información necesaria para escribir la salida en un dispositivo de visualización. El árbol reúne todos los elementos visuales creados directamente por la aplicación en código o marcado. El árbol visual también contiene todos los elementos visuales creados por la funcionalidad de extensión de plantilla de elementos como los controles. y objetos de datos

El siguiente código muestra el elemento StackPanel definido en el marcado

Si tuviera que enumerar la visualización que contiene el elemento StackPanel en el ejemplo de marcado encontrará la siguiente visualización Jerarquía de objetos

Diagrama de relaciones de la jerarquía del árbol visual

¿El orden de presentación se puede determinar a través del árbol visual? El orden de presentación de los objetos visuales de WPF y. Los objetos de dibujo se realizarán desde el nivel superior del árbol visual. El recorrido comienza en la raíz del elemento visual en el nodo y luego atraviesa los elementos secundarios de la raíz del elemento visual en orden de izquierda a derecha. hijos, los hijos del elemento visual se recorrerán primero y luego sus hermanos. Esto significa que el contenido del elemento visual hijo se presenta antes que el contenido del elemento visual en sí.

Diagrama de relaciones del orden de presentación de. el árbol visual

? La raíz del elemento visual La raíz del elemento visual está en la jerarquía del árbol visual El elemento superior en la mayoría de las aplicaciones la clase base de la raíz del elemento visual es Window o NavigationWindow pero Si aloja una visualización en una aplicación Win, la raíz del elemento visual será

El elemento visual superior alojado en la ventana Win

Relación con el árbol lógico El árbol lógico en WPF representa los elementos de la aplicación en tiempo de ejecución. Aunque no manipula directamente el árbol, la vista de la aplicación sí lo es. útil para comprender La herencia de propiedades y el enrutamiento de eventos son muy útiles. A diferencia de los árboles visuales, los árboles lógicos pueden representar objetos de datos no visuales (como ListItem). En muchos casos, los árboles lógicos se corresponden estrechamente con la definición de marcado de la aplicación. Elemento DockPanel definido en el marcado.

?

Si enumeraras los objetos lógicos que contienen el elemento DockPanel en el ejemplo de marcado, encontrarías la siguiente jerarquía de objetos lógicos

Los diagramas del árbol lógico

?

Los árboles visuales y lógicos están sincronizados con la colección actual de elementos de la aplicación y reflejan cualquier adición, eliminación o modificación de elementos. pero estos árboles representan diferentes vistas de la aplicación. A diferencia del árbol visual, el árbol lógico no expande el elemento ContentPresenter del control. Esto significa que no existe una correspondencia directa uno a uno entre el árbol lógico y el árbol visual del mismo conjunto. De hecho, el objeto LogicalTreeHelper se llama con el mismo elemento como parámetro. El método GetChildren y llamar al método GetChild del objeto VisualTreeHelper producirá resultados diferentes.

Utilice XamlPad para ver el árbol visual. La herramienta WPF (XamlPad) proporciona una opción para ver y explorar el árbol visual. El árbol es diferente del definido actualmente. Correspondiente al contenido XAML. Haga clic en el botón Mostrar árbol visual en la barra de menú para mostrar el árbol visual correspondiente. p>

A continuación se explicará cómo usar Visual Tree Explorer en XamlPad Expandir el contenido XAML en nodos de árbol visual en el panel

Panel Visual Tree Explorer [Visual Tree Explorer] en XamlPad

?

Tenga en cuenta que los controles Label TextBox y Button muestran una jerarquía de objetos visuales en el panel Visual Tree Explorer de XamlPad. Esto se debe a que el control WPF tiene un ControlTemplate que contiene su árbol visual. Si haces referencia explícita a un control, implícitamente harás referencia a su jerarquía visual

Análisis del rendimiento visual WPF proporciona un conjunto de herramientas de creación de perfiles de rendimiento para ayudarte a analizar el comportamiento en tiempo de ejecución de tu aplicación y determinar los tipos de optimizaciones de rendimiento que Se pueden aplicar las herramientas Visual Profiler a través del mapeo directo al árbol visual de la aplicación para proporcionar una vista gráfica enriquecida de los datos de rendimiento. La sección Uso de CPU de Visual Profiler en esta captura de pantalla le brinda una comprensión clara del impacto de un objeto en los servicios WPF, como la representación. y diseño

Salida de visualización del perfilador visual

?

Comportamiento de renderizado de objetos visuales WPF introduce varios patrones gráficos que preservan las características que afectan el comportamiento de renderizado de los elementos visuales. objetos Gráficos vectoriales y gráficos independientes del dispositivo

Gráficos en modo preservado Comprender la diferencia entre los sistemas de gráficos en modo inmediato y en modo retenido es uno de los puntos clave para comprender el papel de los objetos visuales en el uso de aplicaciones Win estándar basadas en GDI. o sistema de gráficos en modo GDI Inmediato. Esto significa que la aplicación es responsable de volver a dibujar aquellas partes del espacio de trabajo que quedan invalidadas debido a una operación (como cambiar el tamaño de una ventana) o un cambio en la apariencia visual de un objeto

p>　Win representa diagramas secuenciales

Por el contrario, WPF utiliza un sistema de modo retenido, lo que significa que el objeto de la aplicación con apariencia visual define un conjunto de datos de dibujo serializados y el sistema responde después de que se definen los datos de dibujo. Todas las solicitudes de redibujo se realizan para representar objetos de la aplicación. Incluso en tiempo de ejecución, puede modificar o crear objetos de la aplicación y aún así confiar en que el sistema responda a las solicitudes de dibujo. Una característica poderosa de los sistemas gráficos es que la información de dibujo siempre se conserva. El estado de la aplicación está serializado, pero la funcionalidad de renderizado sigue siendo responsabilidad del sistema. El siguiente diagrama muestra cómo la aplicación depende de WPF para responder a las solicitudes de dibujo. Diagrama del orden de renderizado de WPF. El mayor beneficio de los gráficos es que WPF puede optimizar de manera eficiente lo que se debe volver a dibujar en la aplicación. Incluso si tiene una escena compleja con varias opacidades, generalmente no es necesario escribir código de propósito especial para optimizar la función de redibujado. La función de redibujado se compara con la programación Win, donde puede intentar optimizar su aplicación minimizando la cantidad de redibujado en el área actualizada.

Gráficos vectoriales WPF utiliza gráficos vectoriales como formato para la presentación de datos. Gráficos vectoriales (incluidos los metarchivos de Windows (wmf) de gráficos vectoriales escalables (SVG) y fuentes TrueType) que almacenan datos de representación y los transfieren en forma de una lista de instrucciones. Estas instrucciones describen cómo utilizar primitivas de gráficos para recrear imágenes. Por ejemplo, se describen las fuentes TrueType. Uno de los principales beneficios de los gráficos vectoriales es la capacidad de escalar a cualquier tamaño y resolución.

A diferencia de los gráficos vectoriales, los gráficos de mapa de bits se representan píxel a píxel de la imagen para almacenar. renderizar datos y prerenderizar a una resolución específica Una de las principales diferencias entre los formatos de gráficos de mapa de bits y los formatos de gráficos vectoriales es la fidelidad a la imagen original, como cuando cambia el tamaño de una imagen de origen. y el sistema de gráficos vectoriales estirará la imagen para mantener la fidelidad de la imagen

La siguiente figura muestra la imagen de origen cuando se amplía a 100 veces. Tenga en cuenta que cuando la imagen de origen se estira como un gráfico de mapa de bits se produce una distorsión. la imagen de origen se estira, pero no cuando la imagen de origen se estira como un gráfico vectorial

La diferencia entre gráficos rasterizados y gráficos vectoriales

El siguiente marcado muestra los dos definidos El segundo elemento de un El elemento de ruta utiliza ScaleTransform para ampliar las instrucciones de dibujo del primer elemento. Tenga en cuenta que las instrucciones de dibujo en el elemento de ruta permanecen sin cambios

¿Acerca de la resolución y los gráficos independientes del dispositivo? Determine el tamaño del texto y los gráficos en la pantalla mediante dos factores del sistema: resolución y DPI. La resolución describe la cantidad de píxeles que aparecen en la pantalla. A medida que la resolución aumenta, los píxeles se vuelven más pequeños, lo que da como resultado que los gráficos y el texto mostrados. Los gráficos aparecerán mucho más pequeños en el monitor cuando cambie la resolución del monitor de x a. El tamaño de la mayoría de los sistemas Windows es DPI. Esto significa que una pulgada de pantalla es igual a un píxel. Las pulgadas de la pantalla son más grandes. Disminuir el DPI hará que las pulgadas de la pantalla sean más pequeñas. Esto significa que las pulgadas de la pantalla no son iguales a las pulgadas reales. En la mayoría de los casos, es muy probable que las dos no sean iguales cuando aumenta el DPI. las pulgadas de la pantalla aumentarán y, por lo tanto, los gráficos y el texto habilitados para DPI también aumentarán. Aumentar el DPI puede mejorar la legibilidad del texto, especialmente en resoluciones altas.

No todas las aplicaciones admiten DPI. Algunas aplicaciones utilizan píxeles de hardware. como su unidad de medida principal cambiar el DPI del sistema no tendrá ningún impacto en estas aplicaciones. Muchas otras aplicaciones utilizan unidades compatibles con DPI.

Los bits se utilizan para describir el tamaño de fuente y los píxeles para describir cualquier otra cosa. Un DPI demasiado pequeño o demasiado grande puede causar problemas de diseño en estas aplicaciones porque el texto de la aplicación se escalará con la configuración de DPI del sistema, pero la interfaz de usuario de la aplicación no. Problema de clase Este problema se ha eliminado para las aplicaciones desarrolladas con WPF

WPF admite el escalado automático mediante el uso de píxeles independientes del dispositivo (en lugar de píxeles de hardware) como su principal unidad de medida. Las imágenes y el texto se escalarán adecuadamente. que requiere trabajo adicional por parte del desarrollador de la aplicación. La siguiente imagen muestra un ejemplo de cómo aparecen el texto y los gráficos de WPF en diferentes configuraciones de DPI. Gráficos y texto en diferentes configuraciones de DPI.

?VisualTreeHelper class VisualTreeHelper. class es una clase auxiliar estática que proporciona una funcionalidad de bajo nivel para ser programada a nivel de objeto visual. Esta clase es muy útil en escenarios muy específicos (como el desarrollo de controles personalizados de alto rendimiento)

En la mayoría. En algunos casos, los objetos del marco WPF más avanzados (como Canvas y TextBlock) brindan mayor flexibilidad y son más fáciles de usar.

La clase VisualTreeHelper de prueba de impacto proporciona cuando el soporte de prueba de impacto predeterminado no le satisface. Cuando sea necesario, puede use el método HitTest en la clase VisualTreeHelper para determinar si una geometría o un valor de coordenada de punto está dentro de los límites de un objeto determinado, como un control o un elemento gráfico. Por ejemplo, puede usar la prueba de impacto para determinar si un mouse hace clic. El punto en el cuadro delimitador del objeto cae dentro de la geometría circular. También puede optar por anular la implementación predeterminada de la prueba de acierto para realizar su propio cálculo personalizado de prueba de acierto.

Enumeración de árboles visuales Clase VisualTreeHelper Proporciona funcionalidad para enumerar los miembros de un árbol visual Para recuperar el padre, llame al método GetParent. Para recuperar los hijos o hijos directos de una visualización, llame al método GetChild. Este método devuelve el Visual hijo El siguiente ejemplo muestra cómo enumerar todos los descendientes de una visualización. Es posible que desee utilizar esta técnica si está interesado en serializar toda la información de representación para una jerarquía de visualización

?

En la mayoría de los casos, un árbol lógico es una mejor representación de los elementos de una aplicación WPF. Aunque no modifica el árbol lógico directamente, la vista de la aplicación es útil para comprender la herencia de propiedades y el enrutamiento de eventos. el árbol lógico puede representar objetos de datos no visuales (como ListItem). La clase VisualTreeHelper proporciona métodos para devolver los límites de una visualización. Puede devolver los límites de una visualización llamando a GetContentBounds. Puede devolver los límites de una visualización y todo. sus descendientes llamando a GetDescendantBounds. El siguiente código demuestra cómo calcular el borde del objeto de visualización y todos sus hijos lishixinzhi/Article/program/net/201311/11370