es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Sombra de redimensionamiento dinámico en UWP

11 Jul, 2023 Programación

Estoy trabajando en la adición de una sombra a los elementos de la GridView. El código a continuación logra esto, sin embargo, los elementos de mi GridView pueden cambiar de tamaño dependiendo del tamaño de la ventana. Y la sombra no cambia de tamaño junto con ellos. Entiendo por qué no lo hace, ya que solo le estoy asignando un tamaño estático a la sombra, pero no logro averiguar cómo hacer que la sombra cambie de tamaño junto con la cuadrícula que está detrás de ella.

Aquí está mi código:

private void Item_Loaded(object sender, RoutedEventArgs e)
{
    var root = (UIElement)sender;
    InitializeShadowAnimation(root, FindVisualChild<canvas>(root));
}

private void InitializeShadowAnimation(UIElement root, UIElement shadowHost)
{
    var rootVisual = ElementCompositionPreview.GetElementVisual(root);
    var shadowHostVisual = ElementCompositionPreview.GetElementVisual(shadowHost);
    var compositor = shadowHostVisual.Compositor;

    var shadow = compositor.CreateDropShadow();
    shadow.BlurRadius = 35f;
    shadow.Offset = new Vector3(15, 15, 5);

    var shadowVisual = compositor.CreateSpriteVisual();
    shadowVisual.Shadow = shadow;

    var size = new Vector2(0, 0);

    if (root is FrameworkElement element)
    {
        size = new Vector2((float)element.ActualWidth - 50, (float)element.ActualHeight - 50);
    }

    shadowVisual.Size = size;

    ElementCompositionPreview.SetElementChildVisual(shadowHost, shadowVisual);
}

Y aquí está el código XAML correspondiente para la plantilla de datos:

<datatemplate x:key="CardViewItemTemplate" x:datatype="data:MyData">

    <grid x:name="MainGrid" loaded="Item_Loaded" tag="{Binding}">

        <canvas x:name="ShadowContainer"></canvas>

    </grid>

</datatemplate>

Gracias de antemano.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que la sombra se redimensione dinámicamente con los elementos de la GridView, deberás actualizar el tamaño de la sombra en respuesta a los cambios en el tamaño de los elementos de la GridView. Una forma de hacer esto es manejar el evento SizeChanged del elemento GridView y actualizar el tamaño de la sombra en consecuencia. Aquí tienes un ejemplo:

    1. Añade un controlador de eventos SizeChanged al elemento Grid en el DataTemplate:
    <grid x:name="MainGrid" loaded="Item_Loaded" tag="{Binding}" sizechanged="MainGrid_SizeChanged">
    <canvas x:name="ShadowContainer"></canvas>
</grid>
    1. En el controlador de eventos, obtén el tamaño del elemento Grid y actualiza el tamaño de la sombra:
    private void MainGrid_SizeChanged(object sender, SizeChangedEventArgs e)
{
    var root = (UIElement)sender;
    var shadowHost = FindVisualChild<canvas>(root);
    var size = new Vector2((float)e.NewSize.Width - 50, (float)e.NewSize.Height - 50);
    foreach (var childVisual in ElementCompositionPreview.GetElementChildVisuals(shadowHost))
    {
        ((SpriteVisual)childVisual).Size = size;
    }
}
    1. En el método InitializeShadowAnimation, establece el tamaño inicial de la sombra como antes:
    var size = new Vector2((float)root.ActualWidth - 50, (float)root.ActualHeight - 50);

    Con estos cambios, la sombra ahora se redimensionará junto con los elementos de la GridView.

Comments are closed.