原文地址：
第一章知识结构：
第二节：（添加控件和内容）
（原地址：）
本节内容概览：
(显示图片图形和缩略图)
原文地址：
下面写一个事例，如何选择并显示图片
第一步
新建三个控件，一个按钮，用于选择图片，一个<p>用于显示图片相关信息，一个<img>用于显示选择的图片，如下：
1:
2:
3:
并给按钮添加点击事件：
WinJS.UI.processAll().done(function () { document.getElementById("selectImageButton").addEventListener("click", loadImage, false); }); 第二步：定义 loadImage函数
1: function loadImage(eventInfo) { 2:
3: var picker = new Windows.Storage.Pickers.FileOpenPicker(); //创建文件打开器
4: picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]); //过滤要选择的文件类型
5: picker.pickSingleFileAsync().then(processResults, displayError);//第一个是成功的回调函数
6: }
FileOpenPicker详细
第三步：处理选择的图片：实现 打开文件成功的回调函数processResults
1: function processResults(file) { 2:
3: // 检查是不是 选择了文件.
4: // 如果用户选择取消选择，那么返回null
5: if (file) { 6: var imageBlob = URL.createObjectURL(file);//createObjectURL返回一个Blob,Blob就是一个原始的二进制文件
7: document.getElementById("imageControl").src = imageBlob; //使图片地址指向这个Blob对象 8: //这是我想起了 原来用 ashx做验证码，返回的也是二进制图片
9:
10: document.getElementById("imageInformation").innerText = 11: "The src of the first image has been set to " + file.name;
12:
13: // 释放blob占用的资源
14: URL.revokeObjectURL(imageBlob);
15: } else { 16: displayError("An image wasn't selected."); 17: }
18: }
createObjectURL详细内容如下url:
Blob object详细内容如下url如下：
第四步： 处理错误，实现选择图片当中出现的错误，实现displayError函数
1: function displayError(error) { 2: if (imageBlob) { 3: URL.revokeObjectURL(imageBlob);
4: }
5: document.getElementById("imageInformation").innerText = error; 6: }
页面完整代码如下：
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11: function processResults(file) { 12:
13: if (file) { 14: var imgBlob = URL.createObjectURL(file);
15: document.getElementById("imageControl").src = imgBlob; 16: document.getElementById("imageInformation").innerText = 17: "The src of the first image has been set to " + file.name;
18:
19: // Release the blob resources.
20: URL.revokeObjectURL(imageBlob);
21:
22:
23: }
24: else { 25: displayError("An image wasn't selected."); 26: }
27:
28: };
29: function displayError(error) { 30: if (imageBlob) { 31: URL.revokeObjectURL(imageBlob);
32: }
33: document.getElementById("imageInformation").innerText = error; 34: };
35:
36: function loadImage(eventInfo) { 37:
38: var picker = new Windows.Storage.Pickers.FileOpenPicker();
39: picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]);
40: picker.pickSingleFileAsync().then(processResults, displayError);
41: }
42:
43: function Initialize() { 44:
45: WinJS.UI.processAll().done(function () { 46:
47: var s = document.getElementById("selectImageButton"); 48: s.addEventListener("click", loadImage, false); 49:
50:
51: })
52: }
53:
54: document.addEventListener("DomContentLoaded", Initialize(), false); 55:
56:
57:
58:
59:
60:
61:
62:
63:
执行效果：
1初始界面：
2选择图片：
3.展示图片：
thumbnails（缩略图）
缩略图大概分以下几种：
如下是实现 pictureView 代码：这个列子并没有写完，因为getThumbnailAsync这个函数返回的缩略图 我不知道怎么来处理，望有高手指点。
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11: function processResults(file) { 12:
13: if (file) { 14: // var value = Windows.Storage.FileProperties.ThumbnailMode.picturesView;
15:
16: //for (var i = 0; i < file.length; i++) { 17: // var listToken = Windows.Storage.StorageFile.getFileFromPathAsync(file[0].path);
18: //}
19:
20: // var s = storageFile.getAt(0);
21:
22:
23: file.getThumbnailAsync( //返回缩略图
24: Windows.Storage.FileProperties.ThumbnailMode.pictureView,
25: 200,
26: Windows.Storage.FileProperties.ThumbnailOptions.useCurrentScale).then(
27: function (storageItemThumbnail) { 28: // Add code to process thumbnail
29:
30: //storageItemThumbnail就是返回的缩略图 图像
31:
32: var s = storageItemThumbnail; //调试时显示contentType = "image/jpeg"
33:
34: }
35: );
36:
37: var sasd = "sasds";
38: }
39: else { 40: displayError("An image wasn't selected."); 41: }
42:
43: };
44: function displayError(error) { 45: if (imageBlob) { 46: URL.revokeObjectURL(imageBlob);
47: }
48: document.getElementById("imageInformation").innerText = error; 49: };
50:
51: function loadImage(eventInfo) { 52: // Windows.Storage.Pickers.PickerViewMode.list;
53: var folderPicker = new Windows.Storage.Pickers.FileOpenPicker();//FolderPicker
54: folderPicker.fileTypeFilter.replaceAll(["*"]);
55: folderPicker.pickSingleFileAsync().then(processResults, displayError); //pickSingleFileAsync打开单文件
56: }
57:
58: function Initialize() { 59:
60: WinJS.UI.processAll().done(function () { 61:
62:
63: var s = document.getElementById("selectImageButton"); 64: s.addEventListener("click", loadImage, false); 65:
66:
67: })
68: }
69:
70: document.addEventListener("DomContentLoaded", Initialize(), false); 71:
72:
73:
74:
75:
76:
77:
78:
79:
Displaying popups（显示弹出窗口）
添加一个Flyout（）
实现效果 ，点击按钮，弹出确认框，点击确认框内按钮，确认框消失
实现代码：
1:
2:
3:
4:
5:
6:
7:
8:
9: function Initialize() { 10: WinJS.UI.processAll().then(function () { 11:
12: // 侦听点击事件
13: document.getElementById("buyButton").addEventListener("click", showConfirmFlyout, false); 14: document.getElementById("confirmButton").addEventListener("click", confirmOrder, false); 15:
16: // Command and Flyout functions.
17: function showConfirmFlyout() { 18:
19:
20: confirmFlyout.winControl.show(buyButton, "bottom","center");
21: //show http://msdn.microsoft.com/en-us/library/windows/apps/br211727.aspx
22: }
23:
24: function confirmOrder() { 25: document.getElementById("confirmFlyout").winControl.hide(); 26: }
27: })
28: }
29:
30: document.addEventListener("DomContentLoaded", Initialize(), false); 31:
32:
33:
34:
35:
36:
37:
38:
39:你需要支付1000元
40:
41:
42:
43:
44:
初始页面：
点击按钮：
点击弹出框内按钮：
添加一个菜单：
实现效果： 点击 response按钮，就会在按钮下 加载一个菜单
实现代码如下：
1:
2:
3:
4:
5:
6:
7:
8:
9: function Initialize() { 10: WinJS.UI.processAll().then(function () { 11:
12: // Command and menu functions.
13: function showFlyout(flyout, anchor, placement) {//显示菜单 14: flyout.winControl.show(anchor, placement);
15: }
16: function hideFlyout(flyout) {//隐藏菜单 17: flyout.winControl.hide();
18: }
19: function alwaysSave() { //默认选择
20: var alwaysSaveState = document.getElementById("alwaysSaveMenuItem").winControl.selected; 21: }
22: function reply() { 23: hideFlyout(respondFlyout);
24: }
25: function replyAll() { 26: hideFlyout(respondFlyout);
27: }
28: function forward() { 29: hideFlyout(respondFlyout);
30: }
31:
32: function showRespondFlyout() { 33: showFlyout(respondFlyout, respondButton, "bottom");
34: }
35:
36: // Initialize event listeners.
37: document.getElementById("respondButton").addEventListener("click", /*@static_cast(EventListener)*/showRespondFlyout, false); 38: document.getElementById("alwaysSaveMenuItem").addEventListener("click", /*@static_cast(EventListener)*/alwaysSave, false); 39: document.getElementById("replyMenuItem").addEventListener("click", /*@static_cast(EventListener)*/reply, false); 40: document.getElementById("replyAllMenuItem").addEventListener("click", /*@static_cast(EventListener)*/replyAll, false); 41: document.getElementById("forwardMenuItem").addEventListener("click", /*@static_cast(EventListener)*/forward, false); 42:
43:
44:
45:
46: })
47: }
48:
49: document.addEventListener("DomContentLoaded", Initialize(), false); 50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
初始页面：
点击按钮效果：
点击菜单项效果：
添加一个信息对话框：
一共提供了两个构造函数来创建一个消息框，如下：
代码如下：
1:
2:
3:
4:
5:
6:
7:
8:
9: function Initialize() { 10: WinJS.UI.processAll().then(function () { 11:
12: var messageDialog = new Windows.UI.Popups.MessageDialog("sss", "title"); 13: messageDialog.showAsync();
14:
15: })
16: }
17:
18: document.addEventListener("DomContentLoaded", Initialize(), false); 19:
20:
21:
22:
23:
24:
25:
效果如图：