当前位置： 移动技术网 > IT编程>开发语言>.net > .NET CORE(C#) WPF亚克力窗体

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

2020年01月17日  | 移动技术网IT编程  | 我要评论

老挝石,泰剧蜜色死神12,柔美娜

微信公众号：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 整理发布，欢迎转载。

转载请注明本文地址：

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

dotnet9

时间如流水，只能流去不流回！

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网