1
00:00:00,450 --> 00:00:01,470
‫ยินดีต้อนรับกลับ.

2
00:00:01,500 --> 00:00:07,980
‫ในวิดีโอนี้ เราจะพูดถึง stack, panel list, box, then the logical tree and visual

3
00:00:07,980 --> 00:00:08,880
‫tree.

4
00:00:09,030 --> 00:00:15,540
‫ก่อนอื่น มากำจัดกริดนี้กันก่อน เพราะเรายังไม่ได้แตะกริด เราจึงใช้กริดไม่ถูกต้อง

5
00:00:15,540 --> 00:00:19,920
‫แต่เราจะทำในวิดีโอถัดไป

6
00:00:19,920 --> 00:00:23,550
‫แทนที่จะใช้กริด ฉันต้องการใช้แผงสแต็ก

7
00:00:23,670 --> 00:00:31,020
‫แผงสแต็กช่วยให้ฉันสามารถซ้อนองค์ประกอบที่ด้านบนของกันและกันได้ ดังนั้นฉันสามารถดำเนินการต่อและเพิ่มบล็อกข้อความในที่นี่ได้

8
00:00:31,020 --> 00:00:32,790
‫เป็นต้น

9
00:00:32,970 --> 00:00:39,420
‫และฉันจะเขียนข้อความเช่น สวัสดีชาวโลก ข้อความธรรมดา

10
00:00:39,450 --> 00:00:41,820
‫และอย่างที่คุณเห็น มีข้อความ Hello World ของฉัน

11
00:00:41,850 --> 00:00:49,410
‫ตอนนี้ สิ่งที่ฉันต้องการทำคือ ฉันต้องการจัดแนวมัน ดังนั้นการจัดแนวตามแนวนอน ฉันจะใช้ศูนย์กลางที่นี่

12
00:00:49,410 --> 00:00:51,990
‫ตอนนี้ฉันกำลังจัดข้อความให้อยู่ตรงกลางดังที่คุณเห็นที่นี่

13
00:00:51,990 --> 00:00:58,590
‫ตอนนี้ข้อความอยู่กึ่งกลางและอาจเพิ่มระยะขอบเล็กน้อยในทุกทิศทาง ซึ่งก็คือ 20

14
00:00:58,620 --> 00:01:04,680
‫อย่างที่คุณเห็น ฉันกำลังใช้ระยะขอบและแค่พูดว่า 20 ซึ่งจะเป็นหรือจะสร้างระยะขอบไปทางทั้งสี่ทิศทางเป็น

15
00:01:04,680 --> 00:01:08,100
‫20 พิกเซล

16
00:01:09,210 --> 00:01:16,260
‫สิ่งต่อไปคือกล่องรายการ และฉันต้องการใช้กล่องรายการเพื่อให้คุณเห็นว่ากล่องรายการเป็นอย่างไร

17
00:01:16,260 --> 00:01:24,930
‫ดังนั้นกล่องรายการที่นี่ในขณะนี้จึงว่างเปล่า แต่เราสามารถเปลี่ยนได้อย่างง่ายดายโดยการสร้างรายการในกล่องรายการในนั้น

18
00:01:24,930 --> 00:01:28,410
‫ไปข้างหน้าและสร้างรายการกล่องรายการ

19
00:01:28,860 --> 00:01:36,480
‫และรายการนั้นควรมีเนื้อหาว่าเนื้อหาเท่ากับข้อหนึ่ง

20
00:01:36,780 --> 00:01:42,720
‫และตอนนี้ แทนที่จะมีแท็กเปิดและปิด ฉันแค่ต้องการมีเวอร์ชันที่สั้นกว่านี้

21
00:01:42,720 --> 00:01:49,860
‫ดังนั้นฉันจึงใช้ปีที่แล้วและ Visual Studio ก็ฉลาดพอที่จะกำจัดแท็กปิดให้ฉันโดยอัตโนมัติ

22
00:01:49,860 --> 00:01:55,920
‫ตอนนี้กล่องรายการนี้มีรายการนี้ 1 รายการ และฉันจะคัดลอกและวางหลาย ๆ ครั้ง

23
00:01:55,920 --> 00:01:58,650
‫ผมจะได้ข้อ 1 และ 2 และ 3

24
00:01:58,650 --> 00:02:01,080
‫และตอนนี้กล่องรายการนี้ใช้ความกว้างทั้งหมด

25
00:02:01,080 --> 00:02:08,040
‫อย่างที่คุณเห็น มันใช้พาเรนต์ทั้งหมด และสูงหรือสูงเท่าที่จำเป็นเท่านั้น

