1. 效果展示
先來直接欣賞效果：
2. 準備
創建一個WPF工程，比如站長使用 .NET 7 創建名為 Dashboard3 的WPF專案，添加一些圖片資源，專案目錄如下：
2.1 圖片資源
可在網站 iconfont 下載 關閉、最小化 圖示，用于視窗右上角顯示：
有看到美女圖片沒？在百度圖片或者谷歌圖片下載，比如 泰勒·斯威夫特 ，用于界面展示一個人的頭像：
2.2 字體圖示Nuget包：FontAwesome.WPF，該包提供一些圖示字體：
<PackageReference Include="FontAwesome.WPF" Version="4.7.0.9" />
編譯時，此包有如下提示：
已使用“.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. 簡單介紹
重點提及界面幾個地方：
3.1 水平選單
如上圖，水平選單是幾個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="https://www.cnblogs.com/Dotnet9-com/p/0 0 25 0" />
<Setter Property="FontSize" Value="https://www.cnblogs.com/Dotnet9-com/p/16" />
<Setter Property="Opacity" Value="https://www.cnblogs.com/Dotnet9-com/p/0.7" />
<Setter Property="Foreground" Value="https://www.cnblogs.com/Dotnet9-com/p/#FFFFFF" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="https://www.cnblogs.com/Dotnet9-com/p/True">
<Setter Property="Opacity" Value="https://www.cnblogs.com/Dotnet9-com/p/1" />
</Trigger>
</Style.Triggers>
</Style>
3.2 豎直選單
如上圖，豎直選單是幾個按鈕，按鈕內容填充了字體圖示和文字，設定一些效果樣式：
<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="https://www.cnblogs.com/Dotnet9-com/p/0 7 0 0" />
<Setter Property="FontSize" Value="https://www.cnblogs.com/Dotnet9-com/p/14" />
<Setter Property="Width" Value="https://www.cnblogs.com/Dotnet9-com/p/100" />
<Setter Property="Height" Value="https://www.cnblogs.com/Dotnet9-com/p/90" />
<Setter Property="Background" Value="https://www.cnblogs.com/Dotnet9-com/p/Transparent" />
<Setter Property="Foreground" Value="https://www.cnblogs.com/Dotnet9-com/p/#a9a9a9" />
<Setter Property="FocusVisualStyle" Value="https://www.cnblogs.com/Dotnet9-com/p/{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="https://www.cnblogs.com/Dotnet9-com/p/True">
<Setter Property="Background" Value="https://www.cnblogs.com/Dotnet9-com/p/#AC0F0F" />
<Setter Property="Foreground" Value="https://www.cnblogs.com/Dotnet9-com/p/#FFFFFF" />
</Trigger>
<Trigger Property="IsMouseCaptured" Value="https://www.cnblogs.com/Dotnet9-com/p/True">
<Setter Property="Background" Value="https://www.cnblogs.com/Dotnet9-com/p/#921C1B" />
<Setter Property="Foreground" Value="https://www.cnblogs.com/Dotnet9-com/p/#FFFFFF" />
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="menuButtonIcon" TargetType="fa:ImageAwesome">
<Setter Property="Foreground" Value="https://www.cnblogs.com/Dotnet9-com/p/{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}" />
<Setter Property="Width" Value="https://www.cnblogs.com/Dotnet9-com/p/20" />
<Setter Property="Height" Value="https://www.cnblogs.com/Dotnet9-com/p/20" />
</Style>
<Style x:Key="menuButtonText" TargetType="TextBlock">
<Setter Property="Margin" Value="https://www.cnblogs.com/Dotnet9-com/p/0 7 0 0" />
</Style>
3.3 部分圖片和字體圖示
這個就不多說了，上面的代碼也有字體圖示的使用，
4. 結尾
這個面板的效果個人感覺很漂亮，由基本的TextBlock、Button、字體圖示、圖片等組合、排版布局就能做到很多效果，有興趣可以看看作者視頻（非常推薦），以及下方給出的原始碼倉庫鏈接：
參考：
- 油管視頻作者：C# WPF UI Academy
- 油管視頻：C# WPF UI | How to Design Beautiful Social Media Info Dashboard in WPF
- 參考代碼：WPF-Social-Media-Info-Dashboard
本文代碼：Dashboard3
時間如流水，只能流去不流回，轉載請註明出處，本文鏈接：https://www.uj5u.com/net/473364.html
標籤：WPF
上一篇：WPF|分享一個登錄界面設計