Kinect01 程式顯示 Kinect One 持續傳入的彩色影像 (1920x1080 @30fps)，提供影像分色處理選項與影像存檔功能，並顯示已存檔數目。

1. Kinect 2.0 Programming
(1)
Kinect01
FELab
2015/01/01 (2015/12/12 Rev.)
1

2. Kinect 2.0 程式從零開始
 Color Basics-WPF 範例程式
 Kinect01 目標、開發、執行
 Kinect01 畫面規劃
 Kinect01 實作
 Kinect01 解說
2

3. 3

4. 4

5. 5

6. 6

7. 7

8. 8

9. 9
Color Basics-WPF 範例程式
執行 「Kinect for Windows SDK v2.0 SDK Browser
(Kinect for Windows) v2.0」→「Color Basics-WPF」
→「Run」
執行 Install 則可將整個專案安裝於指定目錄，做為
自行開發程式的參考，或以此程式當樣本，修改為自
己想要的功能。

10. 10

11. 11

12. 12
Kinect01 程式顯示 Kinect One 持續傳入的彩色影像
(1920x1080 @30fps)，提供影像分色處理選項與影像
存檔功能，並顯示已存檔數目。
開發工具為 Windows 10 加上 Visual Studio 2015 環境
之 C# + WPF + Kinect for Windows SDK 2.0
程式執行時需將 Kinect One 接上電腦之 USB 3.0 插
槽
Kinect01 目標、開發、執行

13. 13
建議將螢幕解析度調為 1920x1080 或以上
Kinect01 專案下載 (Kinect01.zip)
https://onedrive.live.com/redir?resid=AB6DA2015C8C4A60!2307&
authkey=!ABC9MN8j_jtzCfU&ithint=file%2czip

14. 14
視窗大小為 1440x810
一個 Image 控制項顯示 1280x720 @30fps 即時影像
四個 Button 控制項分別做為影像分色處理的選項
(Red、Green、Blue、Color)
一個 Button 控制項自動將畫面影像以 jpg 格式，存
檔於 Kinect01 專案之與 Kinect01.exe 相同檔案夾，檔
名預設為 color000001.jpg、、、color999999.jpg。
Kinect01 畫面規劃

15. 15
一個 Label 控制項顯示已儲存影像檔案數目
利用 WriteableBitmap 類別配置記憶體區塊，將記憶
體區塊的影像即時顯示在 Image 控制項
每個 Kinect One 傳入的彩色影像 (Frame)，存入指定
的記憶體區塊，經影像處理後，傳至 Image 控制項
呈現出來。
一個 KinectSensor 類別的物件代表一台 Kinect One
(一台電腦只能接一台設備)

16. 16
視窗大小為 1440x810 (Kinect01)
Image 控制項顯示 1280x720 圖像 (ColorImage)
Button 控制項操控紅色影像 (Red)
Button 控制項操控綠色影像 (Green)
Button 控制項操控藍色影像 (Blue)
Button 控制項操控回復彩色影像 (Color)
Button 控制項操控影像存檔 (Save)
Label 控制項顯示已存檔影像數目 (Count)

17. 17
建立 Kinect01 方案
 起動 Visual Studio Professional 2015
 點選「檔案(F)」 → 「新增(N)」 → 「專案(P)…」 → 「Visual
C#」 → 「WPF 應用程式」
 「名稱(N)」填入 Kinect01 (原來是WpfApplication1)
 「位置(L)」利用瀏覽(B)… 選定目錄
 點選「確定」
Kinect01 實作

18. 18
填入專案名稱
利用瀏覽選定目錄
選擇 Kinect01
方案儲存位置
為 D:Win10
檔案夾

19. 19
現在畫面如下，如果不是，請按
「視窗(W) 」 → 「重設視窗配置(R) 」

20. 20
專案名稱為 Kinect01
自動產生 MainWindow.xaml
和 MainWindow.xaml.cs 檔案

21. 21
Title、Height、
Width 三個屬性都
有預設的屬性值
MainWindow.xaml
檔案控制
MainWindow 視窗
的外觀
MainWindow
視窗配置設計區

22. 22
專案名稱為 Kinect01，所以自
動產生 namespace Kinect01
MainWindow.xaml.cs
檔案控制 MainWindow
視窗的執行

23. 23
加入 Microsoft.Kinect 組件使 SDK 可以被專案使用
 在『參考』處按右鍵， 點選『加入參考(R)』
 點選「擴充功能」 → 挑選「Microsoft.Kinect 2.0.0.0」
→ CheckBox 處點一下使出現打勾
 點選「確定」

24. 24
在『參考』處按右鍵，
點選『加入參考(R)…』

25. 25
『擴充功能』之
Microsoft.Kinect
2.0.0.0 打勾

26. 26
專案多出這一項，表示
Kinect SDK 2.0 可以使用了

27. 27
 在視窗設計區的 MainWindow 處點一下
叫出 Window 的屬性視窗 (二種方式皆可)

28. 28
 在 MainWindow.xaml 檔案內容的 Window 處點一下

