企业门户网站建设与发展,视频网站程序,西部中大建设集团网站,阿里云能做网站么1. 效果展示先来直接欣赏效果#xff1a;2. 准备创建一个WPF工程#xff0c;比如站长使用 .NET 7[1] 创建名为 Dashboard3 的WPF项目#xff0c;添加一些图片资源#xff0c;项目目录如下#xff1a;2.1 图片资源可在网站 iconfont[2] 下载 关闭、最小化 图标#xff0c;… 1. 效果展示先来直接欣赏效果2. 准备创建一个WPF工程比如站长使用 .NET 7[1] 创建名为 Dashboard3 的WPF项目添加一些图片资源项目目录如下2.1 图片资源可在网站 iconfont[2] 下载 关闭、最小化 图标用于窗口右上角显示有看到美女图片没在百度图片或者谷歌图片下载比如 泰勒·斯威夫特 用于界面展示一个人的头像2.2 字体图标Nuget包FontAwesome.WPF该包提供一些图标字体PackageReference IncludeFontAwesome.WPF Version4.7.0.9 /编译时此包有如下提示已使用“.NETFramework,Versionv4.6.1, .NETFramework,Versionv4.6.2, .NETFramework,Versionv4.7, .NETFramework,Versionv4.7.1, .NETFramework,Versionv4.7.2, .NETFramework,Versionv4.8”而不是项目目标框架“net7.0-windows7.0”还原包“FontAwesome.WPF 4.7.0.9”。此包可能与项目不完全兼容。有.NET Core版本的字体图标库推荐吗可在下面留言谢谢这里不影响使用。3. 简单介绍重点提及界面几个地方3.1 水平菜单如上图水平菜单是几个TextBlox标签默认设置了字体的透明度为0.7鼠标悬浮时设置为1StackPanel OrientationHorizontal HorizontalAlignmentLeftTextBlock Text分析 Opacity1 Style{StaticResource menuTitle} /TextBlock Text排行榜 Style{StaticResource menuTitle} /TextBlock Text实时 Style{StaticResource menuTitle} /TextBlock Text趋势 Style{StaticResource menuTitle} /TextBlock Text最喜欢的 Style{StaticResource menuTitle} /
/StackPanelStyle x:KeymenuTitle TargetTypeTextBlockSetter PropertyMargin Value0 0 25 0 /Setter PropertyFontSize Value16 /Setter PropertyOpacity Value0.7 /Setter PropertyForeground Value#FFFFFF /Style.TriggersTrigger PropertyIsMouseOver ValueTrueSetter PropertyOpacity Value1 //Trigger/Style.Triggers
/Style3.2 竖直菜单如上图竖直菜单是几个按钮按钮内容填充了字体图标和文字设置一些效果样式Button Style{StaticResource menuButton} Margin0 10 0 0 Background#AC0F0F Foreground#FFFFFFStackPanelfa:ImageAwesome IconHome Style{StaticResource menuButtonIcon} /TextBlock Text仪表盘 Style{StaticResource menuButtonText} //StackPanel
/ButtonStyle x:KeymenuButton TargetType{x:Type Button}Setter PropertyMargin Value0 7 0 0 /Setter PropertyFontSize Value14 /Setter PropertyWidth Value100 /Setter PropertyHeight Value90 /Setter PropertyBackground ValueTransparent /Setter PropertyForeground Value#a9a9a9 /Setter PropertyFocusVisualStyle Value{x:Null} /Setter PropertyTemplateSetter.ValueControlTemplate TargetType{x:Type Button}Border Background{TemplateBinding Background} CornerRadius15 Padding15ContentPresenter HorizontalAlignmentCenter VerticalAlignmentCenter //Border/ControlTemplate/Setter.Value/SetterStyle.TriggersTrigger PropertyIsMouseOver ValueTrueSetter PropertyBackground Value#AC0F0F /Setter PropertyForeground Value#FFFFFF //TriggerTrigger PropertyIsMouseCaptured ValueTrueSetter PropertyBackground Value#921C1B /Setter PropertyForeground Value#FFFFFF //Trigger/Style.Triggers
/StyleStyle x:KeymenuButtonIcon TargetTypefa:ImageAwesomeSetter PropertyForeground Value{Binding PathForeground, RelativeSource{RelativeSource FindAncestor, AncestorType{x:Type Button}}} /Setter PropertyWidth Value20 /Setter PropertyHeight Value20 /
/StyleStyle x:KeymenuButtonText TargetTypeTextBlockSetter PropertyMargin Value0 7 0 0 /
/Style3.3 部分图片和字体图标这个就不多说了上面的代码也有字体图标的使用。4. 结尾这个面板的效果个人感觉很漂亮由基本的TextBlock、Button、字体图标、图片等组合、排版布局就能做到很多效果有兴趣可以看看作者视频非常推荐以及下方给出的源码仓库链接参考油管视频作者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?vZqEj7BcXE9M[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
