Windows 8 開發: 動態更新圖片閃爍 Image update flicker.

這個問題其實遇到蠻久的但一直沒時間好好解決，一直到前陣子開發WP8版本的時候終於"痛定思痛"的好好把它給搞定，其實一部份也是誤打誤撞XD

先來談談我遇到的問題，因為任務的關係，我需要動態更新畫面上的Image，直覺的處理方式如下:

[方法A] Url更新 → 更新Image的來源

String ImageUrl = "http://168.63.133.149/drupal-7/?q=solomon/ws/graph/stockmap/TIMER/" + "?&g=" + Guid.NewGuid();
timerImage.Source = new BitmapImage(new Uri(ImageUrl));

但是可怕的事情發生了，圖片竟然會一閃一閃的，花特?

發生了什麼事情? 就過去的開發經驗是Image在繪圖過程中需要時間，所以需要用技巧雙重緩衝來幫助讓Image畫好才顯示到畫面上。

[方法B] Url更新 → 更新背景Image → 更新Image

String ImageUrl = "http://168.63.133.149/drupal-7/?q=solomon/ws/graph/stockmap/TIMER/" + "?&g=" + Guid.NewGuid();
var BackgroundImage = new BitmapImage(new Uri(ImageUrl));
timerImage.Source = BackgroundImage;

Image照樣給我在那邊閃阿閃的，彷彿在說，打我啊笨蛋XD (背景音樂:一閃一閃亮晶晶)
我不是已經用了雙重緩衝了嗎???
後來查了資料後(但我忘記把網址留下來)，資料上說.NET會自動優化Image最後真的要呈現的時候才會把圖片載入到記憶體裡面去，意思就是說，我沒有辦法預載圖片來解決目前畫面圖片閃爍的問題。

經此挫敗只好上論壇拜神，請求各界神人的指導，其中給予指引，不是有DownloadCompleted可以用嗎? 傻傻的，看看這精美的MSDN，你要的一切都在這阿。

但....為什麼我的.NET沒有這個event可以用? 喔~原來是被拿掉了阿!? 只剩下一個Bitmap.ImageOpended可以用...但它同樣也是要圖片載入到記憶體之中才會觸發...

等等，我好像有想法了!

[方法C]如果我用一個看不見的圖片當作緩衝，再把它畫到另一張圖片上呢?

String ImageUrl = "http://168.63.133.149/drupal-7/?q=solomon/ws/graph/stockmap/TIMER/" + "?&g=" + Guid.NewGuid();
Image NotVisibleImage = new BitmapImage(new Uri(ImageUrl));
timerImage.Source = NotVisibleImage.Source;

圖片他還是會閃.........此時我已經快氣絕身亡了

最後的最後，我用了一個Image，並且綁定ImageOpended事件，再把它用Brush的方式畫到Grid上(當作Grid的背景圖片呈現)，才解決了直這個問題XD

最後獻上Source Code與論壇文

Windows 8 and WP8 圖檔需求

不知道開發過開發Windows App的朋友們是也覺得每次都要整理資料再跟設計師提需求，然後就e-mail來來回回無形中也浪費了一些時間，下面資料列出W8與WP8 app需要的圖檔需求供大家參考

Windows 8 Store app

*使用建議檔名把圖檔整理好後，放到目錄/Assets/

	隨意檔名	限定檔名(建議使用)	圖檔大小(Width x Height)
Logo標誌	W8_Logo_270x270.png	Logo150x150.scale-180.png	270x270
	W8_Logo_210x210.png	Logo150x150.scale-140.png	210x210
	W8_Logo_150x150.png	Logo150x150.scale-100.png	150x150
	W8_Logo_120x120.png	Logo150x150.scale-80.png	120x120
Wide Logo 寬標誌	W8_WideLogo_558x270.png	WideLogo310x150.scale-180.png	558x270
	W8_WideLogo_434x210.png	WideLogo310x150.scale-140.png	434x210
	W8_WideLogo_310x150.png	WideLogo310x150.scale-100.png	310x150
	W8_WideLogo_248x120.png	WideLogo310x150.scale-80.png	248x120
Small Logo 小標誌	W8_SmallLogo_256x256.png	SmallLogo.targetsize-256.png	256x256
	W8_SmallLogo_54x54.png	SmallLogo.scale-180.png	54x54
	W8_SmallLogo_48x48.png	SmallLogo.targetsize-48.png	48x48
	W8_SmallLogo_42x42.png	SmallLogo.scale-140.png	42x42
	W8_SmallLogo_30x30.png	SmallLogo.scale-100.png	30x30
	W8_SmallLogo_24x24.png	SmallLogo.scale-80.png	24x24
	W8_SmallLogo_32x32.png	SmallLogo.targetsize-32.png	32x32
	W8_SmallLogo_16x16.png	SmallLogo.targetsize-16.png	16x16
Store Logo 市集標誌	W8_StoreLogo_90x90.png	StoreLogo.scale-180.png	90x90
	W8_StoreLogo_70x70.png	StoreLogo.scale-140.png	70x70
	W8_StoreLogo_50x50.png	StoreLogo.scale-100.png	50x50
Badge Logo 徽章標誌	W8_BadgeLogo_43x43.png	BadeLogo.scale-180.png	43x43
	W8_BadgeLogo_34x34.png	BadeLogo.scale-140.png	34x34
	W8_BadgeLogo_24x24.png	BadeLogo.scale-100.png	24x24
SplashScreen 啟動顯示畫面	W8_SplashScreen_1116x540.png	SplashScreen620x300.scale-180.png	1116x540
	W8_SplashScreen_868x420.png	SplashScreen620x300.scale-140.png	868x420
	W8_SplashScreen_620x300.png	SplashScreen620x300.scale-100.png	620x300

WP8

Logo標誌

WP8_Logo300x300.png

Large Tile 大型動態磚

WP8_LargeTile_691x336.png

Medium Tile 中型動態磚

WP8_MediumTile_336x336.png

Small Tile 小型動態磚

WP8_SmallTile_158x158.png

相信大家看到這裡還是覺得很麻煩，一堆檔案要建立，別擔心，這裡已經幫你整理好了，包括圖檔名稱與影像檔實際大小都搞定，就差你的圖檔覆蓋過去。

以後開發新的App或者Logo改版可以請設計師一次搞定再整包拿來XD

https://dl.dropboxusercontent.com/u/3678868/WindowsImageRequirement.zip

回鍋心得 Android vs. Windows 8 dev.

前言

能有機會去上課真是不錯，一方面強迫自己動手做，另一方面重新熟悉Android的開發，說真的一堆東西都忘的差不多了，畢竟上一次碰Android是在碩士班的時候了，當初是為了論文收集使用者的動態簽名資料而寫的一個Android app。

連這一次上課已經遇到這個老師三次了，第一次是在上iOS課程遇到，第二次是在微軟，還有這一次，這位老師感覺很不簡單

使用Portable Class Libraries打造跨平台App核心

什麼是Portable Class Library？

由於微軟自己有許多不同的.NET Framework，如果你想在不同的Framework(Windows 8 store, WP8, Silverlight...etc.)下開發支持同一個App服務的界面是一件非常困難的事情，並且你需要一直重複的把相同的Code翻譯為不同的版本，即便是那些商業邏輯與流程完全一樣，於是有了Portable Class Library這個概念。