‫ยินดีต้อนรับกลับ.
‫ในวิดีโอนี้ เราจะพูดถึง stack, panel list, box, then the logical tree and visual
‫tree.
‫ก่อนอื่น มากำจัดกริดนี้กันก่อน เพราะเรายังไม่ได้แตะกริด เราจึงใช้กริดไม่ถูกต้อง
‫แต่เราจะทำในวิดีโอถัดไป
‫แทนที่จะใช้กริด ฉันต้องการใช้แผงสแต็ก
‫แผงสแต็กช่วยให้ฉันสามารถซ้อนองค์ประกอบที่ด้านบนของกันและกันได้ ดังนั้นฉันสามารถดำเนินการต่อและเพิ่มบล็อกข้อความในที่นี่ได้
‫เป็นต้น
‫และฉันจะเขียนข้อความเช่น สวัสดีชาวโลก ข้อความธรรมดา
‫และอย่างที่คุณเห็น มีข้อความ Hello World ของฉัน
‫ตอนนี้ สิ่งที่ฉันต้องการทำคือ ฉันต้องการจัดแนวมัน ดังนั้นการจัดแนวตามแนวนอน ฉันจะใช้ศูนย์กลางที่นี่
‫ตอนนี้ฉันกำลังจัดข้อความให้อยู่ตรงกลางดังที่คุณเห็นที่นี่
‫ตอนนี้ข้อความอยู่กึ่งกลางและอาจเพิ่มระยะขอบเล็กน้อยในทุกทิศทาง ซึ่งก็คือ 20
‫อย่างที่คุณเห็น ฉันกำลังใช้ระยะขอบและแค่พูดว่า 20 ซึ่งจะเป็นหรือจะสร้างระยะขอบไปทางทั้งสี่ทิศทางเป็น
‫20 พิกเซล
‫สิ่งต่อไปคือกล่องรายการ และฉันต้องการใช้กล่องรายการเพื่อให้คุณเห็นว่ากล่องรายการเป็นอย่างไร
‫ดังนั้นกล่องรายการที่นี่ในขณะนี้จึงว่างเปล่า แต่เราสามารถเปลี่ยนได้อย่างง่ายดายโดยการสร้างรายการในกล่องรายการในนั้น
‫ไปข้างหน้าและสร้างรายการกล่องรายการ
‫และรายการนั้นควรมีเนื้อหาว่าเนื้อหาเท่ากับข้อหนึ่ง
‫และตอนนี้ แทนที่จะมีแท็กเปิดและปิด ฉันแค่ต้องการมีเวอร์ชันที่สั้นกว่านี้
‫ดังนั้นฉันจึงใช้ปีที่แล้วและ Visual Studio ก็ฉลาดพอที่จะกำจัดแท็กปิดให้ฉันโดยอัตโนมัติ
‫ตอนนี้กล่องรายการนี้มีรายการนี้ 1 รายการ และฉันจะคัดลอกและวางหลาย ๆ ครั้ง
‫ผมจะได้ข้อ 1 และ 2 และ 3
‫และตอนนี้กล่องรายการนี้ใช้ความกว้างทั้งหมด
‫อย่างที่คุณเห็น มันใช้พาเรนต์ทั้งหมด และสูงหรือสูงเท่าที่จำเป็นเท่านั้น
‫ดังนั้นจึงหมายความว่าต้องใช้พื้นที่มากเท่าที่องค์ประกอบภายในอยู่ในความสูง
‫ค่อนข้างมาก สมมุติว่ารายการหนึ่งและรายการสองและสาม แต่ละรายการมีความสูง 30 พิกเซล
‫ดังนั้นกล่องทั้งหมดนี้จะสูงแค่ 90 พิกเซล
‫แต่เราเปลี่ยนได้โดย สมมุติว่าปรับความสูง
‫และฉันแค่จะใช้ความสูง 100
‫อย่างที่คุณเห็น มันสูงกว่าที่เคยเป็นมาก่อน
‫ตอนนี้เรามาสร้างความกว้างด้วย 100 พิกเซลกัน
‫ตอนนี้คุณจะเห็นว่ากล่องนี้เล็กกว่ามากและใส่ได้พอดี
‫ไม่เป็นไร.
‫ทีนี้ ถ้าผมอยากให้มีระยะขอบในทุกทิศทาง ผมก็สามารถให้องค์ประกอบนี้ในส่วนระยะขอบได้
‫แต่อย่างที่คุณเห็น เนื่องจากบล็อกข้อความ Helloworld นี้มีระยะขอบ 20 ในทุกทิศทาง จึงยังมีระยะห่างระหว่างองค์ประกอบรายการทั้งสองที่นี่หรือระหว่างกล่องรายการและบล็อกข้อความ
‫ทีนี้ ถ้าเรารันโค้ดนั้น เราจะเห็นว่าเรามีหน้าต่างหลักเล็กๆ นี้ ซึ่งสวยงามและมีกล่องรายการพร้อมองค์ประกอบ
‫ดังที่คุณเห็นในที่นี้ สวัสดีชาวโลกที่บล็อกข้อความ และองค์ประกอบรายการเหล่านั้น คุณสามารถคลิกที่พวกมัน
‫คุณสามารถเลือกได้ตามที่เห็น
‫แต่ไม่มีอะไรเกิดขึ้นเพราะเรายังไม่ได้ตรวจสอบกิจกรรมซึ่งเราจะทำในวิดีโอหน้า
‫ดังนั้นฉันจะปิดมันอีกครั้ง
‫ทีนี้มาพูดถึงตรรกะและแผนผังกันอย่างรวดเร็ว
‫สิ่งที่เรามีที่นี่คือต้นไม้ตรรกะ หรือเราสามารถเห็นต้นไม้ตรรกะใน XAML
‫ต้นไม้ตรรกะคือหน้าต่างภายในหน้าต่างนั้น
‫เรามีแผงสแต็ค
‫ด้านในของแผงสแต็คนั้น
‫เรามีกล่องข้อความและกล่องรายการ
‫และภายในกล่องรายการ เรามีกล่องรายการ รายการที่หนึ่ง กล่องรายการ รายการที่สอง และสาม
‫นั่นคือต้นไม้ตรรกะ
‫คุณสวยมากมีหลายสาขา
‫มันลึกลงไปอีก
‫ดังนั้นหน้าต่างจึงมีสาขาของแผงสแต็กซึ่งมีสองสาขา และหนึ่งในนั้นคือ List Box
‫ซึ่งมีสาขาเช่นกัน เป็นต้น
‫อย่างที่ฉันพูดอีกครั้ง นี่คือต้นไม้ตรรกะ
‫ทีนี้มาดูแผนผังภาพกัน เพราะเช่น ถ้าฉัน เพิ่มปุ่มที่นี่ และฉันต้องการสิ่งนั้นในอีกสักครู่
‫ดังนั้นฉันจึงสร้างปุ่มใหม่ โดยให้เนื้อหาของ Click Me
‫และฉันจะเพิ่มวิธีการที่นี่ซึ่งจะถูกเรียกเมื่อใดก็ตามที่มีคนคลิก
‫ฉันกำลังใช้คลิกที่นี่และกำลังสร้างตัวจัดการเหตุการณ์ใหม่
‫และสิ่งที่ทำกับฉัน มันสร้างวิธีการใหม่ที่เรียกว่าการคลิกปุ่ม
‫ถ้าคุณดูที่นี่ เราจะเห็นว่ามีวิธีที่เรียกว่า Button Click ซึ่งมีผู้ส่งอ็อบเจ็กต์และอาร์กิวเมนต์เหตุการณ์ที่กำหนดเส้นทางที่เรียกว่า
‫E
‫ดังนั้นสิ่งที่ทำได้ค่อนข้างมากคือวิธีนี้จะถูกเรียก
‫เมื่อใดก็ตามที่เราคลิกที่ปุ่มและสิ่งที่เรามีในวิธีนี้ ร่างกายจะถูกดำเนินการ
‫สมมติว่าเราใช้กล่องข้อความ ซึ่งเป็นสิ่งที่เรายังไม่ได้ใช้ และเราเรียกวิธีการแสดง
‫เราสามารถแสดงกล่องหรือกล่องจะปรากฏขึ้นเหมือนป๊อปอัปเล็กน้อยซึ่งจะแสดงข้อความให้เราทราบ
‫ดังนั้นบางอย่างเช่น ขอบคุณที่คลิกฉัน และข้อความบอกว่า คลิกฉัน และข้อความที่จะเกิดขึ้นเช่นนี้
‫ขอบคุณสำหรับการคลิกกล่องข้อความจะแสดงสิ่งที่สวยงามเช่นขอบคุณสำหรับการคลิกฉัน
‫ดังที่คุณเห็นปุ่มคลิกฉันนี้อยู่ด้านล่างกล่องรายการของเรา
‫ดังนั้น ได้โปรดไปข้างหน้าและเพิ่มระยะห่างระหว่างพวกเขาเล็กน้อย
‫ไม่เป็นไร.
‫ฉันหวังว่าคุณจะพยายามทำอย่างนั้น
‫และเราสามารถให้ปุ่มของเรามีระยะขอบ และฉันก็แค่ใช้ 20 อีกครั้ง หรือเราอาจให้ช่องรายการของเรามีระยะขอบ
‫แต่การให้ปุ่มมีระยะขอบน่าจะใช้ได้ทั้งหมด
‫ตอนนี้ถ้าเรารันโค้ด เราจะได้ปุ่ม click me ที่สวยงามที่นี่
‫ดังนั้นเราจึงมี Hello world เรามีข้อความและอื่นๆ หรือกล่องรายการ
‫และตอนนี้ถ้าเราคลิกที่ Click Me กล่องข้อความนี้จะปรากฏขึ้นและตรวจสอบ
‫พูดอะไรเช่น ขอบคุณที่คลิกฉัน แล้วเราสามารถคลิกตกลงเพื่อปิดกล่องข้อความนั้นอีกครั้ง
‫เลยมาเปิดดู
‫อย่างที่คุณเห็น คลิกฉัน ขอบคุณที่คลิกฉัน
‫นั่นคือกล่องข้อความ และเราสามารถใช้สิ่งนั้นได้ สมมติว่าเราใช้บรรทัดขวาของคอนโซลในแอปพลิเคชันคอนโซลของเราเพื่อการทดสอบ
‫มันค่อนข้างดีถ้าเราต้องการเปิดบางสิ่งบางอย่างหลังจากเหตุการณ์ เราเพียงแค่เปิดกล่องข้อความเพื่อให้เรารู้ว่า
‫โอเค มันใช้ได้ดี
‫นั่นคือปุ่มและตรรกะที่สามของเรา
‫ตอนนี้เรามาดูที่ภาพต้นไม้กัน
‫ดังนั้นเพื่อให้ได้แผนผังภาพ มีหลายวิธี
‫แต่สิ่งหนึ่งที่ฉันจะใช้คือ ฉันจะเพิ่มจุดตรงนี้ จุดดีบัก
‫ดังนั้นมันจะทำงานในการดีบักเมื่อใดก็ตามที่รันโค้ดบรรทัดนี้
‫ให้ฉันเริ่มรหัสหรือเริ่มโปรแกรมของเรา
‫ตอนนี้ฉันคลิกที่ปุ่มและโปรแกรมของเราหยุดลงและเราเข้าสู่โหมดแก้ไขข้อบกพร่อง
‫จากนั้นฉันสามารถไปที่โปรแกรมสร้างภาพต้นไม้ WPF
‫สิ่งที่ฉันจะทำคือคลิกที่มัน และมันเปิด WPF visualizer ซึ่งมีแผนผังแสดงภาพ
‫ซึ่งมีคุณสมบัติเหล่านั้นที่ด้านขวาบนหรือด้านขวาด้วย
‫อย่างที่คุณเห็น มีคุณสมบัติมากมายสำหรับปุ่มของเรา ตัวอย่างเช่น หรือสำหรับกล่องรายการของเรา ยังมีคุณสมบัติมากมาย
‫และแม้กระทั่งบอกค่าทั้งหมดของคุณสมบัติเหล่านั้นให้ฉันทราบ
‫และเราไม่ได้ตั้งค่าใด ๆ เลย
‫ดียกเว้นระยะขอบอาจจะ
‫แต่นอกเหนือจากนั้น ไม่มีอะไรที่เราตั้งไว้
‫และอย่างที่คุณเห็น พื้นหลังเป็นสีขาว
‫นั่นเป็นสิ่งที่ดีเสมอ
‫ดังนั้นเราจึงสามารถเปลี่ยนสิ่งนั้นในรหัสได้เช่นกัน
‫และอีกอย่าง สิ่งที่สำคัญในตอนนี้คือแผนผังภาพของเรา
‫และคุณเห็นบางแง่มุมของต้นไม้เชิงตรรกะของเราที่นี่เช่นกัน
‫ตัวอย่างเช่น คุณสามารถเห็นหน้าต่างหลัก จากนั้นคุณจะเห็นแผงสแต็ก และคุณจะเห็นกล่องรายการบล็อกข้อความและปุ่ม
‫แต่มีมากขึ้น
‫อย่างที่คุณเห็น หน้าต่างหลักมีเส้นขอบ ซึ่งเราไม่เห็นในทรีลอจิก แต่มีต้นไม้แต่ละต้น
‫จากนั้นจะมีมัณฑนากรผู้บริจาค ผู้นำเสนอเนื้อหาซึ่งแสดงเนื้อหาจริง ๆ แล้วซึ่งก็คือแผงสแต็ก
‫และแผงสแต็กอีกครั้งมีบล็อกข้อความ กล่องรายการที่มีเส้นขอบ จากนั้นกล่องนี้มีมุมมองแบบเลื่อน
‫ดังนั้นหากมีองค์ประกอบมากเกินไปที่จะแสดงในความสูงที่มีอยู่ ก็จะสามารถเลื่อนได้
‫จากนั้นจะมีกริดในนั้นซึ่งมีสี่เหลี่ยมผืนผ้าและตัวนำเสนอเนื้อหาแบบเลื่อนซึ่งมีตัวนำเสนอรายการที่แสดงภาพแผงสแต็ก
‫จากนั้นในนั้นเราจะพบรายการกล่องรายการหนึ่งซึ่งมีเส้นขอบอีกครั้งซึ่งมีผู้นำเสนอเนื้อหา
‫และในที่สุด เราก็สามารถหาบล็อคข้อความได้
‫คุณจะเห็นว่าเป็นต้นไม้ที่ยาวมากที่นี่ มีหลายกิ่งมาก
‫แต่สุดท้ายแล้ว สิ่งที่คุณจะพบก็คือองค์ประกอบต่างๆ ที่มองเห็นได้ในโปรแกรมของคุณ
‫และนี่จะมีประโยชน์มากหากคุณต้องการทราบเพิ่มเติมเกี่ยวกับสิ่งที่เป็นตัวแทนหรือใช้ในโปรแกรมของคุณโดยทั่วไปและสิ่งที่คุณได้เพิ่มลงในโปรแกรมของคุณ
‫แต่โดยทั่วไป นั่นเป็นวิธีที่คุณจะค้นพบทุกสิ่งเกี่ยวกับแผนผังภาพได้
‫และอย่างที่คุณเห็น เรามีกริดในกล่องรายการ ซึ่งเราไม่ได้ตั้งค่าเอง แต่มันอยู่ที่นั่น
‫ใช่ไหม
‫และถ้าคุณคลิกที่เส้นตารางนั้น คุณจะพบคุณสมบัติของเส้นตารางนั้นทางด้านขวามือ
‫โอเคค่ะ.
‫นั่นก็ค่อนข้างจะเป็นไปได้สำหรับแผนผังการมองเห็น ต้นไม้เชิงตรรกะ
‫เราได้ใช้แผงสแต็กและกล่องรายการ
‫เราจะใช้แผงเทคโนโลยีมากขึ้นในอนาคต
‫ดังนั้นจงชินกับสิ่งนั้น
‫และใช่ ในวิดีโอหน้า เราจะตรวจสอบเหตุการณ์
‫แล้วเจอกันนะ