Как установить конкретное изображение как свободный дизайн AcrylicBackgroundSource

Question

Как установить конкретное изображение в качестве свободного дизайна AcrylicBackgroundSource использовать в режиме PIP (CompactOverlay) нравится функция Groove Music PIP

Answer 1

Картинка в картинке в приложениях UWP является строго сжатой версией текущей страницы. Вы можете увидеть разницу между 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;

С уважением.