WINUI 3.0 Escritorio – agregar una forma a un lienzo en código
Nuevo en WinUI 3.0 – Estoy construyendo una aplicación de escritorio. La ventana principal tiene una cuadrícula:
<grid name="mainGrid" rowdefinitions="40,*" columndefinitions="100,*">
Uso la fila 0 para una barra de menú y la columna 0 para un StackPanel vertical que contiene botones. La parte más importante de la cuadrícula es la celda en la fila 1 y la columna 1. En esa celda necesito mostrar una imagen (desde una URI de archivo). Necesito que la imagen se redimensione cuando se redimensiona la ventana. Mi XAML para la imagen es:
<image name="myImage" source="C:\Users\leigh\OneDrive\Documents\Usa.jpg" stretch="Uniform" grid.row="1" grid.column="1">
</image>
Hasta ahora todo bien – cuando cambio el tamaño de la ventana durante la ejecución, la imagen mantiene sus proporciones originales. Ahora viene la parte difícil…
En el código, necesito agregar varias formas a la imagen en posiciones específicas. Por ejemplo, necesito agregar una elipse para que aparezca, digamos, al 25% desde la parte superior de la imagen y al 65% a la derecha del lado izquierdo de la imagen. Para imaginar esto, piense en una imagen de un mapa de los Estados Unidos. Quiero colocar una elipse justo sobre Chicago. Cuando el usuario cambia el tamaño de la ventana, la elipse debe seguir apareciendo sobre Chicago, pero por supuesto Chicago ahora se encuentra en una posición absoluta diferente en la pantalla del ordenador debido al cambio de tamaño.
¿Necesito usar un elemento Canvas para contener el elemento Image y luego agregar mi elipse al canvas en una posición específica (puedo recalcular las coordenadas absolutas del Canvas en un evento SizeChanged)? He intentado envolver el elemento Image en un Canvas, pero el Canvas no se redimensiona cuando se cambia el tamaño de la ventana. ¿Significa esto que tengo que (1) obtener el tamaño absoluto del archivo de imagen, (2) calcular la “matemática de estiramiento” para establecer el tamaño de un canvas para que la imagen no se distorsione cuando la agregue al canvas, (3) calcular la nueva posición absoluta del canvas de la elipse, etc., etc.?
Todo esto parece increíblemente complejo. Solo quiero mostrar un mapa de los Estados Unidos, dibujar una elipse sobre Chicago en tiempo de ejecución y mantener la elipse sobre Chicago mientras cambio el tamaño de la ventana (sin distorsionar la forma de los Estados Unidos, por supuesto).
¿Alguna sugerencia?
davy.ai
Parece que usar un elemento Canvas para contener el elemento Imagen y otras Formas puede ser la mejor solución para su situación. Cuando se redimensiona la ventana, se puede escuchar el evento SizeChanged y calcular las nuevas coordenadas absolutas de las formas basándose en el nuevo tamaño del Canvas e Imagen. Sin embargo, en lugar de obtener el tamaño absoluto del archivo de imagen, es posible que desee utilizar las propiedades ActualWidth y ActualHeight del elemento Imagen para obtener su tamaño actual después del estiramiento.
Para evitar que la imagen se distorsione al agregarla al Canvas, puede establecer las propiedades Width y Height de la Imagen en “Auto” o en un valor fijo que mantenga su relación de aspecto.
Una vez que tenga configurado el Canvas e Imagen, puede agregar su Elipse (u otras formas) al Canvas con coordenadas X e Y específicas que representen su posición relativa a la esquina superior izquierda de la Imagen. Para calcular estas coordenadas, puede utilizar las propiedades ActualWidth y ActualHeight de la Imagen, junto con los valores porcentuales que desea utilizar para la posición de la Elipse.
En general, aunque puede parecer complejo al principio, este enfoque debería brindarle la flexibilidad que necesita para mantener la Elipse posicionada correctamente sobre Chicago, independientemente de cómo se redimensiona la ventana.