如何将特定图像设置为 Fluent Design AcrylicBackgroundSource

Question

如何将特定图像设置为 Fluent Design AcrylicBackgroundSource 以在 PIP 模式（CompactOverlay）中使用，例如 Groove Music PIP 功能

Answer 1

UWP 应用程序中的 picture-in-picture 严格来说是当前页面的压缩版本。你可能会在普通视图和压缩尝试中看到 Groove 之间的差异，但是实现 Acrylic Brush 的原理是相同的。

考虑到您提出的问题，以下是实现图像模糊的可能方法：

XAML

<Page
    ...>
    <Page.Resources>
        <ImageBrush ImageSource="{Here is your image url}" x:Key="ImageBackground" Stretch="UniformToFill"/>
        <AcrylicBrush x:Key="MaskBackground" BackgroundSource="Backdrop" TintColor="Black" TintOpacity="0.3" FallbackColor="Black"/>
    </Page.Resources>

    <Grid Background="{StaticResource ImageBackground}" Name="ImageLayer">
        <Grid Background="{StaticResource MaskBackground}" Name="MaskLayer"/>

        <Grid>
            <!-- Here is other controls, like play button etc. -->
        </Grid>
    </Grid>
</Page>

用法

这是使用分层方法完成的。设置背景为图片，然后添加遮罩层。

如果要动态更改背景图片，可以删除静态引用并使用 C# 代码进行更改。

var backgroundBrush = new ImageBrush();
backgroundBrush.ImageSource = new BitmapImage(new Uri("Here is your image url"));
ImageLayer.Background = backgroundBrush;

此致。

如何将特定图像设置为 Fluent Design AcrylicBackgroundSource

How to set a specific image as a Fluent Design AcrylicBackgroundSource

c#

xaml

background

uwp

acrylic-material

XAML

用法