.NET CORE(C#) WPF亞克力窗體

首頁>技術>沙漠盡頭的狼2020-01-17 03:06

.NET CORE(C#) WPF亞克力窗體

閱讀導航

本文背景程式碼實現本文參考原始碼1. 本文背景

本文介紹使用FluentWPF控制元件庫實現亞克力效果的窗體。

2. 程式碼實現

使用 .Net Core 3.1 建立名為 “AcrylicWindow” 的WPF模板專案，新增三個Nuget庫：MaterialDesignThemes、MaterialDesignColors和FluentWPF，其中亞克力效果是由FluentWPF控制元件庫實現的。

以下為三個庫具體版本：

&lt;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34;?&gt;&lt;packages&gt;  &lt;package id=&#34;FluentWPF&#34; version=&#34;0.4.0&#34; targetFramework=&#34;net461&#34; /&gt;  &lt;package id=&#34;MaterialDesignColors&#34; version=&#34;1.1.2&#34; targetFramework=&#34;net461&#34; /&gt;  &lt;package id=&#34;MaterialDesignThemes&#34; version=&#34;2.4.1.1101&#34; targetFramework=&#34;net461&#34; /&gt;&lt;/packages&gt;

解決方案主要檔案目錄組織結構：

AcrylicWindowApp.xamlMainWindow.xamlMainWIndow.xaml.cs2.1 引入樣式

檔案【App.xaml】，在StartupUri中設定啟動的檢視【MainWindow.xaml】，並在【Application.Resources】節點增加MaterialDesignThemes和FluentWPF控制元件庫的樣式檔案：

&lt;Window x:Class=&#34;AcrylicWindow.MainWindow&#34;        xmlns=&#34;/file/2020/01/17/20200117030436_6261.jpg.aspx        xmlns:materialDesign=&#34;/file/2020/01/17/20200117030437_6262.jpg        xmlns:d=&#34;/file/2020/01/17/20200117030438_6263.jpg.aspx        xmlns:x=&#34;/file/2020/01/17/20200117030438_6264.jpg.aspx        xmlns:mc=&#34;http://schemas.openxmlformats.org/markup-compatibility/2006&#34;        xmlns:fw=&#34;clr-namespace:SourceChord.FluentWPF;assembly=FluentWPF&#34;        mc:Ignorable=&#34;d&#34;        fw:AcrylicWindow.Enabled=&#34;True&#34; fw:AcrylicWindow.AcrylicWindowStyle=&#34;None&#34;        MouseDown=&#34;Window_MouseDown&#34; FontSize=&#34;15&#34; Height=&#34;600&#34; Width=&#34;1080&#34; WindowStyle=&#34;None&#34; AllowsTransparency=&#34;True&#34; ResizeMode=&#34;NoResize&#34; WindowStartupLocation=&#34;CenterScreen&#34;&gt;    &lt;Grid&gt;        &lt;Grid.ColumnDefinitions&gt;            &lt;ColumnDefinition Width=&#34;350&#34;/&gt;            &lt;ColumnDefinition Width=&#34;*&#34;/&gt;        &lt;/Grid.ColumnDefinitions&gt;        &lt;Grid fw:PointerTracker.Enabled=&#34;True&#34; Background=&#34;#01FFFFFF&#34;&gt;            &lt;StackPanel&gt;                &lt;StackPanel Orientation=&#34;Horizontal&#34;&gt;                    &lt;Button Foreground=&#34;Black&#34; Background=&#34;{x:Null}&#34; BorderBrush=&#34;{x:Null}&#34;&gt;                        &lt;materialDesign:PackIcon Kind=&#34;ArrowLeft&#34;/&gt;                    &lt;/Button&gt;                    &lt;TextBlock Text=&#34;Settings&#34; FontSize=&#34;12&#34; Margin=&#34;10&#34; VerticalAlignment=&#34;Center&#34;/&gt;                &lt;/StackPanel&gt;                &lt;ListViewItem Padding=&#34;0&#34;&gt;                    &lt;StackPanel Orientation=&#34;Horizontal&#34;&gt;                        &lt;materialDesign:PackIcon Kind=&#34;Home&#34; Margin=&#34;15&#34;/&gt;                        &lt;TextBlock Text=&#34;Home&#34; VerticalAlignment=&#34;Center&#34;/&gt;                    &lt;/StackPanel&gt;                &lt;/ListViewItem&gt;                &lt;TextBlock Text=&#34;System&#34; Margin=&#34;15&#34; FontWeight=&#34;DemiBold&#34;/&gt;                &lt;ListView FontSize=&#34;15&#34;&gt;                    &lt;ListViewItem Padding=&#34;1&#34;&gt;                        &lt;StackPanel Orientation=&#34;Horizontal&#34;&gt;                            &lt;materialDesign:PackIcon Kind=&#34;Monitor&#34; Margin=&#34;15&#34;/&gt;                            &lt;TextBlock Text=&#34;Video&#34; VerticalAlignment=&#34;Center&#34;/&gt;                        &lt;/StackPanel&gt;                    &lt;/ListViewItem&gt;                    &lt;ListViewItem Padding=&#34;1&#34;&gt;                        &lt;StackPanel Orientation=&#34;Horizontal&#34;&gt;                            &lt;materialDesign:PackIcon Kind=&#34;Headphones&#34; Margin=&#34;15&#34;/&gt;                            &lt;TextBlock Text=&#34;Audio&#34; VerticalAlignment=&#34;Center&#34;/&gt;                        &lt;/StackPanel&gt;                    &lt;/ListViewItem&gt;                    &lt;ListViewItem Padding=&#34;1&#34;&gt;                        &lt;StackPanel Orientation=&#34;Horizontal&#34;&gt;                            &lt;materialDesign:PackIcon Kind=&#34;MessageOutline&#34; Margin=&#34;15&#34;/&gt;                            &lt;TextBlock Text=&#34;Notifications&#34; VerticalAlignment=&#34;Center&#34;/&gt;                        &lt;/StackPanel&gt;                    &lt;/ListViewItem&gt;                    &lt;ListViewItem Padding=&#34;1&#34;&gt;                        &lt;StackPanel Orientation=&#34;Horizontal&#34;&gt;                            &lt;materialDesign:PackIcon Kind=&#34;BatteryOutline&#34; Margin=&#34;15&#34;/&gt;                            &lt;TextBlock Text=&#34;Battery&#34; VerticalAlignment=&#34;Center&#34;/&gt;                        &lt;/StackPanel&gt;                    &lt;/ListViewItem&gt;                &lt;/ListView&gt;            &lt;/StackPanel&gt;        &lt;/Grid&gt;        &lt;Grid Grid.Column=&#34;1&#34; Background=&#34;White&#34;&gt;        &lt;/Grid&gt;    &lt;/Grid&gt;&lt;/Window&gt;

關鍵點說一下：

作者原始碼中隱藏標題欄使用的【fw:AcrylicWindow.ShowTitleBar="False"】，站長使用 .NET CORE 3.1建立的專案提示該屬性不存在，遂嘗試敲打出【fw:AcrylicWindow.AcrylicWindowStyle="None"】屬性替代，效果一樣的;fw:AcrylicWindow.Enabled 屬性是是否啟用亞克力效果的開關，設定為True，效果見上面演示動畫；設定為False，效果圖如下：演示窗體分為左右兩部分，左側設定Grid背景色“#01FFFFFF”，帶有透明度才能看出亞克力效果，右側Grid背景色設定為白色，方便左右對比。

後臺程式碼【MainWindow.xaml.cs】實現滑鼠左鍵拖動窗體功能：

private void Window_MouseDown(object sender, MouseButtonEventArgs e){    DragMove();}

3.本文參考視訊一：C# WPF Design UI: Transparent/Acrylic Window，配套原始碼：AcrylicWindow。4.原始碼

文中程式碼已經全部給出，可直接Copy程式碼，按解決方案目錄組織程式碼檔案即可執行，另附原作者視訊及原始碼【見3.本文參考】、站長成功編譯的Demo(點選下載->AcrylicWindow)。

除非註明，文章均由 Dotnet9 整理髮布，歡迎轉載。轉載請註明本文地址：https://dotnet9.com/7372.html

時間如流水，只能流去不流回！

XAML

XML

∨ 教你搭建屬於自己的網站第一篇建站基礎

劇多

.NET CORE(C#) WPF亞克力窗體

XAML

XML