[教學] 如何使用Win8.1的Hub頁面

[hoyunxian (WildDagger)]

昨天因為是NICO鐵(*1)的六周年紀念日
所以花了一整天做了個比較概念(?的粉絲向APP


(詳細→http://www.nicovideo.jp/watch/sm22080657 )

好，總之這不是重點，這篇文章主題是教怎麼用HubSection頁面


總之要有的當然是Visual Studio 2013
(我用的是Express for Windows)

然後要在新增頁面視窗裡面選擇「中樞頁面」

點下去就會出現HubSection頁面了

可以看到最上面(也就是最左邊)有一個空的ImageBrush
只要指定一張背景圖上去，
最左邊的Hub就可以看到跟氣象、新聞等內建APP一樣的效果了

右邊的Section則是可以隨自己高興增減。

到這邊都跟平常用Group之類的差不多，但是最大的問題是：
因為HubSection用的是範本標籤(DataTemplate)，
所以你要是在裡面放了ListView或GridView，
然後用普通的方式指定名稱、綁定資料和指定事件的話
會發現執行的時候不是一片空白就是點了沒反應......


所以取而代之的(有點麻煩的)_就是為每一個Hub指定名稱
接著在ListView的ItemsSource指定為「{Binding}」

最後，在程式碼裡面的navigationHelper_LoadState區塊
(取代了原本的LayoutAwarePage的LoadState，
 還有這次仔細看的話會發現所有範本頁面的根標籤全變成普通的Page了，
 瀏覽之類的似乎改成用NavigationHelper這個物件來幫忙了)
加上這段程式碼：

「(HubSection名稱).DataContext = (綁定資料來源)」

這樣子執行就會發現ListView有資料跑出來了

不過最大的問題(點了沒反應)仍然存在

在這情況下必須要用到HubSection的IsHeaderInteractive屬性才行
也就是將這個IsHeaderInteractive設定成true才會有反應喔

此外ListView和GridView的IsItemClickEnabled別忘了也設定成true
不然一樣點了不會有反應(望)


8.1的教學部分暫時先講到這邊
綁定的部分下次再來寫一篇來說明好了
(雖然在這邊有寫程式的人應該不少比我還行吧......)





*1 NICO鐵是「NICONICO鐵道株式會社」的簡稱，
   指的是在NICONICO動畫上投稿的鐵道模擬遊戲實況動畫系列(注意有些不是)
   由於這些動畫中多半會參雜ACG相關捏他，
   甚至到了後來還有所謂的「故事性」較濃厚的實況動畫系列
   目前已經變成一個有獨立的世界觀類型的實況動畫系列

--
(本文已被刪除) [M      ]
(本文已被刪除) [ r     ]
(本文已被刪除) [  T    ]
(本文已被刪除) [  T    ]
(本文已被刪除) [  T    ]
(本文已被刪除) [  T    ]

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 111.250.103.72
→ hungys:等等 你是怎麼直接access到DataTemplate裡面的GridView?
→ hungys:我是指你說會空白的那個方法
指定x:Name直接下去幹的結果就是出不來啦

比方說在Hub裡面指定DataTemplate
裡面放的Gridview指定名字是gridView

然後在程式碼裡面寫「gridView.ItemsSource = (綁定資料)」資料就出不來
※ 編輯: hoyunxian       來自: 111.250.103.72       (10/20 13:21)
推 hungys:正常情況下在code-behind好像沒辦法直接存取裡面的控制項
→ hungys:不過我剛剛去subscribe裡面ListBox的Loaded事件
→ hungys:然後在event-handler填入ItemsSource是可行的喔~
→ hungys:雖然DataContext還是比較好的方法啦
→ hungys:指定x:Name我在code-behind用他會說沒有這個變數
→ hungys:不過這個方法如果ItemsSource是從網路下載下來可能就掛掉了
→ hungys:event-handler還沒等到資料就跑完了
這個的話我是先用自訂SplashScreen先擋住啦
等所有資料在自訂SplashScreen都Load完了才做綁定的工作
※ 編輯: hoyunxian       來自: 111.250.103.72       (10/20 13:51)
→ hungys:您可能會錯我的推文了orz