26
00:02:08,040 --> 00:02:15,090
‫ดังนั้นจึงหมายความว่าต้องใช้พื้นที่มากเท่าที่องค์ประกอบภายในอยู่ในความสูง

27
00:02:15,090 --> 00:02:20,700
‫ค่อนข้างมาก สมมุติว่ารายการหนึ่งและรายการสองและสาม แต่ละรายการมีความสูง 30 พิกเซล

28
00:02:20,700 --> 00:02:23,430
‫ดังนั้นกล่องทั้งหมดนี้จะสูงแค่ 90 พิกเซล

29
00:02:23,430 --> 00:02:27,990
‫แต่เราเปลี่ยนได้โดย สมมุติว่าปรับความสูง

30
00:02:28,230 --> 00:02:31,590
‫และฉันแค่จะใช้ความสูง 100

31
00:02:31,590 --> 00:02:35,370
‫อย่างที่คุณเห็น มันสูงกว่าที่เคยเป็นมาก่อน

32
00:02:35,370 --> 00:02:38,970
‫ตอนนี้เรามาสร้างความกว้างด้วย 100 พิกเซลกัน

33
00:02:39,000 --> 00:02:42,990
‫ตอนนี้คุณจะเห็นว่ากล่องนี้เล็กกว่ามากและใส่ได้พอดี

34
00:02:43,470 --> 00:02:43,980
‫ไม่เป็นไร.

35
00:02:43,980 --> 00:02:49,140
‫ทีนี้ ถ้าผมอยากให้มีระยะขอบในทุกทิศทาง ผมก็สามารถให้องค์ประกอบนี้ในส่วนระยะขอบได้

36
00:02:49,140 --> 00:03:02,040
‫แต่อย่างที่คุณเห็น เนื่องจากบล็อกข้อความ Helloworld นี้มีระยะขอบ 20 ในทุกทิศทาง จึงยังมีระยะห่างระหว่างองค์ประกอบรายการทั้งสองที่นี่หรือระหว่างกล่องรายการและบล็อกข้อความ

37
00:03:03,720 --> 00:03:13,920
‫ทีนี้ ถ้าเรารันโค้ดนั้น เราจะเห็นว่าเรามีหน้าต่างหลักเล็กๆ นี้ ซึ่งสวยงามและมีกล่องรายการพร้อมองค์ประกอบ

38
00:03:13,920 --> 00:03:18,600
‫ดังที่คุณเห็นในที่นี้ สวัสดีชาวโลกที่บล็อกข้อความ และองค์ประกอบรายการเหล่านั้น คุณสามารถคลิกที่พวกมัน

39
00:03:18,600 --> 00:03:20,880
‫คุณสามารถเลือกได้ตามที่เห็น

40
00:03:20,880 --> 00:03:26,940
‫แต่ไม่มีอะไรเกิดขึ้นเพราะเรายังไม่ได้ตรวจสอบกิจกรรมซึ่งเราจะทำในวิดีโอหน้า

41
00:03:27,510 --> 00:03:29,790
‫ดังนั้นฉันจะปิดมันอีกครั้ง

42
00:03:29,910 --> 00:03:35,340
‫ทีนี้มาพูดถึงตรรกะและแผนผังกันอย่างรวดเร็ว

43
00:03:35,760 --> 00:03:40,530
‫สิ่งที่เรามีที่นี่คือต้นไม้ตรรกะ หรือเราสามารถเห็นต้นไม้ตรรกะใน XAML

44
00:03:40,530 --> 00:03:44,880
‫ต้นไม้ตรรกะคือหน้าต่างภายในหน้าต่างนั้น

45
00:03:44,880 --> 00:03:46,110
‫เรามีแผงสแต็ค

46
00:03:46,110 --> 00:03:47,280
‫ด้านในของแผงสแต็คนั้น

47
00:03:47,280 --> 00:03:49,890
‫เรามีกล่องข้อความและกล่องรายการ

48
00:03:49,890 --> 00:03:56,070
‫และภายในกล่องรายการ เรามีกล่องรายการ รายการที่หนึ่ง กล่องรายการ รายการที่สอง และสาม

49
00:03:56,370 --> 00:03:58,140
‫นั่นคือต้นไม้ตรรกะ

50
00:03:58,140 --> 00:04:01,080
‫คุณสวยมากมีหลายสาขา

51
00:04:01,080 --> 00:04:02,220
‫มันลึกลงไปอีก

52
00:04:02,220 --> 00:04:08,880
‫ดังนั้นหน้าต่างจึงมีสาขาของแผงสแต็กซึ่งมีสองสาขา และหนึ่งในนั้นคือ List Box