29. 29
透過 Window 的屬性視窗修改 Window 的屬性值
顯示屬性
(property)
顯示事件
(event)

30. 30
 將 Window 屬性修改為
名稱：Kinect01
FontSize：20
Height：810
ResizeMode：CanMinimize
Title：Kinect ColorFrame
Width：1440
程式執行時，視窗只可
縮至最小，無法放大

31. 31
將 Kinect01 視窗加入一個 Image 控制項
 滑鼠在工具箱的 Image 點一下，然後在視窗設計區點一下
 名稱：ColorImage
 將 ColorImage 屬性修改為
Height：720
Margin：70 0 0 0
Width：1280

32. 32
將 Kinect01 視窗加入四個 Button 控制項
 名稱：Red
 將 Red 屬性修改為
Background：單色筆刷 (R：255 G：0 B：0 A：100%)
Content：RED
FontSize：32
Height：45
Margin：70 725 0 0
Width：150

33. 33
 名稱：Green
 將 Green 屬性修改為
Background：單色筆刷 (R：0 G：255 B：0 A：100%)
Content：GREEN
FontSize：32
Height：45
Margin：250 725 0 0
Width：150

34. 34
 名稱：Blue
 將 Blue 屬性修改為
Background：單色筆刷 (R：0 G：0 B：255 A：100%)
Content：BLUE
FontSize：32
Height：45
Margin：430 725 0 0
Width：150

35. 35
 名稱：Color
 將 Color 屬性修改為
Background：漸層筆刷 (放射漸層 R：160 G：160 B：80
A：100%)
Content：COLOR
FontSize：32
Height：45
Margin：610 725 0 0
Width：150

36. 36
將 Kinect01 視窗加入一個 Button 控制項
 名稱：Save
 將 Save 屬性修改為
Background：單色筆刷 (R：180 G：100 B：220 A：100%)
Content：SAVE
FontSize：32
Height：45
Margin：860 725 0 0
Width：150

37. 37
將 Kinect01 視窗加入一個 Label 控制項
 名稱：Count
 將 Count 屬性修改為
Background：單色筆刷 (R：210 G：140 B：70 A：100%)
Content：存檔影像：000000
FontSize：32
Height：45
Margin：1040 725 0 0
Width：310

38. 38
透過事件視窗建立 Window 的事件處理方法(函式)
 點擊 Kinect01 事件的Icon，切換至事件視窗
事件

39. 39
 滑鼠雙擊 Kinect01 事件視窗的 Loaded 右邊空白欄位
此動作表示專案要處理 Window 的 Loaded 事件，
Visual Studio 系統自動為我們指定 Loaded 事件
的處理方法為 Kinect01_Loaded( ) 函式
雙擊之後系統自動產生

40. 40
 滑鼠雙擊 Kinect01 事件視窗的 Unloaded 右邊空白欄位
此動作表示專案要處理 Window 的 Unloaded 事
件，Visual Studio 系統自動為我們指定 Loaded
事件的處理方法為 Kinect01_Unloaded( ) 函式
雙擊之後系統自動產生

41. 41
 滑鼠雙擊 Red 事件視窗的 Click 右邊空白欄位
 滑鼠雙擊 Green 事件視窗的 Click 右邊空白欄位
 滑鼠雙擊 Blue 事件視窗的 Click 右邊空白欄位
 滑鼠雙擊 Color 事件視窗的 Click 右邊空白欄位
 滑鼠雙擊 Save 事件視窗的 Click 右邊空白欄位
Red 的 Click 事件處理函式為 Red_Click( )
Green 的 Click 事件處理函式為 Green_Click( )
Blue 的 Click 事件處理函式為 Blue_Click( )
Color 的 Click 事件處理函式為 Color_Click( )
Save 的 Click 事件處理函式為 Save_Click( )

42. 42
現在 MainWindow.xaml 檔案如下

43. 43

44. 44

45. 45
現在 MainWindow.xaml.cs 檔案如下

46. 46
視窗載入 (Loaded 事件)
視窗關閉 (Unloaded 事件)
Visual Studio 2015 自
動幫我們產生。視窗
Loaded 和 Unloaded
時要做的事情，就寫
在此二方法(函式)內

47. 47
Red 被按了 (Click 事件)
Green 被按了 (Click 事件)
Blue 被按了 (Click 事件)
Color 被按了 (Click 事件)

48. 48
Save 被按了 (Click 事件)

49. 49
建置 Kinect01 專案
 「建置(B)」 → 「建置方案(B)」
執行 Kinect01 專案
 「偵錯(D)」 → 「啟動但不偵錯(H)」

50. 50
現在專案執行畫面如下

51. 51
寫入程式碼至 MainWindow.xaml.cs 檔案

52. 52

53. 53
+= 之後接著按 Tab 鍵

54. 54
輸入 colorFrameReader.FrameArrived +=
接著按 Tab 鍵
自動產生 ColorFrameReader_FrameArrived 函式
每一個 RGB 影格 (Frame) 傳入時，會觸發一次
FrameArrived 事件，希望程式對一個 RGB 影格做甚
麼處理，就寫在ColorFrameReader_FrameArrived 函
式裏，每秒觸發 30 次。

