WPF|如何在 WPF 中设计漂亮的社交媒体信息仪表板

1. 效果展示

先来直接欣赏效果:

a6fd40c19ce793c367bace28b0067a71.gif

2. 准备

创建一个WPF工程,比如站长使用 .NET 7[1] 创建名为 Dashboard3 的WPF项目,添加一些图片资源,项目目录如下:

9ef115b47c342151413e310cec8449bb.png

2.1 图片资源

可在网站 iconfont[2] 下载 关闭、最小化 图标,用于窗口右上角显示:

8a81c506cccc38e5d8095d4c237f0d23.gif

有看到美女图片没?在百度图片或者谷歌图片下载,比如 泰勒·斯威夫特 ,用于界面展示一个人的头像:

672861b2f0d121a9304dec0ad2474e46.gif

2.2 字体图标Nuget包:FontAwesome.WPF,该包提供一些图标字体:

<PackageReference Include="FontAwesome.WPF" Version="4.7.0.9" />
bbc159b7f3ce23e9263c9ab45762ea7e.gif

编译时,此包有如下提示:

已使用“.NETFramework,Version=v4.6.1, .NETFramework,Version=v4.6.2, .NETFramework,Version=v4.7, .NETFramework,Version=v4.7.1, .NETFramework,Version=v4.7.2, .NETFramework,Version=v4.8”而不是项目目标框架“net7.0-windows7.0”还原包“FontAwesome.WPF 4.7.0.9”。此包可能与项目不完全兼容。

有.NET Core版本的字体图标库推荐吗?可在下面留言,谢谢,这里不影响使用。

3. 简单介绍

重点提及界面几个地方:

8cefe60d2c66b0b486def87559d91f93.png

3.1 水平菜单

4b94fd9414493363467faa06201a7331.gif

如上图,水平菜单是几个TextBlox标签,默认设置了字体的透明度为0.7,鼠标悬浮时设置为1:

<StackPanel Orientation="Horizontal" HorizontalAlignment="Left"><TextBlock Text="分析" Opacity="1" Style="{StaticResource menuTitle}" /><TextBlock Text="排行榜" Style="{StaticResource menuTitle}" /><TextBlock Text="实时" Style="{StaticResource menuTitle}" /><TextBlock Text="趋势" Style="{StaticResource menuTitle}" /><TextBlock Text="最喜欢的" Style="{StaticResource menuTitle}" />
</StackPanel>
<Style x:Key="menuTitle" TargetType="TextBlock"><Setter Property="Margin" Value="0 0 25 0" /><Setter Property="FontSize" Value="16" /><Setter Property="Opacity" Value="0.7" /><Setter Property="Foreground" Value="#FFFFFF" /><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Opacity" Value="1" /></Trigger></Style.Triggers>
</Style>

3.2 竖直菜单

c63db8c8f5e1406dee3b6f69fc8ae6f1.gif

如上图,竖直菜单是几个按钮,按钮内容填充了字体图标和文字,设置一些效果样式:

<Button Style="{StaticResource menuButton}" Margin="0 10 0 0" Background="#AC0F0F" Foreground="#FFFFFF"><StackPanel><fa:ImageAwesome Icon="Home" Style="{StaticResource menuButtonIcon}" /><TextBlock Text="仪表盘" Style="{StaticResource menuButtonText}" /></StackPanel>
</Button>
<Style x:Key="menuButton" TargetType="{x:Type Button}"><Setter Property="Margin" Value="0 7 0 0" /><Setter Property="FontSize" Value="14" /><Setter Property="Width" Value="100" /><Setter Property="Height" Value="90" /><Setter Property="Background" Value="Transparent" /><Setter Property="Foreground" Value="#a9a9a9" /><Setter Property="FocusVisualStyle" Value="{x:Null}" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Border Background="{TemplateBinding Background}" CornerRadius="15" Padding="15"><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" /></Border></ControlTemplate></Setter.Value></Setter><Style.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter Property="Background" Value="#AC0F0F" /><Setter Property="Foreground" Value="#FFFFFF" /></Trigger><Trigger Property="IsMouseCaptured" Value="True"><Setter Property="Background" Value="#921C1B" /><Setter Property="Foreground" Value="#FFFFFF" /></Trigger></Style.Triggers>
</Style><Style x:Key="menuButtonIcon" TargetType="fa:ImageAwesome"><Setter Property="Foreground" Value="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}" /><Setter Property="Width" Value="20" /><Setter Property="Height" Value="20" />
</Style><Style x:Key="menuButtonText" TargetType="TextBlock"><Setter Property="Margin" Value="0 7 0 0" />
</Style>

