Sombra de redimensionamiento dinámico en UWP
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.
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:
Con estos cambios, la sombra ahora se redimensionará junto con los elementos de la GridView.