53
00:04:08,880 --> 00:04:11,340
‫ซึ่งมีสาขาเช่นกัน เป็นต้น

54
00:04:11,550 --> 00:04:15,510
‫อย่างที่ฉันพูดอีกครั้ง นี่คือต้นไม้ตรรกะ

55
00:04:15,510 --> 00:04:23,550
‫ทีนี้มาดูแผนผังภาพกัน เพราะเช่น ถ้าฉัน เพิ่มปุ่มที่นี่ และฉันต้องการสิ่งนั้นในอีกสักครู่

56
00:04:23,550 --> 00:04:28,380
‫ดังนั้นฉันจึงสร้างปุ่มใหม่ โดยให้เนื้อหาของ Click Me

57
00:04:29,730 --> 00:04:36,360
‫และฉันจะเพิ่มวิธีการที่นี่ซึ่งจะถูกเรียกเมื่อใดก็ตามที่มีคนคลิก

58
00:04:36,360 --> 00:04:41,670
‫ฉันกำลังใช้คลิกที่นี่และกำลังสร้างตัวจัดการเหตุการณ์ใหม่

59
00:04:41,700 --> 00:04:45,780
‫และสิ่งที่ทำกับฉัน มันสร้างวิธีการใหม่ที่เรียกว่าการคลิกปุ่ม

60
00:04:45,900 --> 00:04:52,620
‫ถ้าคุณดูที่นี่ เราจะเห็นว่ามีวิธีที่เรียกว่า Button Click ซึ่งมีผู้ส่งอ็อบเจ็กต์และอาร์กิวเมนต์เหตุการณ์ที่กำหนดเส้นทางที่เรียกว่า

61
00:04:52,620 --> 00:04:55,710
‫E

62
00:04:55,740 --> 00:04:59,880
‫ดังนั้นสิ่งที่ทำได้ค่อนข้างมากคือวิธีนี้จะถูกเรียก

63
00:04:59,990 --> 00:05:06,490
‫เมื่อใดก็ตามที่เราคลิกที่ปุ่มและสิ่งที่เรามีในวิธีนี้ ร่างกายจะถูกดำเนินการ

64
00:05:06,500 --> 00:05:13,910
‫สมมติว่าเราใช้กล่องข้อความ ซึ่งเป็นสิ่งที่เรายังไม่ได้ใช้ และเราเรียกวิธีการแสดง

65
00:05:13,940 --> 00:05:21,800
‫เราสามารถแสดงกล่องหรือกล่องจะปรากฏขึ้นเหมือนป๊อปอัปเล็กน้อยซึ่งจะแสดงข้อความให้เราทราบ

66
00:05:21,800 --> 00:05:33,650
‫ดังนั้นบางอย่างเช่น ขอบคุณที่คลิกฉัน และข้อความบอกว่า คลิกฉัน และข้อความที่จะเกิดขึ้นเช่นนี้

67
00:05:33,650 --> 00:05:38,540
‫ขอบคุณสำหรับการคลิกกล่องข้อความจะแสดงสิ่งที่สวยงามเช่นขอบคุณสำหรับการคลิกฉัน

68
00:05:38,630 --> 00:05:43,850
‫ดังที่คุณเห็นปุ่มคลิกฉันนี้อยู่ด้านล่างกล่องรายการของเรา

69
00:05:43,850 --> 00:05:47,330
‫ดังนั้น ได้โปรดไปข้างหน้าและเพิ่มระยะห่างระหว่างพวกเขาเล็กน้อย

70
00:05:49,940 --> 00:05:50,390
‫ไม่เป็นไร.

71
00:05:50,390 --> 00:05:51,980
‫ฉันหวังว่าคุณจะพยายามทำอย่างนั้น

72
00:05:51,980 --> 00:05:59,510
‫และเราสามารถให้ปุ่มของเรามีระยะขอบ และฉันก็แค่ใช้ 20 อีกครั้ง หรือเราอาจให้ช่องรายการของเรามีระยะขอบ

73
00:05:59,510 --> 00:06:02,390
‫แต่การให้ปุ่มมีระยะขอบน่าจะใช้ได้ทั้งหมด

74
00:06:02,540 --> 00:06:08,900
‫ตอนนี้ถ้าเรารันโค้ด เราจะได้ปุ่ม click me ที่สวยงามที่นี่

75
00:06:08,900 --> 00:06:12,890
‫ดังนั้นเราจึงมี Hello world เรามีข้อความและอื่นๆ หรือกล่องรายการ

76
00:06:12,890 --> 00:06:17,930
‫และตอนนี้ถ้าเราคลิกที่ Click Me กล่องข้อความนี้จะปรากฏขึ้นและตรวจสอบ