3.3 部分图片和字体图标

这个就不多说了,上面的代码也有字体图标的使用。

4. 结尾

这个面板的效果个人感觉很漂亮,由基本的TextBlockButton、字体图标、图片等组合、排版布局就能做到很多效果,有兴趣可以看看作者视频(非常推荐),以及下方给出的源码仓库链接:

参考:

  • 油管视频作者:C# WPF UI Academy[3]

  • 油管视频:C# WPF UI | How to Design Beautiful Social Media Info Dashboard in WPF[4]

  • 参考代码:WPF-Social-Media-Info-Dashboard[5]

本文代码:Dashboard3[6]

参考资料

[1]

.NET 7: https://dotnet.microsoft.com/zh-cn/

[2]

iconfont: https://www.iconfont.cn/

[3]

C# WPF UI Academy: https://www.youtube.com/channel/UCtVawNW7C2t6AX1vex6a_vw

[4]

C# WPF UI | How to Design Beautiful Social Media Info Dashboard in WPF: https://www.youtube.com/watch?v=ZqEj7BcXE9M

[5]

WPF-Social-Media-Info-Dashboard: https://github.com/sajjad-z/WPF-Social-Media-Info-Dashboard

[6]

Dashboard3: https://github.com/dotnet9/TerminalMACS.ManagerForWPF/tree/master/src/WPFDesignDemos/Dashboard3

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/287574.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CentOS 设置服务开机启动的方法

为什么80%的码农都做不了架构师&#xff1f;>>> CentOS设置服务开机启动的两种方法 1、利用 chkconfig 来配置启动级别 在CentOS或者RedHat其他系统下&#xff0c;如果是后面安装的服务&#xff0c;如httpd、mysqld、postfix等&#xff0c;安装后系统默认不会自动启…

【ArcGIS风暴】水文分析模块实验:山脊线和山谷线提取

实验平台:ArcGIS 9.3实验目的:学习和掌握山脊线和山谷线提取的原理及方法实验要求:利用ArcGIS水文分析模块提取样区的山脊线和山谷线实验数据:Ex1实验步骤:1.正负地形的提取 (1)打开Arcmap,加载数据EX1,如图 (2)平滑处理(均值滤波)。加载Spatial Analyst模块,单击…

[python opencv 计算机视觉零基础到实战] 五、对象追踪

