尝试创建背景亚克力模糊效果时如何修复黑屏?

问题描述 投票:0回答:1

对不起我的英语。

我正在为一家公司创建 ERP 应用程序。起初我使用 winForms,但后来我看到了 wpf 设计的视频,并将我的项目更改为 WPF。我正在尝试在屏幕中央创建一个背景模糊的登录窗口。我的意思是,在背景中我想要一种像灰色或其他颜色的颜色,但具有模糊效果,就像它是玻璃或其他东西一样。我看过很多视频并且都使用

SetWindowCompositionAttribute
,但是当我在我的项目中使用它时,项目变黑,并且应该模糊的背景是纯黑色。我真的不知道很多枚举、结构、AccentPolicy,而且我真的不知道我刚刚从视频中复制的类的代码是如何工作的,所以我找不到我的错误。请有人可以向我解释一下......

视频链接:https://www.youtube.com/watch?v=W-YqHkk9CN0&t=482s&ab_channel=JD%27sCodeLab

我将放置我的代码和它的外观的屏幕截图:

XAML

<Window x:Class="Diexsa_ERP.MainWindow"
        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:Diexsa_ERP"
        mc:Ignorable="d"
        Background="#10000000"
        AllowsTransparency="True"
        WindowStyle="None"
        ResizeMode="NoResize"
        FontSize="20"
        WindowStartupLocation="CenterScreen"
        Title="MainWindow" Height="768" Width="1024" MouseDown="Window_MouseDown" Loaded="Window_Loaded">

    <Grid 
        HorizontalAlignment="Center" 
        VerticalAlignment="Center"
        Height="400" 
        Width="400">
        <Border 
            CornerRadius="25" 
            Background="White" 
            Opacity="0.5">
        </Border>
        
        <!--PROFILE PHOTO-->
        <Ellipse 
            Stroke="White" 
            StrokeThickness="1" 
            Height="100" 
            Width="100"
            VerticalAlignment="Top" 
            Margin="-50">
            <Ellipse.Fill>
                <ImageBrush 
                    ImageSource="C:\Users\Sistemas\source\otros\Sistemas WPF\DIEXSA_ERP\Diexsa_ERP\Diexsa_ERP\assets\images\mandragora.png" />
            </Ellipse.Fill>
        </Ellipse>

        <!--LOGIN PANEL-->
        <StackPanel
            Orientation="Vertical"
            Width="300"
            Margin="0, 86, 0, 44" 
            HorizontalAlignment="Center">
            
            
            <TextBlock 
                Text="UserName:" 
                VerticalAlignment="Center"
                Margin="10,5,10,0">
            </TextBlock>
            <TextBox
                Height="50"
                Margin="10,5,10,0"
                Background="Transparent"
                VerticalContentAlignment="Center" 
                Padding="10, 0">
                <TextBox.Resources>
                    <Style 
                        TargetType="{x:Type Border}">
                        <Setter 
                            Property="CornerRadius" Value="15"></Setter>
                    </Style>
                </TextBox.Resources>
            </TextBox>
            
            <TextBlock
                Text="Password:" 
                VerticalAlignment="Center"
                Margin="10,5,10,0">
            </TextBlock>
            <TextBox
                Height="50"
                Background="Transparent"
                VerticalContentAlignment="Center" 
                Padding="10, 0"
                Margin="10,5,10,0">
                <TextBox.Resources>
                    <Style TargetType="{x:Type Border}">
                        <Setter Property="CornerRadius" Value="15"></Setter>
                    </Style>
                </TextBox.Resources>
            </TextBox>

            <Button 
                Width="100" 
                Height="50"
                Content="Login"
                Margin="10">
                <Button.Resources>
                    <Style TargetType="{x:Type Border}">
                        <Setter Property="CornerRadius" Value="15"></Setter>
                    </Style>
                </Button.Resources>
            </Button>

            <Grid>
                <TextBlock 
                    Text="Forgot Password?"
                    FontSize="12"
                    Margin="10,0">
                </TextBlock>
                <TextBlock 
                    Text="Create Account"
                    FontSize="12"
                    HorizontalAlignment="Right"
                    Margin="10,0">
                </TextBlock>
            </Grid>
        </StackPanel>

        
        
        
    </Grid>
</Window>

XAML - CS

using Diexsa_ERP.Class;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace Diexsa_ERP
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Window_MouseDown(object sender, MouseButtonEventArgs e)
        {
            if(e.ChangedButton == MouseButton.Left)
            {
                DragMove();
            }
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
            DataContext = new WindowBlurEffectCL(this);
        }
    }
}

亚克力CL

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.InteropServices;
using System.Text;
using System.Threading.Tasks;

namespace Diexsa_ERP.Class
{
    internal enum AccentState
    {
        ACCENT_DISABLED=0,
        ACCENT_ENABLE_GRADIENT=1,
        ACCENT_ENABLE_TRANSPARENTGRADIENT = 2,
        ACCENT_ENABLE_BLURBEHIND = 3,
        ACCENT_ENABLE_ACRLYLICBLURBEHIND = 4,
        ACCENT_INVALID_STATE = 5
    }

    [StructLayout(LayoutKind.Sequential)]
    internal struct AccentPolicy
    {
        public AccentState AccentState;
        public uint AccentFlags;
        public uint GradientColor;
        public uint AnimationId;
    }

    [StructLayout(LayoutKind.Sequential)]
    internal struct WindowCompositionAttributeData
    {
        public WindowCompositionAttribute Attribute;
        public IntPtr Data;
        public int SizeOfData;
    }

    internal enum WindowCompositionAttribute
    {
        WCA_ACCENT_POLICY = 19
    }

}

模糊效果CL

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.InteropServices;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Interop;

namespace Diexsa_ERP.Class
{
    class WindowBlurEffectCL
    {
        [DllImport ("user32.dll")]
        internal static extern int SetWindowCompositionAttribute(IntPtr hwnd, ref WindowCompositionAttributeData data);

        internal void EnableBlur(Window window)
        {
            var windowHelper = new WindowInteropHelper(window);
            var accent = new AccentPolicy();
            
            // to enable blur the image behind the window
            accent.AccentState = AccentState.ACCENT_ENABLE_BLURBEHIND;

            var accentStructSize = Marshal.SizeOf(accent);
            var accentPtr = Marshal.AllocHGlobal(accentStructSize);
            Marshal.StructureToPtr(accent, accentPtr, false);

            var data = new WindowCompositionAttributeData();
            data.Attribute = WindowCompositionAttribute.WCA_ACCENT_POLICY;
            data.SizeOfData = accentStructSize;
            data.Data = accentPtr;

            SetWindowCompositionAttribute(windowHelper.Handle, ref data);


            Marshal.FreeHGlobal(accentPtr);
        }


        internal WindowBlurEffectCL(Window window)
        {
            EnableBlur(window);
        }
    }
}

最终结果:

预计: enter image description here

结果: enter image description here

c# wpf background blur ui-design
1个回答
0
投票

使用“丙烯酸画笔”;它是 UWP 原生的,并可通过社区工具包在 WPF 中使用。我使用 UWP 画笔将工具箱的背景设置为半透明,覆盖应用程序的内容(地图和其他内容);效果很好。您可以改变丙烯酸的不透明度,以便可以改变背景“闪耀”的程度。

https://learn.microsoft.com/en-us/windows/communitytoolkit/brushes/amicbrush

© www.soinside.com 2019 - 2024. All rights reserved.