带有图像模糊UWP的Dropshadow

Question

我想得到Windows视频应用程序模糊的结果。我做了一个带有阴影的图像，但只给了阴影一种颜色。是否可以使用win2d或其他工具获得此结果，然后将该图像用于DropShadow？

​

​

我的MainPage.xaml：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid Width="200" Height="200" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Grid x:Name="grid"/>
        <Image x:Name="image" Source="Assets/image.jpg"/>
    </Grid>
</Grid>

我的MainPage.xaml.cs：

private void Page_Loaded(object sender, RoutedEventArgs e)
{
    var compositor = ElementCompositionPreview.GetElementVisual(grid).Compositor;
    var spriteVisual = compositor.CreateSpriteVisual();
    spriteVisual.Size = new Vector2(200, 200);
    var dropShadow = compositor.CreateDropShadow();
    dropShadow.Offset = new Vector3(10, 10, 0);
    dropShadow.BlurRadius = 10;
    dropShadow.Color = Colors.Orange;
    spriteVisual.Shadow = dropShadow;
    ElementCompositionPreview.SetElementChildVisual(grid, spriteVisual);
}

谢谢你的帮助。

Answer 1

这应该会让你开始创建你想要的效果。您将需要由Microsoft赞助的UWP Community Toolkit库。它有一个令人惊叹的动画语法，你会在下面看到，并且它使用了幕后的合成API。根据需要调整模糊、缩放和淡入淡出。

XAML

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid Width="200" Height="200" HorizontalAlignment="Center" VerticalAlignment="Center" PointerEntered="Grid_PointerEntered" PointerExited="Grid_PointerExited">
        <Image x:Name="imageBackdrop" Source="Assets/image.jpg" Opacity="0"/>
        <Image x:Name="image" Source="Assets/image.jpg"/>
    </Grid>
</Grid>

C#

using Microsoft.Toolkit.Uwp.UI.Animations;

private void Grid_PointerEntered(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
{    
  imageBackdrop.Fade(0.5f, 50).Scale(1.1f, 1.1f,0,0,0).Blur(75, 0).Offset(0, 20, 0).Start();
}

private void Grid_PointerExited(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
{    
  imageBackdrop.Opacity = 0;
}

编辑:更容易使用容器在XAML中进行扩展。此外，添加一个不透明效果作为模糊效果相同的元素，似乎使模糊效果封顶在一个非常低的BlurAmount。使用像这样的东西结合不透明蒙版或其他东西，使其变暗，并羽化边缘：

private void Grid_PointerEntered(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
{
    var element = imageBackdrop;
    var visual = ElementCompositionPreview.GetElementVisual(element);
    var compositor = visual.Compositor;

    var effect = new GaussianBlurEffect()
    {
        Name = "Blur",
        Source = new CompositionEffectSourceParameter("EffectSource"),
        BlurAmount = 50f,
        BorderMode = EffectBorderMode.Soft,
    };

    var blurEffectFactory = compositor.CreateEffectFactory(effect, new[] { effect.Name + "." + nameof(effect.BlurAmount) });
    var brush = blurEffectFactory.CreateBrush();
    var destinationBrush = compositor.CreateBackdropBrush();
    brush.SetSourceParameter("EffectSource", destinationBrush);

    var sprite = compositor.CreateSpriteVisual();
    sprite.Size = new Vector2((float)(element.RenderSize.Width), (float)(element.RenderSize.Height));
    sprite.Brush = brush;
    ElementCompositionPreview.SetElementChildVisual(element, sprite);
    imageBackdropContainer.Opacity = 1;
}

private void Grid_PointerExited(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
{
    imageBackdropContainer.Opacity = 0;
}

​

​

Answer 2

您可以尝试使用较低的Opacity来偏移相同的图像，以使用CompositionSurfaceBrush实现类似的效果。

private void Page_Loaded(object sender, RoutedEventArgs e)
{
    var compositor = ElementCompositionPreview.GetElementVisual(grid).Compositor;
    var spriteVisual = compositor.CreateSpriteVisual();
    spriteVisual.Size = new Vector2(215, 215);

    var brush = compositor.CreateSurfaceBrush();
    LoadedImageSurface _loadedSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/image.jpg"));
    brush.Surface = _loadedSurface;

    spriteVisual.Opacity = 0.1f;
    spriteVisual.Brush = brush;

    ElementCompositionPreview.SetElementChildVisual(grid, spriteVisual);
}

效果是这样的：

​

​

Answer 3

来自Windows Community Toolkit的DropShadowPanel应该可以实现您想要的功能。至少我是用这个来实现的。然后使用VisualStateManager将其可见性设置为True when PointerOver。