iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 4
0
自我挑戰組

C# 碰 ECG,生醫能迸出什麼花火?系列 第 4

UI 質感 UP !?

這次來試試看如何讓 WPF 界面質感提升吧?!

WPF的UI設計跟網頁引用CSS的方式很像,強者自己刻,菜鳥就跟我一樣先來引用強者開源的Sources吧!

  1. 專案右鍵 / 點選 "管理NuGet套件(Manage NuGet Packages...)"
    https://ithelp.ithome.com.tw/upload/images/20181004/20092103gT2KCKLFOC.png

  2. Tab切換至"瀏覽(Browse)",並在搜尋欄中輸入"Handy Control",並點擊安裝
    https://ithelp.ithome.com.tw/upload/images/20181004/20092103UqnSVBr1k7.png

  3. 在根據此套件作者在github提示的使用方式,點開app.xaml
    ,在標籤 <Application.Resources>中植入 ...

<ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/HandyControl;component/Themes/ThemesDefault.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>

https://ithelp.ithome.com.tw/upload/images/20181004/20092103Vn8s502Ab1.png

  1. 在來回到主要的View裡,點開 MainWindow.xaml後,在標籤 <Window>以添加屬性的模式注入以下引用
    xmlns:Controls="clr-namespace:HandyControl.Controls;assembly=HandyControl"
  • xmlns代表 xml NameSpace的概念,冒號後接是的你自己定義這個引用資源的"別稱"
  • 要使用這個資源裡的控制項就要先在標籤前帶入定義好的別稱
  • 範例 : <Controls.TimeBar></Controls.TimeBar>

https://ithelp.ithome.com.tw/upload/images/20181004/20092103Djl6UUtX8i.png

成功的話就會跟強者作者Demo的一樣
gif圖檔來自 NaBian 的github ...

咦? 介面質感有升級嗎? 沒有...

看到這位 NaBian 做的控制項太美了就陷下去了...各位有興趣也可以去Clone下來試試看,未來大概會以 TimeBar 的設計模式來嘗試看看能不能搞出我的 ECG Bar ... 但今天還沒有參透...

回來UI質感

再去NuGet安裝套件... 上圖

https://ithelp.ithome.com.tw/upload/images/20181004/20092103YyWkyjnFh1.png

經過一番折騰...

xaml裡引好 ...
https://ithelp.ithome.com.tw/upload/images/20181004/20092103TmEnwdh42O.png

按F7, 到xaml.cs裡設定好繼承MetroWindow等等
https://ithelp.ithome.com.tw/upload/images/20181004/20092103aMbngeeGOJ.png

竟然變成這樣...
https://ithelp.ithome.com.tw/upload/images/20181004/2009210368PWIlT47W.png

別急還有事情沒做...
https://ithelp.ithome.com.tw/upload/images/20181004/20092103YNxISfomCb.png

燈燈燈!!!
https://ithelp.ithome.com.tw/upload/images/20181004/20092103RdOn37ZRPJ.png

(OS...看了這麼久,質感是有UP多少啦...)

摁... 一定是我功力不夠,讓你感覺不出來,待我未來再呈現出我腦海裡的藍圖!

另外還有比較有名的Sources : MaterialDesignInXamlToolkit

因為查詢到的Info比較多這邊就沒再實作:

直接上兩個參考網站:

  1. 透過 MATERIAL DESIGN XAML TOOLKIT 讓你的 WPF 應用程式潮又有料
  2. 讓 WPF 也可以有 Material Design 樣式

(OS 第4天了,心電圖呢?ECG呢? TMD 最重要的ECG波形呢?)

摁... 好...

這是今天的Sources : branch dayfour


上一篇
慢慢地讓ECG來MVVM?!
下一篇
畫ECG前,先嚐一點Entity Framework吧!?
系列文
C# 碰 ECG,生醫能迸出什麼花火?9

尚未有邦友留言

立即登入留言