C# WPF简况(2/3)
程序员文章站
2022-05-10 12:29:25
微信公众号: "Dotnet9" ,网站: "Dotnet9" ,问题或建议: "请网站留言" , 如果对您有所帮助: "欢迎赞赏" 。 C WPF简况(2/3) 阅读导航 1. 本文背景 2. 代码实现 3. 本文参考 1.本文背景 承接上文( "C WPF联系人列表(1/3)" ),添加好友简况 ......
c# wpf简况(2/3)
阅读导航
- 本文背景
- 代码实现
- 本文参考
1.本文背景
承接上文(c# wpf联系人列表(1/3)),添加好友简况。
本文效果如下:
2.代码实现
使用 .net core 3.1 创建名为 “chat” 的wpf项目,添加 materialdesignthemes(3.0.1)、materialdesigncolors(1.2.2)两个nuget库,文中部分图片可在文末视频配套源码中下载。
2.1 引入md控件样式文件
使用md控件的常规操作,需要在app.xaml中引入4个样式文件
<application x:class="chat.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> <resourcedictionary source="pack://application:,,,/materialdesignthemes.wpf;component/themes/materialdesigntheme.dark.xaml" /> <resourcedictionary source="pack://application:,,,/materialdesignthemes.wpf;component/themes/materialdesigntheme.defaults.xaml" /> <resourcedictionary source="pack://application:,,,/materialdesigncolors;component/themes/recommended/primary/materialdesigncolor.green.xaml" /> <resourcedictionary source="pack://application:,,,/materialdesigncolors;component/themes/recommended/accent/materialdesigncolor.lime.xaml" /> </resourcedictionary.mergeddictionaries> </resourcedictionary> </application.resources> </application>
2.2 界面布局
纯粹的布局代码:
<window x:class="chat.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" mc:ignorable="d" height="600" width="1080" resizemode="noresize" mouseleftbuttondown="window_mouseleftbuttondown" windowstartuplocation="centerscreen" windowstyle="none" fontfamily="dosis"> <grid> <grid.columndefinitions> <columndefinition width="270"/> <columndefinition width="*"/> <columndefinition width="270"/> </grid.columndefinitions> <grid grid.column="1" background="#ffe4e4e4"/> <stackpanel grid.column="0" background="{staticresource primaryhuedarkbrush}"> <stackpanel orientation="horizontal" background="white"> <image width="210" height="80" source="assets/logo.png"/> <button style="{staticresource materialdesignflatbutton}"> <materialdesign:packicon kind="pluscircle" width="24" height="24"/> </button> </stackpanel> <textbox margin="20 10" style="{staticresource materialdesignfloatinghinttextbox}" materialdesign:hintassist.hint="搜索" foreground="white"/> <grid> <grid.columndefinitions> <columndefinition width="*"/> <columndefinition width="*"/> <columndefinition width="*"/> <columndefinition width="*"/> </grid.columndefinitions> <button style="{staticresource materialdesignflatbutton}" grid.column="0"> <materialdesign:packicon kind="history" foreground="white"/> </button> <button style="{staticresource materialdesignflatbutton}" grid.column="1"> <materialdesign:packicon kind="people" foreground="white"/> </button> <button style="{staticresource materialdesignflatbutton}" grid.column="2"> <materialdesign:packicon kind="contacts" foreground="white"/> </button> <button style="{staticresource materialdesignflatbutton}" grid.column="3"> <materialdesign:packicon kind="archive" foreground="white"/> </button> </grid> <listview> <listviewitem horizontalalignment="stretch"> <grid horizontalalignment="center" margin="5"> <grid.columndefinitions> <columndefinition width="50"/> <columndefinition width="150"/> <columndefinition width="50*"/> </grid.columndefinitions> <border width="40" height="40" cornerradius="25" borderbrush="white" borderthickness="0.6"> <border.background> <imagebrush imagesource="https://img.dotnet9.com/logo.png"/> </border.background> </border> <border width="10" height="10" verticalalignment="bottom" margin="5" horizontalalignment="right" cornerradius="15" background="lightgreen"/> <stackpanel grid.column="1"> <textblock text="dotnet9.com" margin="10 0"/> <textblock text="一个热衷于互联网分享精神的程序员的网站!" margin="10 0" texttrimming="characterellipsis" opacity="0.6" fontsize="11"/> </stackpanel> <border grid.column="2" width="20" height="20" cornerradius="15" background="white" horizontalalignment="center" verticalalignment="center" margin="5"> <textblock fontsize="11" text="9" foreground="{staticresource primaryhuedarkbrush}" horizontalalignment="center" verticalalignment="center"/> </border> </grid> </listviewitem> </listview> </stackpanel> <stackpanel grid.column="2" background="white"> <button horizontalalignment="right" margin="10" style="{staticresource materialdesignflatbutton}" click="close_click"> <materialdesign:packicon kind="close"/> </button> <border width="150" height="150" cornerradius="80" borderthickness="1" borderbrush="gray"> <border.background> <imagebrush imagesource="https://img.dotnet9.com/logo.png"/> </border.background> </border> <textblock text="dotnet9" horizontalalignment="center" margin="0 10 0 0" foreground="gray" fontsize="18" fontweight="bold"/> <textblock text="dotnet程序员" fontsize="13" foreground="gray" horizontalalignment="center" opacity="0.8"/> <textblock text="时间如流水,只能流去不流回。" fontsize="8" foreground="gray" horizontalalignment="center" opacity="0.8"/> <stackpanel margin="20"> <stackpanel orientation="horizontal" margin="0 3"> <materialdesign:packicon kind="location" foreground="gray"/> <textblock text="成都" margin="10 0" foreground="gray"/> </stackpanel> <stackpanel orientation="horizontal" margin="0 3"> <materialdesign:packicon kind="cellphone" foreground="gray"/> <textblock text="186 2806 0000" margin="10 0" foreground="gray"/> </stackpanel> <stackpanel orientation="horizontal" margin="0 3"> <materialdesign:packicon kind="email" foreground="gray"/> <textblock text="632871194@qq.com" margin="10 0" foreground="gray"/> </stackpanel> </stackpanel> <textblock text="视频" margin="20 0" foreground="gray"/> <stackpanel orientation="horizontal" margin="20 0"> <border width="50" height="50" cornerradius="30" margin="5"> <border.background> <imagebrush imagesource="https://img.dotnet9.com/logo.png"/> </border.background> </border> <border width="50" height="50" cornerradius="30" margin="5"> <border.background> <imagebrush imagesource="https://img.dotnet9.com/logo.png"/> </border.background> </border> <border width="50" height="50" cornerradius="30" margin="5"> <border.background> <imagebrush imagesource="https://img.dotnet9.com/logo.png"/> </border.background> </border> </stackpanel> </stackpanel> </grid> </window>
2.2.3 窗体部分事件处理
后台代码
private void window_mouseleftbuttondown(object sender, mousebuttoneventargs e) { dragmove(); } private void close_click(object sender, routedeventargs e) { this.close(); }
本文略短,原文视频11分钟,看视频学习吧。
3.参考
- 学习视频:c# wpf design ui - 2/3 - profile
- 视频配套源码:chat
除非注明,文章均由 dotnet9 整理发布,欢迎转载。
转载请注明本文地址:https://dotnet9.com/6945.html
欢迎扫描下方二维码关注 dotnet9 的微信公众号,本站会及时推送最新技术文章
上一篇: 陈国的灭亡是张丽华的错吗?张丽华和陈叔宝的结局是什么?
下一篇: 这耳机和锤子一样大
推荐阅读
-
C#用递归算法实现:一列数的规则如下: 1、1、2、3、5、8、13、21、34,求第30位数是多少
-
C# WPF聊天界面(3/3)
-
C# WPF联系人列表(1/3)
-
C# WPF简况(2/3)
-
c#,定义一个函数过程调用,完成计算1!+2!+3!...+n!的值,n为输入的任意整数。
-
C# WPF 时钟动画(2/2)
-
C# 1-2+3-4+5...+m的几种方法
-
C# 求Π Π/4=1-1/3+1/5-1/7+......+1/(2*n-3)-1/(2*n-1); (n=2000)
-
《Dotnet9》系列-开源C# WPF控件库3《HandyControl》强力推荐
-
C# WPF 时钟动画(1/2)