时间戳

首页 > 解决方案 > WPF：如何使用透明级别设置我的表单样式

wpf - WPF：如何使用透明级别设置我的表单样式

问题描述

我想实现这种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>

结果：

在此处输入图像描述

标签： wpfcolorswinobjc

解决方案

您不能仅使用 来模拟原始图像GradientBrush，您应该使用大量模糊半径来模糊图像。

模拟它的选项

很遗憾地告诉您，您无法完全按照它为您显示的那样实现 iOS 模糊样式。

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

  1. 调用 Windows 内部 API SetWindowCompositionAttribute。你可以得到一个轻微模糊的透明窗口，但这种透明度比 iOS 的要小得多。
    图片来自我的帖子

  2. 添加BlurEffect到窗口背景图像。您可以获得与性能非常差的 iOS 更相似的视觉效果。但是这样一来，背景图片是固定的，不能在窗口移动时更新。
    WPF的模糊效果

  3. 使用 UWP 而不是 WPF 并使用AcrylicBrush. 您可以获得高性能的模糊透明窗口。但是您应该尝试 UWP 应用程序开发。
    来自 docs.microsoft.com 的 UWP AcrylicBrush

如何实施它们

SetWindowCompositionAttribute API

调用SetWindowCompositionAttributeAPI 不是很容易，所以我写了一个包装类以便于使用。您可以通过在 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 模糊效果

只需设置 WPF UIElement 的 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>

请注意，它的性能非常差。

UWP 无环画笔

可以阅读微软的文档亚克力材料- UWP app developer | Microsoft Docs有关如何编写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>

推荐阅读