WPF|如何在 WPF 中設計漂亮的社交媒體信息儀錶板

来源:https://www.cnblogs.com/Dotnet9-com/archive/2022/05/13/16265577.html
-Advertisement-
Play Games

1. 效果展示 先來直接欣賞效果: 2. 準備 創建一個WPF工程,比如站長使用 .NET 7 創建名為 Dashboard3 的WPF項目,添加一些圖片資源,項目目錄如下: 2.1 圖片資源 可在網站 iconfont 下載 關閉、最小化 圖標,用於視窗右上角顯示: 有看到美女圖片沒?在百度圖片或 ...


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

這個面板的效果個人感覺很漂亮,由基本的TextBlockButton、字體圖標、圖片等組合、排版佈局就能做到很多效果,有興趣可以看看作者視頻(非常推薦),以及下方給出的源碼倉庫鏈接:

參考:

本文代碼:Dashboard3


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 問題 Mybatis四大對象的創建順序? Mybatis插件的執行順序? 工程創建 環境:Mybatis(3.5.9) mybatis-demo,參考官方文檔 簡單示例 這裡只放出main方法的示例,其餘類請看demo工程。 public static void main(String[] args ...
  • day1 Spring IOC 和 AOP 為內核 IOC inverse of control 控制反轉 AOP aspect oriented programing 面向切麵編程 展現層 WEB SpringMVC 持久層 DAO Spring JDBCTemplate 業務層 SERIVICE ...
  • 背景 在測試環境上遇到一個詭異的問題,部分業務邏輯會記錄用戶ID到資料庫,但記錄的數據會串,比如當前用戶的操作記錄會被其他用戶覆蓋, 而且這個現象是每次重啟後一小段時間內就正常 問題 線上程池內部使用了InheritableThreadLocal獲取用戶信息由於沒有及時remove,線程復用後,拿到 ...
  • “整篇文章較長,乾貨很多!建議收藏後,分章節閱讀。” 一、設計方案 整體設計方案思維導圖: 整篇文章,也將按照這個結構來講解。 若有重點關註部分,可點擊章節目錄直接跳轉! 二、項目背景 針對TOP250排行榜的數據,開發一套可視化數據大屏系統,展示各維度數據分析結果。 TOP250排行榜 三、電影爬 ...
  • OAuth2客戶端的配置參數非常多,雖然Id Server通過控制台可視化解決了創建OAuth2客戶端的問題。但是如何進一步降低OAuth2的使用難度,把創建的OAuth2客戶端轉化為配置成為了剛需,從技術角度上感覺也並不是很難實現。 我們先來看看效果,點擊配置生成按鈕即可直接生成Spring Se ...
  • 轉載:https://www.bilibili.com/video/BV1VQ4y1P7Fq?spm_id_from=333.1007.top_right_bar_window_history.content.click 概念 Stream是Java8 API的新成員,它允許以聲明性方式處理數據集合 ...
  • 嗨害嗨,作業來嘍 背包問題 01背包和完全背包問題都是一個背景下的:我有一個容量為M的背包,現在地上有N個物品,我跟個小偷似的眼裡只有i個物品的價值vi和重量wi,現在我要做的就是為了偷的東西更值錢拿走一些東西,使它們的價值是所有方案里最大的 01背包 背景如上,01背包就是我眼前的這些東西都是孤品 ...
  • 超鏈接(Hyperlink)可以看做是一個“熱點”,它可以從當前Web頁定義的位置跳轉到其他位置,包括當前頁的某個位置、Internet、本地硬碟或區域網上的其他文件,甚至跳轉到聲音、圖片等多媒體文件。瀏覽Web頁是超鏈接最普遍的一種應用,通過超鏈接還可以獲得不同形態的服務,如文件傳輸、資料查詢、電 ...
一周排行
    -Advertisement-
    Play Games
  • 分組和樹形結構是不一樣的。 樹形結構是以遞歸形式存在。分組是以鍵值對存在的形式,類似於GroupBy這樣的形式。 舉個例子 ID NAME SEX Class 1 張三 男 1 2 李四 女 2 3 王二 男 1 當以Sex為分組依據時則是 Key Value 男 1 張三 男 1 3 王二 男 1 ...
  • NetCore中將SQLServer資料庫備份為Sql腳本 描述: 最近寫項目收到了一個需求, 就是將SQL Server資料庫備份為Sql腳本, 如果是My Sql之類的還好說, 但是在網上搜了一大堆, 全是教你怎麼操作SSMS的, 就很d疼! 解決方案: 通過各種查找資料, 還有一些老哥的幫助, ...
  • 我的Notion Clowd.Squirrel Squirrel.Windows 是一組工具和適用於.Net的庫,用於管理 Desktop Windows 應用程式的安裝和更新。 Squirrel.Windows 對 Windows 應用程式的實現語言沒有任何要求,甚至無需服務端即可完成增量更新。 ...
  • 轉載請註明來源 https://www.cnblogs.com/brucejiao/p/16188865.html 謝謝! 轉載請註明來源 https://www.cnblogs.com/brucejiao/p/16188865.html 謝謝! 轉載請註明來源 https://www.cnblog ...
  • 1. Netty源碼研究筆記(3)——Channel系列 依舊是通過先縱向再橫向的研究方法,在開篇中,我們發現不管是Sever還是Client,最終的啟動是通過調用channel的對應方法來完成的,而這個動作實際在channel綁定的eventLoop中執行。 接下來,我們繼續EchoSever、E ...
  • 大家好,今天給大家介紹一款輕量、快速、穩定可編排的組件式規則引擎框架LiteFlow。 一、LiteFlow的介紹 LiteFlow官方網站和代碼倉庫地址 官方網站:https://yomahub.com/liteflow Gitee托管倉庫:https://gitee.com/dromara/li ...
  • 我使用Spring AOP實現了用戶操作日誌功能 今天答辯完了,復盤了一下系統,發現還是有一些東西值得拿出來和大家分享一下。 需求分析 系統需要對用戶的操作進行記錄,方便未來溯源 首先想到的就是在每個方法中,去實現記錄的邏輯,但是這樣做肯定是不現實的,首先工作量大,其次違背了軟體工程設計原則(開閉原 ...
  • 《零基礎學Java》 繪製幾何圖形 Java可以分別使用 Graphics 和 Graphics2D 繪製圖形,Graphics類 使用不同的方法繪製不同的圖形(drawLine()方法可f以繪製線、drawRect()方法用於繪製矩形、drawOval()方法用於繪製橢圓形)。 Graphics類 ...
  • 本期教程人臉識別第三方平臺為虹軟科技,本文章講解的是人臉識別RGB活體追蹤技術,免費的功能很多可以自行搭配,希望在你看完本章課程有所收穫。 ...
  • 很多人都喜歡使用黑色的主題樣式,包括我自己,使用了差不多三年的黑色主題,但是個人覺得在進行視窗轉換的時候很廢眼睛。 比如IDEA是全黑的,然後需要看PDF或者WORD又變成白色的了,這樣來回切換導致眼睛很累,畢竟現在網頁以及大部分軟體的界面都是白色的。那麼還是老老實實的使用原來比較順眼的模式吧。 1 ...