77
00:06:17,960 --> 00:06:24,110
‫พูดอะไรเช่น ขอบคุณที่คลิกฉัน แล้วเราสามารถคลิกตกลงเพื่อปิดกล่องข้อความนั้นอีกครั้ง

78
00:06:24,110 --> 00:06:25,280
‫เลยมาเปิดดู

79
00:06:25,280 --> 00:06:27,980
‫อย่างที่คุณเห็น คลิกฉัน ขอบคุณที่คลิกฉัน

80
00:06:28,670 --> 00:06:41,570
‫นั่นคือกล่องข้อความ และเราสามารถใช้สิ่งนั้นได้ สมมติว่าเราใช้บรรทัดขวาของคอนโซลในแอปพลิเคชันคอนโซลของเราเพื่อการทดสอบ

81
00:06:41,570 --> 00:06:48,380
‫มันค่อนข้างดีถ้าเราต้องการเปิดบางสิ่งบางอย่างหลังจากเหตุการณ์ เราเพียงแค่เปิดกล่องข้อความเพื่อให้เรารู้ว่า

82
00:06:48,380 --> 00:06:50,870
‫โอเค มันใช้ได้ดี

83
00:06:50,870 --> 00:06:57,080
‫นั่นคือปุ่มและตรรกะที่สามของเรา

84
00:06:57,080 --> 00:06:59,300
‫ตอนนี้เรามาดูที่ภาพต้นไม้กัน

85
00:06:59,450 --> 00:07:03,380
‫ดังนั้นเพื่อให้ได้แผนผังภาพ มีหลายวิธี

86
00:07:03,380 --> 00:07:10,340
‫แต่สิ่งหนึ่งที่ฉันจะใช้คือ ฉันจะเพิ่มจุดตรงนี้ จุดดีบัก

87
00:07:10,340 --> 00:07:15,710
‫ดังนั้นมันจะทำงานในการดีบักเมื่อใดก็ตามที่รันโค้ดบรรทัดนี้

88
00:07:15,770 --> 00:07:19,760
‫ให้ฉันเริ่มรหัสหรือเริ่มโปรแกรมของเรา

89
00:07:19,770 --> 00:07:26,510
‫ตอนนี้ฉันคลิกที่ปุ่มและโปรแกรมของเราหยุดลงและเราเข้าสู่โหมดแก้ไขข้อบกพร่อง

90
00:07:26,510 --> 00:07:31,580
‫จากนั้นฉันสามารถไปที่โปรแกรมสร้างภาพต้นไม้ WPF

91
00:07:31,580 --> 00:07:38,720
‫สิ่งที่ฉันจะทำคือคลิกที่มัน และมันเปิด WPF visualizer ซึ่งมีแผนผังแสดงภาพ

92
00:07:38,720 --> 00:07:45,410
‫ซึ่งมีคุณสมบัติเหล่านั้นที่ด้านขวาบนหรือด้านขวาด้วย

93
00:07:45,410 --> 00:07:50,840
‫อย่างที่คุณเห็น มีคุณสมบัติมากมายสำหรับปุ่มของเรา ตัวอย่างเช่น หรือสำหรับกล่องรายการของเรา ยังมีคุณสมบัติมากมาย

94
00:07:50,840 --> 00:07:55,250
‫และแม้กระทั่งบอกค่าทั้งหมดของคุณสมบัติเหล่านั้นให้ฉันทราบ

95
00:07:55,250 --> 00:07:57,140
‫และเราไม่ได้ตั้งค่าใด ๆ เลย

96
00:07:57,140 --> 00:07:59,870
‫ดียกเว้นระยะขอบอาจจะ

97
00:07:59,870 --> 00:08:02,450
‫แต่นอกเหนือจากนั้น ไม่มีอะไรที่เราตั้งไว้

98
00:08:02,450 --> 00:08:04,670
‫และอย่างที่คุณเห็น พื้นหลังเป็นสีขาว

99
00:08:04,670 --> 00:08:05,480
‫นั่นเป็นสิ่งที่ดีเสมอ

100
00:08:05,480 --> 00:08:08,120
‫ดังนั้นเราจึงสามารถเปลี่ยนสิ่งนั้นในรหัสได้เช่นกัน

101
00:08:08,300 --> 00:08:13,280
‫และอีกอย่าง สิ่งที่สำคัญในตอนนี้คือแผนผังภาพของเรา

102
00:08:13,280 --> 00:08:17,750
‫และคุณเห็นบางแง่มุมของต้นไม้เชิงตรรกะของเราที่นี่เช่นกัน

