WPF|How to Design a Beautiful Social Media Information Dashboard in WPF

1. Effect Preview

Let's directly appreciate the effect:

2. Preparation

Create a WPF project, for example, using .NET 7 to create a WPF project named Dashboard3, then add some image resources. The project directory is as follows:

2.1 Image Resources

You can download the close and minimize icons from the iconfont website for display in the top-right corner of the window:

Did you notice the picture of a beautiful woman? Download it from Baidu Images or Google Images, e.g., Taylor Swift, to display a person's avatar on the interface:

2.2 Font Icon NuGet Package: FontAwesome.WPF

This package provides some icon fonts:

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

When compiling, this package shows the following warning:

Package 'FontAwesome.WPF 4.7.0.9' was restored using '.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' instead of the project target framework 'net7.0-windows7.0'. This package may not be fully compatible with your project.

Is there any recommended font icon library for .NET Core versions? Feel free to leave a comment below; it doesn't affect usage here.

3. Brief Introduction

Focus on several parts of the interface:

3.1 Horizontal Menu

As shown above, the horizontal menu consists of several TextBlock labels. By default, the font opacity is set to 0.7, which becomes 1 on mouse hover:

<StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
    <TextBlock Text="Analysis" Opacity="1" Style="{StaticResource menuTitle}" />
    <TextBlock Text="Leaderboard" Style="{StaticResource menuTitle}" />
    <TextBlock Text="Live" Style="{StaticResource menuTitle}" />
    <TextBlock Text="Trends" Style="{StaticResource menuTitle}" />
    <TextBlock Text="Favorites" 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 Vertical Menu

As shown above, the vertical menu consists of several buttons. Each button content is filled with a font icon and text, with some effect styles applied:

<Button Style="{StaticResource menuButton}" Margin="0 10 0 0" Background="#AC0F0F" Foreground="#FFFFFF">
    <StackPanel>
        <fa:ImageAwesome Icon="Home" Style="{StaticResource menuButtonIcon}" />
        <TextBlock Text="Dashboard" 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 Some Images and Font Icons

No need to elaborate further—the code above already demonstrates the use of font icons.

4. Conclusion

The effect of this panel is personally considered very beautiful. It is composed of basic TextBlock, Button, font icons, images, etc., and with proper layout arrangement, many effects can be achieved. If interested, feel free to watch the author's video (highly recommended) and check the source code repository link provided below:

References:

• YouTube Channel Author: C# WPF UI Academy
• YouTube Video: C# WPF UI | How to Design Beautiful Social Media Info Dashboard in WPF
• Reference Code: WPF-Social-Media-Info-Dashboard

Code for this article: Dashboard3