WPF：如何使用透明性级别设计我的表单

我想实现这种

窗口

：

所以现在我有了这个

风格

：

<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>

结果:

---

您不能仅使用

GradientBrush模拟原始图像，您应该使用大量模糊半径模糊图像


模拟它的选项
很遗憾地告诉您，无法完全按照iOS模糊样式为您实现

但是，我们还有其他三种方法来模拟这种样式（在Windows 10上），每种方法都有其优缺点

调用Windows内部API
SetWindowCompositionAttribute
。您可以得到一个稍微模糊的透明窗口，但这种透明度比iOS窗口小得多。


在窗口背景图像中添加一个
模糊效果
。您可以获得与iOS更相似的视觉效果，但性能非常差。但这样，背景图像是固定的，在窗口移动时无法更新。


使用UWP而不是WPF，并使用
丙烯刷
。您可以获得高性能的模糊透明窗口。但是您应该尝试UWP应用程序开发。



如何实施
SetWindowCompositionAttribute API
调用
SetWindowCompositionAttribute
API并不容易，因此我编写了一个包装类以便于使用。您可以通过在XAML文件或cs文件中只写一行来使用my类

<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>

只需将我的包装器类添加到您的项目中。这是一个很长的类，所以我粘贴到GitHub:

我也写了一篇文章介绍它的用法，但不是用英语写的：

WPF模糊效应
只需设置wpfuielement的Effect属性

<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>

我没有提到我需要背景图像，我非常喜欢你的第二个窗口示例，性能并不是那么重要，因为这个窗口作为子窗口打开了几秒钟。我可以使用你的WPF BlurEffect示例获得这种样式？@Dallaz，当然，你甚至可以全部使用它们。我很高兴我能帮助你。我只需要回家在我的电脑上测试它，顺便说一句，为什么不可能得到这种iOS风格？我刚刚看到你提到，这只能在Windows 10上，那么Windows 7呢？
public class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();
        WindowBlur.SetIsEnabled(this, true);
    }
}

<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>

<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>