55. 55

56. 56

57. 57

58. 58

59. 59

60. 60

61. 61
建置 Kinect01 方案
 「建置(B)」 → 「重建方案(R)」
執行 Kinect01 方案
 「偵錯(D)」 → 「啟動但不偵錯(H)」

62. 62
現在專案執行畫面如下 (Kinect 圖是鏡像)

63. 63
color000001.jpg 檔案內容如下 (Kinect 圖是鏡像)

64. 64
Kinect01.exe 是執行檔，寄給朋友就可分享。

65. 65
 Kinect RGB 影像串流相關類別
 KinectSensor 類別的物件代表一台 Kinect One，以
GetDefault( ) 方法連接Kinect One，以 Open( ) 方法啟動
Kinect One，以 Close( ) 方法停止 Kinect One
 新的影格資料送達電腦時觸發 ColorFrameReader 的
FrameArrived 事件，可利用事件傳遞的參數
ColorFrameArrivedEventArgs 物件取得影格資料
(ColorFrame 物件)
Kinect01 解說

66. 66
KinectSensor 類別
 https://msdn.microsoft.com/en-
us/library/windowspreview.kinect.kinectsensor.aspx?cs-save-
lang=1&cs-lang=csharp#code-snippet-1
 KinectSensor 類別的物件代表一台 Kinect One，以
GetDefault( ) 方法連接 Kinect One，以 Open( ) 方法啟動
Kinect One，以 Close( ) 方法停止 Kinect One
 ColorFrameSource 屬性取得彩色影像來源

67. 67
ColorFrameReader 類別
 https://msdn.microsoft.com/en-
us/library/windowspreview.kinect.colorframereader.aspx?cs-
save-lang=1&cs-lang=csharp#code-snippet-1
 ColorFrameReader 類別的物件操控彩色 (RGB) 影像串流
 FrameArrived 事件被觸發當彩色影像送達時

68. 68
ColorFrame 類別
 https://msdn.microsoft.com/en-
us/library/windowspreview.kinect.colorframe.aspx
 ColorFrame 類別的物件儲存彩色 (RGB) 影像串流
 CopyConvertedFrameDataToArray( ) 方法將原始彩色影像
依指定的格式轉換後，存入指定的陣列

69. 69
FrameDescription 類別
 https://msdn.microsoft.com/en-
us/library/windowspreview.kinect.framedescription.aspx
 ColorFrameReader 類別的物件描述彩色 (RGB) 影像的性質
 BytesPerPixel 屬性描述每個 Pixel 有幾個 Byte
 Height 屬性描述影像高度的 Pixel 數
 Width 屬性描述影像寬度的 Pixel 數

70. 70
ColorFrameArrivedEventArgs 類別
 https://msdn.microsoft.com/en-
us/library/windowspreview.kinect.colorframearrivedeventar
gs.aspx
 ColorFrameReader 的 FrameArrived 事件，傳遞的參數就是
ColorFrameArrivedEventArgs 類別的物件，含有影格資料
(ColorFrame 物件)
 FrameReference 屬性取得彩色影像來源的參照

71. 71
ColorImageFormat 列舉
 https://msdn.microsoft.com/en-
us/library/windowspreview.kinect.colorimageformat.aspx
 Bgra 成員：一個像素佔用 4 個 byte (blue、green、red 各 1
個 byte，最後 1 個 byte 未使用)
 各成員所代表整數值如下頁所示：

72. 72

73. 73
.NET Framework WriteableBitmap 類別
 http://msdn.microsoft.com/zh-
tw/library/system.windows.media.imaging.writeablebitmap.a
spx
 WriteableBitmap 類別的物件存放 RGB 影格資料
 WritePixels(Int32Rect, Array, Int32, Int32) 方法將 byte 陣列
的影像存入 WriteableBitmap 物件

74. 74
.NET Framework Int32Rect 結構
 http://msdn.microsoft.com/zh-
tw/library/system.windows.int32rect.aspx
 Int32Rect 結構描述寬度、高度和整數矩形的位置
 Height 屬性取得或設定矩形的高度
 Width 屬性取得或設定矩形的寬度

75. 75
.NET Framework 4.6 和 4.5 影像檔案儲存相關類別
1. File 類別
https://msdn.microsoft.com/zh-
tw/library/system.io.file(v=vs.110).aspx
2. FileStream 類別
http://msdn.microsoft.com/zh-
tw/library/system.io.filestream.aspx

76. 76
3. BitmapSource 類別
http://msdn.microsoft.com/zh-
tw/library/system.windows.media.imaging.bitmapsource.as
px
4. JpegBitmapEncoder 類別
http://msdn.microsoft.com/zh-
tw/library/system.windows.media.imaging.jpegbitmapenco
der.aspx

77. 77
Visual Studio C# Kinect 程式設計參考資料
1. 劉超群，Kinect體感程式探索使用C#，2013，松崗，
ISBN:978-957-22-4115-8。
2. Programming Kinect for Windows v2: (02)
http://channel9.msdn.com/Series/Programming-Kinect-for-Windows-v2