一、学习目标 了解为什么色彩空间的转换那么重要了解opencv中进行对象跟踪的方法 目录 [python opencv 计算机视觉零基础到实战] 一、opencv的helloworld [【python opencv 计算机视觉零基础到实战】二、 opencv文件格式与摄像头读取] 一、opencv的helloworld [[python op…

【ArcGIS风暴】在ArcGIS中实现将一个圆16等分

本文实现在ArcGIS中画一个圆,然后将其16等分。 步骤一:生成圆(多边形图层) (1)创建一个点图层(图名Center),如果需要精确定位该点,建议通过输入坐标点的方式来创建,这一步比较简单,不再详述; (2)利用Buffer命令创建缓冲区(图名Circle_2km),因为要处理的对象…

[python opencv 计算机视觉零基础到实战] 六、图像运算

一、学习目标 了解opencv中图像运算的方法了解opencv中图像运算的运用 如有错误欢迎指出~ 二、了解OpenCV中图像运算的运用 目录 [python opencv 计算机视觉零基础到实战] 一、opencv的helloworld [【python opencv 计算机视觉零基础到实战】二、 opencv文件格式与摄像头…

【ArcGIS风暴】实验:公路建设成本的计算

实验平台:ArcGIS 9.3实验目的:学习和掌握公路建设成本的计算方法实验要求:熟练掌握如何生成通行成本层、计算成本距离,并学会计算最佳路径,且对成本距离与直线距离进行比较。实验数据:ArcEx7实验步骤:生成通行成本层1.打开Arcmap,加载数据ArcEX7,如图 2.执行spatial …

合并Spark社区代码的正确姿势

原创文章&#xff0c;转载请保留出处 最近刚刚忙完Spark 2.2.0的性能测试及Bug修复&#xff0c;社区又要发布2.1.2了&#xff0c;国庆期间刚好有空&#xff0c;过了一遍2.1.2的相关JIRA&#xff0c;发现有不少重要修复2.2.0也能用上&#xff0c;接下来需要将有用的PR合到我们内…

.NET 中 GC 的模式与风格

垃圾回收&#xff08;GC&#xff09;是托管语言必备的技术之一。GC 的性能是影响托管语言性能的关键。我们的 .NET 既能写桌面程序 (WINFROM , WPF) 又能写 web 程序 (ASP.NET CORE)&#xff0c;甚至还能写移动端程序。。。不同使用场景的程序对 GC 的风格也有不同的要求&#…

[python opencv 计算机视觉零基础到实战] 七、逻辑运算与应用

一、学习目标 了解opencv中图像的逻辑运算了解opencv中逻辑运算的应用 目录 [python opencv 计算机视觉零基础到实战] 一、opencv的helloworld [【python opencv 计算机视觉零基础到实战】二、 opencv文件格式与摄像头读取] 一、opencv的helloworld [[python opencv 计算机…

【ArcGIS风暴】数字化实验:数据采集与编辑完整操作流程

一.实验平台:ArcGIS 9.3 二.实验目的:对甘肃省的十四个地级市进行图像配准、数据采集。 三.实验要求:掌握地理数据采集方法,图像配准及坐标投影,选择主要的点、线、面进行投影。 四.实验数据:甘肃省统计数据,甘肃省行政区划图。 (一).影像配准 第一步:加载…

loadrunner java 参数化_LoadRunner 参数化详解

LoadRunner&#xff0c;是一种预测系统行为和性能的负载测试工具。通过以模拟上千万用户实施并发负载及实时性能监测的方式来确认和查找问题&#xff0c;LoadRunner能够对整个企业架构进行测试。通过使用 LoadRunner&#xff0c;企业能最大限度地缩短测试时间&#xff0c;优化性…

Android之实现RTL的ViewPager

1 问题 如何实现RTL的ViewPager,就是滑动方向和我们之前滑动的方向相反,比如一般,我们用ViewPager滑动4个图片,依次顺序是 1 2 3 4 ,我们在页面1的时候,我们一般都是习惯向左滑动到2,现在需要实现手指向右滑动到2. 2 解决办法 1)我们可以使用ViewPager2,这个是可以支…

Why Apache Spark is a Crossover Hit for Data Scientists [FWD]

Spark is a compelling multi-purpose platform for use cases that span investigative, as well as operational, analytics. Data science is a broad church. I am a data scientist — or so I’ve been told — but what I do is actually quite different from what oth…

Blazor University (21)使用 RenderFragments 模板化组件 —— 传递占位符

原文链接&#xff1a;https://blazor-university.com/templating-components-with-renderfragements/passing-placeholders-to-renderfragments/将占位符传递给 RenderFragments源代码[1]说明&#xff1a;此页面的灵感来自用户 ℳisterℳagoo 的 Twitter 帖子。首先&#xff0c…

物联网(车联网)平台架构方案

技术支持QQ&#xff1a;787728951、车载终端网关采用mina/nettyspring架构&#xff0c;独立于其他应用&#xff0c;主要负责维护接入终端的tcp链接、上行以及下行消息的解码、编码、流量控制&#xff0c;黑白名单等安全控制&#xff0c;网关同时支持交通部JT/T808-2011、JT/T80…

[python opencv 计算机视觉零基础到实战] 八、ROI泛洪填充

一、学习目标 了解什么是ROI了解floodFill的使用方法 如有错误欢迎指出~ 目录 [python opencv 计算机视觉零基础到实战] 一、opencv的helloworld [【python opencv 计算机视觉零基础到实战】二、 opencv文件格式与摄像头读取] 一、opencv的helloworld [[python opencv 计…

解决冲突

人生不如意之事十之八九&#xff0c;合并分支往往也不是一帆风顺的。 准备新的feature1分支&#xff0c;继续我们的新分支开发&#xff1a; $ git checkout -b feature1 Switched to a new branch feature1修改readme.txt最后一行&#xff0c;改为&#xff1a; Creating a new …

HQL入门学习

2019独角兽企业重金招聘Python工程师标准>>> package myHibernate; /** 测试简单的HQL语句* 2010年4月9日 23:36:54* */ import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date; import java.uti…

Oracle精简客户端配置

2019独角兽企业重金招聘Python工程师标准>>> 由于Oracle client体积很大。而且安装后&#xff0c;基本上就用2个功能&#xff1a;TNS配置服务名和SQL*Plus。下面是一种小巧、快捷的Oracle客户端配置方法&#xff1a; 1.下载Instant Client 下载地址&#xff1a; htt…

WinUI迁移到.NET MAUI个人体验

迁移的初衷本人平时是做.net相关的工作&#xff0c;对于.net技术栈也有一些了解&#xff0c;自从新的.net能够跨平台之后&#xff0c;之前也有跨平台的ui框架Xamarin&#xff0c;现在微软推出了.NET MAUI这个说是 统一了开发体验&#xff0c;而且都RC版本了&#xff0c;所以本人…