.NET CORE(C#) WPF亞克力窗體
阿新 • • 發佈:2020-04-22
.NET CORE(C#) WPF亞克力窗體
閱讀導航
- 本文背景
- 程式碼實現
- 本文參考
- 原始碼
1. 本文背景
本文介紹使用FluentWPF控制元件庫實現亞克力效果的窗體。
2. 程式碼實現
使用 .Net Core 3.1 建立名為 “AcrylicWindow” 的WPF模板專案,新增三個Nuget庫:MaterialDesignThemes、MaterialDesignColors和FluentWPF,其中亞克力效果是由FluentWPF控制元件庫實現的。
以下為三個庫具體版本:
<?xml version="1.0" encoding="utf-8"?> <packages> <package id="FluentWPF" version="0.4.0" targetFramework="net461" /> <package id="MaterialDesignColors" version="1.1.2" targetFramework="net461" /> <package id="MaterialDesignThemes" version="2.4.1.1101" targetFramework="net461" /> </packages>
解決方案主要檔案目錄組織結構:
- AcrylicWindow
- App.xaml
- MainWindow.xaml
- MainWIndow.xaml.cs
2.1 引入樣式
檔案【App.xaml】,在StartupUri中設定啟動的檢視【MainWindow.xaml】,並在【Application.Resources】節點增加MaterialDesignThemes和FluentWPF控制元件庫的樣式檔案:
<Application x:Class="AcrylicWindow.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="MainWindow.xaml"> <Application.Resources> <ResourceDictionary> <ResourceDictionary.MergedDictionaries> <!-- FluentWPF Controls --> <ResourceDictionary Source="pack://application:,/FluentWPF;component/Styles/Controls.xaml" /> <!-- Material Design Controls--> <ResourceDictionary Source="pack://application:,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" /> <ResourceDictionary Source="pack://application:,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml"/> </ResourceDictionary.MergedDictionaries> </ResourceDictionary> </Application.Resources> </Application>
2.2 演示窗體佈局
檔案【MainWindow.xaml】,引入MaterialDesignThemes和FluentWPF控制元件庫的名稱空間,原始碼如下:
<Window x:Class="AcrylicWindow.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:fw="clr-namespace:SourceChord.FluentWPF;assembly=FluentWPF"
mc:Ignorable="d"
fw:AcrylicWindow.Enabled="True" fw:AcrylicWindow.AcrylicWindowStyle="None"
MouseDown="Window_MouseDown" FontSize="15" Height="600" Width="1080" WindowStyle="None" AllowsTransparency="True" ResizeMode="NoResize" WindowStartupLocation="CenterScreen">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="350"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid fw:PointerTracker.Enabled="True" Background="#01FFFFFF">
<StackPanel>
<StackPanel Orientation="Horizontal">
<Button Foreground="Black" Background="{x:Null}" BorderBrush="{x:Null}">
<materialDesign:PackIcon Kind="ArrowLeft"/>
</Button>
<TextBlock Text="Settings" FontSize="12" Margin="10" VerticalAlignment="Center"/>
</StackPanel>
<ListViewItem Padding="0">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="Home" Margin="15"/>
<TextBlock Text="Home" VerticalAlignment="Center"/>
</StackPanel>
</ListViewItem>
<TextBlock Text="System" Margin="15" FontWeight="DemiBold"/>
<ListView FontSize="15">
<ListViewItem Padding="1">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="Monitor" Margin="15"/>
<TextBlock Text="Video" VerticalAlignment="Center"/>
</StackPanel>
</ListViewItem>
<ListViewItem Padding="1">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="Headphones" Margin="15"/>
<TextBlock Text="Audio" VerticalAlignment="Center"/>
</StackPanel>
</ListViewItem>
<ListViewItem Padding="1">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="MessageOutline" Margin="15"/>
<TextBlock Text="Notifications" VerticalAlignment="Center"/>
</StackPanel>
</ListViewItem>
<ListViewItem Padding="1">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="BatteryOutline" Margin="15"/>
<TextBlock Text="Battery" VerticalAlignment="Center"/>
</StackPanel>
</ListViewItem>
</ListView>
</StackPanel>
</Grid>
<Grid Grid.Column="1" Background="White">
</Grid>
</Grid>
</Window>
關鍵點說一下:
- 作者原始碼中隱藏標題欄使用的【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.本文參考
4.原始碼
文中程式碼已經全部給出,可直接Copy程式碼,按解決方案目錄組織程式碼檔案即可執行,另附原作者視訊及原始碼【見3.本文參考】、站長成功編譯的Demo(點選下載->AcrylicWindow)。
除非註明,文章均由 Dotnet9 整理髮布,歡迎轉載。
轉載請註明本文地址:https://dotnet9.com/7372.html
歡迎掃描下方二維碼關注 Dotnet9 的微信公眾號,本站會及時推送最新技術文章
時間如流水,只能流去不流回!
點選【閱讀原文】,本站還有更多技術類文章等著您哦,此刻順便為我點個“再看”可好?