专栏首页Dotnet9.NET CORE(C#) WPF亚克力窗体
原创

.NET CORE(C#) WPF亚克力窗体

.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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • (九)golang--标识符的命名规则

    (5)_本身在go中是一个特殊的标识符,被称为空标识符,可以代表任何其它的表示符,但是它对应的值忽略(比如忽略某个返回值),所以仅能被作为占位符使用,不能作为标...

    绝命生
  • xmpp即时通讯详解

    摘要:         此文档定义了可扩展消息出席协议(XMPP)的核心特性:协议使用XML元素在任意两个网络端点间近实时的交换结构化信息。当XMPP为交换X...

    xiangzhihong
  • Java基础笔记整理---【03】标识符

    标识(shi)符: 作用:Java文件名称、类名、变量名、接口名等等的定义,定义的名字必须含有意义 规则: 1、由英文字母、数字、"_"(下划线)和"$...

    李志伟
  • C语言标识符

    标识符:在编程语言中,标识符是用户编程时使用的名字,变量、常量、函数、语句块都有名字。是用来标识某个实体的一个符号,是对变量名、函数名、标号和其他各种用户定义的...

    用户6755376
  • Python基础语法学习:标识符与保留字

    在编程语言中,我们需要用标识符来代指某个东西,这个东西可以是一个数据,可以是一个函数,一个类,那么与之对应的就是变量名,函数名,类名等概念。

    python学习教程
  • 栈的基本实现(更新中)

    参考着严蔚敏的《数据结构(C语言版)》,用自己拿渣的可怜的C语言做了一下午的实现。。。也没能写出来几个。。。就很菜(气哭)。。。

    李志伟
  • 注册中心 Eureka 源码解析 —— 注册表 InstanceRegistry 类关系

    芋道源码
  • flink on yarn部分源码解析

    转发请注明原创地址:https://www.cnblogs.com/dongxiao-yang/p/9403427.html

    sanmutongzi
  • 如何使用Node.js和Github Webhooks保持远程项目同步

    在处理具有多个开发人员的项目时,当一个人推送到存储库然后另一个人开始对过时版本的代码进行更改时,这可能会令人沮丧。像这些花费时间的错误,这使得设置脚本以保持您的...

    小翼111
  • 现代C++之容器

    本节将深入学习现代C++实战30讲中的第4节与第5节容器所提到的内容。正文中的一些文字直接引用自上面。

    公众号guangcity

扫码关注云+社区

领取腾讯云代金券