WPF: Как стилизовать мою форму с уровнями прозрачности

Question

Я хочу реализовать этот вид Window:

Так что в настоящее время у меня есть это Style:

<Window x:Class="CGTransparent.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="AboutDlg"
    Opacity="0.75"
    ResizeMode="NoResize"
    SizeToContent="WidthAndHeight"
    WindowStartupLocation="CenterScreen"
    WindowStyle="None"
    AllowsTransparency="True" Height="300"
                      Width="500"
    ShowInTaskbar="False"
    Background="#00000000">
    <Window.Resources>
        <LinearGradientBrush x:Key="GradientBrush" StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Black" Offset="0.1" />
            <GradientStop Color="#202020" Offset="0.25" />
            <GradientStop Color="#303030" Offset="0.50" />
            <GradientStop Color="#404040" Offset="0.75" />
            <GradientStop Color="#505050" Offset="1.0" />
        </LinearGradientBrush>
    </Window.Resources>
    <Border CornerRadius="15" DockPanel.Dock="Top" Background="{DynamicResource GradientBrush}" Margin="0" Padding="0" BorderBrush="Black" BorderThickness="0">
        <Grid Margin="0" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="500" />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="300" />
            </Grid.RowDefinitions>
        </Grid>
    </Border>
</Window>

Результат (игнорируй тигра...):

Любая идея, как добиться этого примера Style?

Обновление:

<Window x:Class="app.Forms.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:PacketPlayer.Forms"
        mc:Ignorable="d"
        WindowStartupLocation="CenterOwner"
        AllowsTransparency="True" WindowStyle="None"
        Title="Window1" Height="300" Width="300">
    <Border BorderBrush="Transparent" BorderThickness="1" CornerRadius="20">
        <Grid>
        <Image Source="C:\Users\racr\Desktop\download.jpg" Stretch="Fill" Margin="-60">
            <Image.Effect>
                <BlurEffect KernelType="Gaussian" Radius="60" />
            </Image.Effect>
        </Image>
        <Border CornerRadius="60" Margin="30" Background="#7F000000">
            <TextBlock Foreground="White"
                       FontSize="20" FontWeight="Light" TextAlignment="Center"
                       HorizontalAlignment="Center" VerticalAlignment="Center">
                <Run Text="Hello World" FontSize="48"/>
                <LineBreak/>
                <Run Text="walterlv.github.io"/>
            </TextBlock>
        </Border>
        </Grid>
    </Border>
</Window>

Результат:

введите описание изображения здесь

Answer 1

Вы не можете смоделировать свое оригинальное изображение только GradientBrush Вы должны размыть изображение с большим радиусом размытия.

---

Варианты для симуляции

Грустно сказать, что вы не можете реализовать стиль размытия iOS точно так, как он показывает для вас.

Но у нас есть три других метода для моделирования этого типа стиля (в Windows 10), и у каждого есть свои преимущества и недостатки.

1. Вызовите внутренний API Windows SetWindowCompositionAttribute, Вы можете получить слегка размытое прозрачное окно, но эта прозрачность намного меньше, чем у iOS.
   

2. Добавить BlurEffect на фоновое изображение окна. Вы можете получить более похожий визуальный эффект, как у iOS, с очень низкой производительностью. Но таким образом фоновое изображение является фиксированным и не может быть обновлено при перемещении окна.
   

3. Используйте UWP вместо WPF и используйте AcrylicBrush, Вы можете получить высокоэффективное размытое прозрачное окно. Но вы должны попробовать разработку приложений UWP.
   

---

Как их реализовать

SetWindowCompositionAttribute API

призвание SetWindowCompositionAttribute API не очень прост, поэтому я написал класс-оболочку для более легкого использования. Вы можете использовать мой класс, написав только простую строку в файле XAML или в файле cs.

<Window x:Class="CGTransparent.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:interop="clr-namespace:Walterlv.Demo.Interop"
    mc:Ignorable="d" Title="AboutDlg" Height="350" Width="525"
    interop:WindowBlur.IsEnabled="True"
    Background="Transparent">
</Window>

Или вы можете использовать его в файле CS следующим образом:

public class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();
        WindowBlur.SetIsEnabled(this, true);
    }
}

Просто добавьте мой класс-оболочку в ваш проект. Это очень длинный класс, поэтому я вставил его в GitHub: https://gist.github.com/walterlv/752669f389978440d344941a5fcd5b00.

Я также пишу сообщение для его использования, но это не на английском языке: https://walterlv.github.io/post/win10/2017/10/02/wpf-transparent-blur-in-windows-10.html

WPF BlurEffect

Просто установите свойство Effect для элемента WPF UIElement.

<Window x:Class="MejirdrituTeWarqoudear.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        AllowsTransparency="True" WindowStyle="None"
        Width="540" Height="360">
    <Grid>
        <Image Source="YourImageFile.jpg" Stretch="Fill" Margin="-60">
            <Image.Effect>
                <BlurEffect KernelType="Gaussian" Radius="60" />
            </Image.Effect>
        </Image>
        <Border CornerRadius="60" Margin="30" Background="#7F000000">
            <TextBlock Foreground="White"
                       FontSize="20" FontWeight="Light" TextAlignment="Center"
                       HorizontalAlignment="Center" VerticalAlignment="Center">
                <Run Text="Hello World" FontSize="48"/>
                <LineBreak/>
                <Run Text="walterlv.github.io"/>
            </TextBlock>
        </Border>
    </Grid>
</Window>

Обратите внимание, что у него очень низкая производительность.

UWP AcyclicBrush

Вы можете прочитать документы Microsoft Акриловый материал - разработчик приложений UWP | Документы Microsoft для более подробной информации о том, как написать AcylicBrush,

Обновить

Вы можете добавить RectangleGeometry чтобы обрезать ваш UIElement в скругленный прямоугольник.

<Window x:Class="MejirdrituTeWarqoudear.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Width="540" Height="360">
    <Grid>
        <Grid.Clip>
            <RectangleGeometry RadiusX="60" RadiusY="60" Rect="30 30 480 300" />
        </Grid.Clip>
        <Image Source="High+Sierra.jpg" Stretch="Fill" Margin="-60">
            <Image.Effect>
                <BlurEffect KernelType="Gaussian" Radius="60" />
            </Image.Effect>
        </Image>
        <Border Background="#7F000000">
            <TextBlock Foreground="White"
                       FontSize="20" FontWeight="Light" TextAlignment="Center"
                       HorizontalAlignment="Center" VerticalAlignment="Center">
                <Run Text="Hello World" FontSize="48"/>
                <LineBreak/>
                <Run Text="walterlv.github.io"/>
            </TextBlock>
        </Border>
    </Grid>
</Window>