WPF|WPFで美しいソーシャルメディア情報ダッシュボードをデザインする方法

1. 効果表示

まずは直接効果をご覧ください：

2. 準備

WPF プロジェクトを作成します。例えば、当サイト管理人は .NET 7 を使用して Dashboard3 という WPF プロジェクトを作成し、いくつかの画像リソースを追加しました。プロジェクトディレクトリは以下の通りです：

2.1 画像リソース

iconfont サイトから 閉じる、最小化 のアイコンをダウンロードできます。これらはウィンドウ右上隅に表示するために使用します：

美女の画像はご覧になりましたか？百度画像や Google 画像からダウンロードしてください。例えば テイラー・スウィフト の画像を、人物のアバター表示として使用します：

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