How to set a specific image as a Fluent Design AcrylicBackgroundSource

Question

How to set an specific image as a Fluent Design AcrylicBackgroundSource to use in PIP mode (CompactOverlay) like Groove Music PIP feature

Answer 1

The picture-in-picture in UWP applications is strictly a compressed version of the current page. You may see the difference between Groove in normal view and compression attempts, but the principle of implementing Acrylic Brush is the same.

Considering the question you asked, here is a possible way to achieve image blur:

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>

Usage

This is done using a layer approach. Set the background to a picture, then add a mask layer.

If you want to change the background image dynamically, you can remove the static reference and change it with C# code.

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

Best regards.