103
00:08:17,750 --> 00:08:25,070
‫ตัวอย่างเช่น คุณสามารถเห็นหน้าต่างหลัก จากนั้นคุณจะเห็นแผงสแต็ก และคุณจะเห็นกล่องรายการบล็อกข้อความและปุ่ม

104
00:08:25,880 --> 00:08:26,990
‫แต่มีมากขึ้น

105
00:08:27,020 --> 00:08:32,510
‫อย่างที่คุณเห็น หน้าต่างหลักมีเส้นขอบ ซึ่งเราไม่เห็นในทรีลอจิก แต่มีต้นไม้แต่ละต้น

106
00:08:32,510 --> 00:08:39,620
‫จากนั้นจะมีมัณฑนากรผู้บริจาค ผู้นำเสนอเนื้อหาซึ่งแสดงเนื้อหาจริง ๆ แล้วซึ่งก็คือแผงสแต็ก

107
00:08:39,620 --> 00:08:47,390
‫และแผงสแต็กอีกครั้งมีบล็อกข้อความ กล่องรายการที่มีเส้นขอบ จากนั้นกล่องนี้มีมุมมองแบบเลื่อน

108
00:08:47,390 --> 00:08:54,200
‫ดังนั้นหากมีองค์ประกอบมากเกินไปที่จะแสดงในความสูงที่มีอยู่ ก็จะสามารถเลื่อนได้

109
00:08:54,200 --> 00:09:06,800
‫จากนั้นจะมีกริดในนั้นซึ่งมีสี่เหลี่ยมผืนผ้าและตัวนำเสนอเนื้อหาแบบเลื่อนซึ่งมีตัวนำเสนอรายการที่แสดงภาพแผงสแต็ก

110
00:09:06,800 --> 00:09:14,120
‫จากนั้นในนั้นเราจะพบรายการกล่องรายการหนึ่งซึ่งมีเส้นขอบอีกครั้งซึ่งมีผู้นำเสนอเนื้อหา

111
00:09:14,120 --> 00:09:16,010
‫และในที่สุด เราก็สามารถหาบล็อคข้อความได้

112
00:09:16,010 --> 00:09:21,050
‫คุณจะเห็นว่าเป็นต้นไม้ที่ยาวมากที่นี่ มีหลายกิ่งมาก

113
00:09:21,050 --> 00:09:30,440
‫แต่สุดท้ายแล้ว สิ่งที่คุณจะพบก็คือองค์ประกอบต่างๆ ที่มองเห็นได้ในโปรแกรมของคุณ

114
00:09:31,170 --> 00:09:41,630
‫และนี่จะมีประโยชน์มากหากคุณต้องการทราบเพิ่มเติมเกี่ยวกับสิ่งที่เป็นตัวแทนหรือใช้ในโปรแกรมของคุณโดยทั่วไปและสิ่งที่คุณได้เพิ่มลงในโปรแกรมของคุณ

115
00:09:41,640 --> 00:09:46,380
‫แต่โดยทั่วไป นั่นเป็นวิธีที่คุณจะค้นพบทุกสิ่งเกี่ยวกับแผนผังภาพได้

116
00:09:46,380 --> 00:09:52,200
‫และอย่างที่คุณเห็น เรามีกริดในกล่องรายการ ซึ่งเราไม่ได้ตั้งค่าเอง แต่มันอยู่ที่นั่น

117
00:09:52,200 --> 00:09:53,420
‫ใช่ไหม

118
00:09:53,490 --> 00:09:58,200
‫และถ้าคุณคลิกที่เส้นตารางนั้น คุณจะพบคุณสมบัติของเส้นตารางนั้นทางด้านขวามือ

119
00:09:59,160 --> 00:09:59,910
‫โอเคค่ะ.

120
00:09:59,910 --> 00:10:05,070
‫นั่นก็ค่อนข้างจะเป็นไปได้สำหรับแผนผังการมองเห็น ต้นไม้เชิงตรรกะ

121
00:10:05,070 --> 00:10:06,840
‫เราได้ใช้แผงสแต็กและกล่องรายการ

122
00:10:06,840 --> 00:10:09,330
‫เราจะใช้แผงเทคโนโลยีมากขึ้นในอนาคต

123
00:10:09,480 --> 00:10:11,160
‫ดังนั้นจงชินกับสิ่งนั้น

124
00:10:11,160 --> 00:10:14,670
‫และใช่ ในวิดีโอหน้า เราจะตรวจสอบเหตุการณ์

125
00:10:14,670 --> 00:10:15,780
‫แล้วเจอกันนะ