WPF系列教程——(一)仿TIM QQ界面 - 简书
2024-05-07 19:45:42
WPF系列教程——(一)仿TIM QQ界面 - 简书
原文: WPF系列教程——(一)仿TIM QQ界面 - 简书
TIM QQ
我们先来看一下TIM QQ长什么样，整体可以将界面分为三个部分
TIM QQ
1. 准备
- 阅读本文假设你已经有XAML布局的基础，所以只对部分布局进行说明。
- 界面上的图标均来自 Material Design Icons
选择需要的图标后点击View XAML
图片.png会显示WPF的调用代码，直接复制到项目中即可，WPF是支持矢量图显示的。
图片.png
- 本文中的控件使用了开源的MaterialDesignInXamlToolkit，这是一款WPF的Material Design UI库，也是WPF最流行的UI库之一，可以轻松的做出漂亮的界面，到NuGet中搜索即可添加到项目。
NuGet
在
App.xaml文件中，添加以下代码，应用资源样式
<SolidColorBrush x:Key="PrimaryHueMidBrush" Color="#1C93EC" />Color表示所有控件的主题颜色，不添加的话所有控件颜色默认为紫色。
<ResourceDictionary><ResourceDictionary.MergedDictionaries><ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" /><ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" /><ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" /><ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" /></ResourceDictionary.MergedDictionaries><SolidColorBrush x:Key="PrimaryHueMidBrush" Color="#1C93EC" /> </ResourceDictionary>
在需要使用MaterialDesignInXamlToolkit控件的页面引入命名空间
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
- 使用
Grid布局将页面划分为三个区域，感觉Grid是万能布局，可以用它设计出大多数软件90%的界面
<Grid><Grid.RowDefinitions><RowDefinition Height="63*" /><RowDefinition Height="706*" /></Grid.RowDefinitions><Grid Grid.Row="0"></Grid><Grid Grid.Row="1"><Grid.ColumnDefinitions><ColumnDefinition Width="157*" /><ColumnDefinition Width="389*" /></Grid.ColumnDefinitions><Grid Grid.Column="0"></Grid><Grid Grid.Column="1"></Grid></Grid></Grid>
三个区域
2. 圆形头像
在WPF上显示圆形图片很简单，使用Ellipse绘制圆形设置宽和高一致绘制正圆，在内部使用Image笔刷填充图片，本文中的头像显示方式均以此来实现。
<Ellipse Width="50"Height="50"><Ellipse.Fill><ImageBrush ImageSource="Images/github.png" /></Ellipse.Fill>
</Ellipse>
3. 工具栏设计
工具栏的三个不同几何图形，使用Polygon来绘制，再将内部填充不同的颜色，坐标自行测试选择适当位置。
工具栏
第一个多边形
<Polygon Points="0,0 700,0 756,65 0,65"StrokeThickness="1"><Polygon.Fill><SolidColorBrush Color="#1C93EC" /></Polygon.Fill></Polygon>
第二个多边形
<Polygon Points="700,0 780,0 740,50 "StrokeThickness="1"><Polygon.Fill><SolidColorBrush Color="#3E58C9" /></Polygon.Fill></Polygon>
第三个多边形
<Polygon Points="780,0 1100,0 1100,65 723,65 "StrokeThickness="1"><Polygon.Fill><SolidColorBrush Color="#3448A1" /></Polygon.Fill></Polygon>
XAML代码如下，简书没有折叠代码功能啊，这段有点长。
<materialDesign:ColorZone Mode="PrimaryMid"Name="NavBar"Height="65"MouseLeftButtonDown="NavBar_MouseLeftButtonDown"materialDesign:ShadowAssist.ShadowDepth="Depth3"><Grid><!--第三个几何图形--><Polygon Points="780,0 1100,0 1100,65 723,65 "StrokeThickness="1"><Polygon.Fill><SolidColorBrush Color="#3448A1" /></Polygon.Fill></Polygon><!--第二个几何图形--><Polygon Points="700,0 780,0 740,50 "StrokeThickness="1"><Polygon.Fill><SolidColorBrush Color="#3E58C9" /></Polygon.Fill></Polygon><!--第一个几何图形--><Polygon Points="0,0 700,0 756,65 0,65"StrokeThickness="1"><Polygon.Fill><SolidColorBrush Color="#1C93EC" /></Polygon.Fill></Polygon><Ellipse Cursor="Hand"HorizontalAlignment="Left"Margin="10 5"Width="50"Height="50"><Ellipse.Fill><ImageBrush ImageSource="Images/github.png" /></Ellipse.Fill></Ellipse><Grid HorizontalAlignment="Center"Width="200"><Grid.ColumnDefinitions><ColumnDefinition Width="*" /><ColumnDefinition Width="*" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><Grid Grid.Column="0"><Button Width="60"Height="60"Background="{x:Null}"BorderBrush="{x:Null}"materialDesign:ShadowAssist.ShadowDepth="Depth1"Padding="0"><Viewbox Width="30"Height="30"><Canvas Width="24"Height="24"><Path Data="M17,12V3A1,1 0 0,0 16,2H3A1,1 0 0,0 2,3V17L6,13H16A1,1 0 0,0 17,12M21,6H19V15H6V17A1,1 0 0,0 7,18H18L22,22V7A1,1 0 0,0 21,6Z"Fill="White" /></Canvas></Viewbox></Button></Grid><Grid Grid.Column="1"><Button Width="60"Height="60"Background="{x:Null}"BorderBrush="{x:Null}"materialDesign:ShadowAssist.ShadowDepth="Depth1"Padding="0"><Viewbox Width="30"Height="30"><Canvas Width="24"Height="24"><Path Data="M16.5,12A2.5,2.5 0 0,0 19,9.5A2.5,2.5 0 0,0 16.5,7A2.5,2.5 0 0,0 14,9.5A2.5,2.5 0 0,0 16.5,12M9,11A3,3 0 0,0 12,8A3,3 0 0,0 9,5A3,3 0 0,0 6,8A3,3 0 0,0 9,11M16.5,14C14.67,14 11,14.92 11,16.75V19H22V16.75C22,14.92 18.33,14 16.5,14M9,13C6.67,13 2,14.17 2,16.5V19H9V16.75C9,15.9 9.33,14.41 11.37,13.28C10.5,13.1 9.66,13 9,13Z"Fill="White" /></Canvas></Viewbox></Button></Grid><Grid Grid.Column="2"><Button Width="60"Height="60"Background="{x:Null}"BorderBrush="{x:Null}"materialDesign:ShadowAssist.ShadowDepth="Depth1"Padding="0"><Viewbox Width="30"Height="30"><Canvas Width="24"Height="24"><Path Data="M19,16A3,3 0 0,0 22,13A3,3 0 0,0 19,10H17.5V9.5A5.5,5.5 0 0,0 12,4C9.5,4 7.37,5.69 6.71,8H6A4,4 0 0,0 2,12A4,4 0 0,0 6,16V11H18V16H19M19.36,8.04C21.95,8.22 24,10.36 24,13A5,5 0 0,1 19,18H18V22H6V18A6,6 0 0,1 0,12C0,8.91 2.34,6.36 5.35,6.04C6.6,3.64 9.11,2 12,2C15.64,2 18.67,4.6 19.36,8.04M8,13V20H16V13H8M9,18H15V19H9V18M15,17H9V16H15V17M9,14H15V15H9V14Z"Fill="White" /></Canvas></Viewbox></Button></Grid></Grid><Grid HorizontalAlignment="Right"Width="150"><Grid.ColumnDefinitions><ColumnDefinition Width="*" /><ColumnDefinition Width="*" /><ColumnDefinition Width="*" /><ColumnDefinition Width="*" /></Grid.ColumnDefinitions><Grid Grid.Column="0"><Button Height="60"Background="{x:Null}"BorderBrush="{x:Null}"materialDesign:ShadowAssist.ShadowDepth="Depth1"Padding="0"><Viewbox Width="25"Height="25"><Canvas Width="24"Height="24"><Path Data="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"Fill="White" /></Canvas></Viewbox></Button></Grid><Grid Grid.Column="1"><Button Height="60"Background="{x:Null}"BorderBrush="{x:Null}"materialDesign:ShadowAssist.ShadowDepth="Depth1"Padding="0"><Viewbox Width="25"Height="25"><Canvas Width="24"Height="24"><Path Data="M20,14H4V10H20"Fill="White" /></Canvas></Viewbox></Button></Grid><Grid Grid.Column="2"><Button Height="60"Background="{x:Null}"BorderBrush="{x:Null}"materialDesign:ShadowAssist.ShadowDepth="Depth1"Padding="0"><Viewbox Width="25"Height="25"><Canvas Width="24"Height="24"><Path Data="M4,4H20V20H4V4M6,8V18H18V8H6Z"Fill="White" /></Canvas></Viewbox></Button></Grid><Grid Grid.Column="3"><Button Height="60"Background="{x:Null}"BorderBrush="{x:Null}"materialDesign:ShadowAssist.ShadowDepth="Depth1"Padding="0"><Viewbox Width="25"Height="25"><Canvas Width="24"Height="24"><Path Data="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"Fill="White" /></Canvas></Viewbox></Button></Grid></Grid></Grid></materialDesign:ColorZone>
4. 好友列表设计
好友列表使用了ListView，效果图中的好友都是静态的数据，列表绑定会在下一节讲到。
好友列表
<Grid Background="#FAFAFA"Grid.Column="0"><ListView ScrollViewer.HorizontalScrollBarVisibility="Disabled"Cursor="Hand"></ListView><materialDesign:PopupBox Style="{StaticResource MaterialDesignMultiFloatingActionPopupBox}"PlacementMode="TopAndAlignCentres"ToolTipService.Placement="Left"ToolTip="TIM QQ"HorizontalAlignment="Right"VerticalAlignment="Bottom"Margin="20"></materialDesign:PopupBox></Grid>
ListView中Item代码如下
<ListViewItem Height="60"Padding="0"><StackPanel Orientation="Horizontal"Margin="10 0"><Ellipse Cursor="Hand"Width="50"Height="50"><Ellipse.Fill><ImageBrush ImageSource="Images/head2.jpg" /></Ellipse.Fill></Ellipse><StackPanel Orientation="Vertical"VerticalAlignment="Center"Margin="5 0"><TextBlock FontSize="15"Foreground="Black"Text="糖宝" /><TextBlock Margin="0 2 0 0"FontSize="12"Text="Hello world" /></StackPanel></StackPanel></ListViewItem>
5. 名片设计
名片页面是不是和TIM QQ的几乎一模一样~
名片
XAML代码如下
<Grid><Grid.RowDefinitions><RowDefinition Height="*" /><RowDefinition Height="*" /></Grid.RowDefinitions><Grid Grid.Row="0"><Image Stretch="UniformToFill" Source="Images/head1.jpg" /></Grid><Grid Grid.Row="1"><Button Style="{StaticResource MaterialDesignFloatingActionButton}"HorizontalAlignment="Right"VerticalAlignment="Top"Margin="0 -30 5 0"BorderBrush="{x:Null}"ToolTip="修改资料"><materialDesign:PackIcon Kind="Pencil"Height="24"Width="24" /></Button><StackPanel Orientation="Vertical"><TextBlock Text="Go to hell!"HorizontalAlignment="Center"FontSize="35"Margin="0 20 0 0" /><StackPanel Orientation="Horizontal"Margin="80 5 0 0 "><TextBlock Text="账号 "Foreground="#B7B7B7" /><TextBlock Text="vaemc520@qq.com" /></StackPanel><StackPanel Orientation="Horizontal"Margin="80 5 0 0 "><TextBlock Text="昵称 "Foreground="#B7B7B7" /><TextBlock Text="Go to hell!" /></StackPanel><StackPanel Orientation="Horizontal"Margin="80 5 0 0 "><TextBlock Text="手机 "Foreground="#B7B7B7" /><TextBlock Text="183XXXXXXXX" /></StackPanel><StackPanel Orientation="Horizontal"Margin="80 5 0 0 "><TextBlock Text="邮箱 "Foreground="#B7B7B7" /><TextBlock Text="vaemc520@qq.com" /></StackPanel><StackPanel Orientation="Horizontal"Margin="80 5 0 0 "><TextBlock Text="职业 "Foreground="#B7B7B7" /><TextBlock Text="计算机/互联网/通信" /></StackPanel><StackPanel Orientation="Horizontal"Margin="80 5 0 0 "><TextBlock Text="空间 "Foreground="#B7B7B7" /><TextBlock Text="Go to hell! 的空间" /></StackPanel></StackPanel></Grid>
6. 最终效果
最终效果
欢迎Star https://github.com/vaemc/WpfTimQQ
7. 总结
接触到了WPF以后感觉用WinForm托控件真的好LOW,并且用WPF可以轻松的设计出好看的界面，以前经常写安卓也发现这俩玩意布局竟如此的雷同，然后就慢慢的过度到了WPF。
下一节将会以此项目为基础来讲诉WPF MVVM框架的实现，欢迎关注~
posted on 2019-04-01 13:19 NET未来之路 阅读( ...) 评论( ...) 编辑 收藏
转载于:https://www.cnblogs.com/lonelyxmas/p/10635812.html
WPF系列教程——(一)仿TIM QQ界面 - 简书相关推荐
- android仿tim主界面,WPF系列教程——(一)仿TIM QQ界面
TIM QQ 我们先来看一下TIM QQ长什么样,整体可以将界面分为三个部分 TIM QQ 1. 准备 阅读本文假设你已经有XAML布局的基础,所以只对部分布局进行说明. 界面上的图标均来自 Mate ...
- 【全网最全的博客美化系列教程】02.添加QQ交谈链接
全网最全的博客美化系列教程相关文章目录 [全网最全的博客美化系列教程]01.添加Github项目链接 [全网最全的博客美化系列教程]02.添加QQ交谈链接 [全网最全的博客美化系列教程]03.给博客添 ...
- Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例
vue3-webchat 基于vue3.0.5开发的仿微信|QQ界面桌面端聊天实例. 运用vue3.x全家桶技术+element-plus+v3layer+v3scroll搭建的仿微信/QQ界面网页聊 ...
- Vue3 PC桌面端聊天室｜vue3.0+elementPlus仿微信/QQ界面
vue3-webchat 基于vue3.0.5开发的仿微信|QQ界面桌面端聊天实例. 运用vue3.x全家桶技术+element-plus+v3layer+v3scroll搭建的仿微信/QQ界面网页聊 ...
- Android实现沉浸式状态栏（透明状态栏）（QQ和简书样式）
本文内容大多参考网络上的Android实现沉浸式状态栏教程,由于看了太多类似文章,固在此不再一一列举出处.本文仅为我自己梳理思路和供各位看到本文的朋友参考(百度:Android沉浸式状态栏,第一页内容 ...
- Lance老师UI系列教程第三课-QQ登录注册界面的实现（android-2012最新版）
分类: android UI教程2012-08-06 22:37 3731人阅读 评论(6) 收藏 举报 uiandroidqqlayoutbutton UI系列教程第三课:腾讯登录注册界面的实现 今 ...
- QT 简单仿写QQ界面
因为要写一个跨平台内网传输工具DKD,为了最大程度的代码复用,所以考虑使用QT,对QT不熟悉,10天的摸索,终于画出简易的仿QQ界面,开发环境为:qt creator+gcc,效果如下: 主窗口的区域 ...
- android仿tim主界面,简单仿腾讯TIM界面
简单仿腾讯TIM界面 作者:佚名 来源:爱好者 时间:2017-03-22 需求 因为最近回归原生评论,所以评论头像如果单纯的引用gravatar头像,会有一部分low bee们头像会变成gravat ...
- WPF系列教程（十二）：控件类——前景背景、字体Background、Foreground、FontFamily、FontSize
控件都包含背景画刷和前景画刷属性. 部分控件包含字体属性. 鼠标光标的设置. 示例项目源码 为控件设置背景与前景 下面这个窗体 <Window x:Class="Control.Mai ...
最新文章
- 几个.Net开源的CMS系统 (转)
- 巧用Windows server 2008密码重置盘
- 虚拟机屏幕界面自适应调整
- python 避免多重条件嵌套_如何避免多层嵌套函数
- 无监督分类：聚类分析（K均值）
- 条款46：需要类型转换的时候请为模板定义非成员函数
- 百度大脑公开课！快速定制高精度计算机视觉模型
- 让IT人早点下班？高效的vPro平台帮你忙
- ORACLE 007 --5 group by 的用法及增强、高级子查询
- python+HEG对mod021km数据进行几何校正、辐射定标
- ugp和千幻魔镜买哪个好_美的空调和格力空调哪个好？这两个牌子您会买哪个？...
- html position属性作用,CSS学习之浅谈position属性
- jQuery .tmpl(), .template()学习资料小结
- 【光学】基于Matlab模拟衍射光栅实验
- PHP字符串函数strrchr(查找指定字符在字符串中的最后一次出现)
- 免费的21个UI界面设计工具、资源及网站
- hyperledger cello部署
- 今天想起论语十则，记下来勉励自己
- Python基础笔记_Day12_Python元类、type动态创建类、Python动态创建方法、Python运算符、Python发邮件、短信
- windows64位配置安装python2.7