WPF|如何在 WPF 中設計漂亮的社交媒體資訊儀表板

1. 效果展示

先直接欣賞效果：

2. 準備

建立一個 WPF 專案，例如站長使用 .NET 7 建立名為 Dashboard3 的 WPF 專案，加入一些圖片資源，專案目錄如下：

2.1 圖片資源

可在網站 iconfont 下載「關閉」、「最小化」圖示，用於視窗右上角顯示：

有看到美女圖片嗎？在百度圖片或 Google 圖片下載（如 Taylor Swift），用於介面展示個人頭像：

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 水平選單

如上圖，水平選單是幾個 TextBlock 標籤，預設設定字型透明度為 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 垂直選單

如上圖，垂直選單是幾個按鈕，按鈕內容填充了字型圖示與文字，並設定一些效果樣式：

<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. 結尾

這個面板的效果個人感覺很漂亮，由基本的 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