基本的用法我們在 【萬裡征程——windows app開發】頁面布局和基本導航中已經講過了,這裡繼續補充關于應用欄的更多用法。
在之前的學習中,我們知道icon屬性中有很多很多系統預定義,但也許這些還是不夠的,現在就來增加幾種用法咯。
字元集應用
那麼什麼是字元集應用呢?請參閱維基百科。
pathicon
我們也可以用路徑來繪制一個屬于自己的圖形哦,下面的圖形大概就是9點鐘的樣子啦。
如何适應不同的分辨率這也是值得我們去解決的問題,畢竟不論是從8英寸的平闆還是25英寸的桌上型電腦,甚至還有4英寸至7英寸的手機,在應用欄按鈕太多而螢幕不夠大時,多餘的按鈕該怎麼辦呢?
預設情況下,應用欄圖示的寬度都是确定好的100像素哦。那麼我們先來看兩張圖檔好了,由于windows 10是可以直接調整modern應用的大小的(而不是windows 8那種隻能全屏顯示),是以我直接拉伸modern大小以模拟分辨率的機率啦。
這裡為了調試更加友善,是以使用了issticky屬性。appbarbutton還有一個很重要的屬性喲,之前用不到,不過這裡就是核心成員了呢,它就是iscompact。這個屬性可以讓應用欄按鈕隻顯示圖示而不顯示文字,也就是label啦。那麼我們的工作就要圍繞這個屬性來展開了。
我們可以這樣假設,有一個函數,它有一個布爾變量的參數,參數為真的話呢,那麼所有的這些appbarbutton的iscompact屬性也為真。在以下這段代碼中,我們先将bottomappbar的自對象選取為root,這樣一來的話呢,如果應用中還有頂部的應用欄,就不會互相幹擾啦。然後逐漸取出root和panel中的自對象就好咯。
接下來還需要判斷到底需不需要啟用iscompact,那這又是由什麼決定的呢,既然前面提到是因為螢幕的分辨率,也就是所應用所占用的寬度會導緻應用欄發生重疊,那麼答案就毫無疑問了。看到下面的代碼相信大家都明白了,至于為何是寬度的界限在1000呢,那是因為有10個appbarbutton,前面也說了它們的寬度是100。(不帶label的話呢,就隻需要60像素啦。)
來張圖檔以示搞定這個問題了吧。
但是像我這麼鑽牛角尖的人,10個appbarbutton用這種方式搞定了,那20個呢?我們就來示範一下,把之前xaml中的appbarbutton複制粘貼一番。如果是2k、4k的螢幕應對20個沒問題啊,但我這1920x1080的螢幕就放不下了。
那麼這又有什麼辦法可以解決的嗎?當然有啦,将這20個圖示切成2列就好啦。我們首先在grid中添加一行。
再通過下面這張方式來調整它處于哪一行,以及在水準方向的右側還是左側。這裡我将兩行都設定在右側啦。
當然了,這樣一來就可以放40個appbarbutton啦,如果縮小應用的大小的話為了容納更多還可以用iscompact屬性呢。不過沒有哪個應用做成這樣吧^_^
另外呢,如果把應用欄設計成這樣的話。
那麼對于windows 10,在拉伸的過程中,中間部分的控件就會慢慢消失啦。以下這張圖檔呢,是我在拉伸到中間有2個控件剛好重疊的時候啦。至于把appbarbutton設計成這樣是好是壞大家自己決定咯,我反正覺得這樣不好呢。不過有意思的是,即便如此,它們彼此的click事件還都是有效的噢,會區分左右兩部分,而不會疊在一起。
當然啦,這個的應用遠不是應用欄這麼簡單喲,對于其他的前景,比如有兩個textblock在螢幕左右兩側,當應用把收縮變小之後也可以讓這個textblock疊成2層在螢幕的一邊。
我們都見過有菜單的應用欄按鈕對吧,這個的實作其實也挺簡單的。用flyout屬性就好啦。
tag屬性嘛,既然童鞋們在看csdn部落格,那自然就知道tag啦。下面這段代碼就讓flyout菜單發揮作用啦。
感謝通路,希望對您有所幫助。 歡迎關注或收藏、評論或點贊。
為使本文得到斧正和提問,轉載請注明出處:
http://blog.csdn.net/nomasp