欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-09-28 19:30:45
微信公众号: "Dotnet9" ,网站: "Dotnet9" ,问题或建议: "请网站留言" , 如果对您有所帮助: "欢迎赞赏" 。 .NET CORE(C ) WPF亚克力窗体 阅读导航 1. 本文背景 2. 代码实现 3. 本文参考 4. 源码 1. 本文背景 本文介绍使用FluentWPF ......

微信公众号:dotnet9,网站:dotnet9,问题或建议:,
如果对您有所帮助:。

.net core(c#) wpf亚克力窗体

阅读导航

  1. 本文背景
  2. 代码实现
  3. 本文参考
  4. 源码

1. 本文背景

本文介绍使用fluentwpf控件库实现亚克力效果的窗体。

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

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,效果图如下:
    .NET CORE(C#) WPF亚克力窗体
  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 整理发布,欢迎转载。

转载请注明本文地址:

欢迎扫描下方二维码关注 dotnet9 的微信公众号,本站会及时推送最新技术文章

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


时间如流水,只能流去不流回!

点击【阅读原文】,本站还有更多技术类文章等着您哦,此刻顺便为我点个“再看”可好?