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

微信公衆號：Dotnet9，網站：Dotnet9，問題或建議：請網站留言，
若是對您有所幫助：歡迎讚揚。

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

閱讀導航

1. 本文背景
2. 代碼實現
3. 本文參考
4. 源碼

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>

關鍵點說一下：

1. 做者源碼中隱藏標題欄使用的【fw:AcrylicWindow.ShowTitleBar="False"】，站長使用 .NET CORE 3.1建立的項目提示該屬性不存在，遂嘗試敲打出【fw:AcrylicWindow.AcrylicWindowStyle="None"】屬性替代，效果同樣的;
2. fw:AcrylicWindow.Enabled 屬性是是否啓用亞克力效果的開關，設置爲True，效果見上面演示動畫；設置爲False，效果圖以下：
   
3. 演示窗體分爲左右兩部分，左側設置Grid背景色「#01FFFFFF」，帶有透明度才能看出亞克力效果，右側Grid背景色設置爲白色，方便左右對比。

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

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

3.本文參考

1. 視頻一：C# WPF Design UI: Transparent/Acrylic Window，配套源碼：AcrylicWindow。

4.源碼

文中代碼已經所有給出，可直接Copy代碼，按解決方案目錄組織代碼文件便可運行，另附原做者視頻及源碼【見3.本文參考】、站長成功編譯的Demo(點擊下載->AcrylicWindow)。

除非註明，文章均由 Dotnet9 整理髮布，歡迎轉載。

轉載請註明本文地址：https://dotnet9.com/7372.html

歡迎掃描下方二維碼關注 Dotnet9 的微信公衆號，本站會及時推送最新技術文章

---

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

點擊【閱讀原文】，本站還有更多技術類文章等着您哦，此刻順便爲我點個「再看」可好？