‫ยินดีต้อนรับกลับ.
‫ในที่สุดก็ถึงเวลาใช้กริด
‫และคุณเคยเห็นวิธีการใช้สแต็คพาเนลมาก่อนและแร็คพาเนลและทุกวันนี้ถูกเรียงซ้อนและห่อหุ้มไว้อย่างดี
‫และตอนนี้เราจะตรวจสอบตารางซึ่งช่วยให้เราสามารถวางตำแหน่งสิ่งต่าง ๆ ในตารางและเราจะเริ่มต้นด้วยการใช้ตารางสองครั้งสองครั้ง
‫อย่างแรกเลย สิ่งที่เราต้องการสำหรับสิ่งนั้นคือการกำหนดคอลัมน์และแถว เพื่อให้เราสามารถดำเนินการต่อและภายในตารางของเราได้
‫ไปที่ไฟล์ตัวอย่างของคุณ จากนั้นภายในกริด ให้สร้างคำนิยามคอลัมน์กริดดอท
‫และที่นี่ คุณสามารถกำหนดคอลัมน์ต่างๆ ของคุณได้
‫อย่างแรกเลย คุณต้องมีคำจำกัดความคอลัมน์ พหูพจน์ จากนั้นคุณสามารถสร้างคำจำกัดความคอลัมน์แต่ละคอลัมน์ได้
‫ตัวอย่างเช่น คุณสามารถดำเนินการต่อและสร้างที่นี่
‫ฉันจะทำให้มันง่ายในบรรทัดเดียวแบบนั้น
‫และสิ่งที่ผมอยากให้คำจำกัดความในที่นี้คือ ความกว้างและความกว้าง
‫สมมุติว่าใส่เป็น 100 แล้วสร้างอีกคอลัมน์หนึ่ง ซึ่งจะกว้าง
‫100 ด้วย
‫ตอนนี้ไม่เพียงพอ
‫เราจำเป็นต้องมีแถวด้วย ยกเว้นเราต้องการให้มีแถวเดียวเท่านั้น
‫เริ่มจากแถวเดียวเท่านั้น และฉันแค่จะสร้างปุ่มขึ้นมาก่อน
‫และปุ่มนี้กำลังจะพูดประมาณว่า สวัสดี และควรอยู่ในคอลัมน์จุดตารางจุดศูนย์
‫และตอนนี้ฉันสร้างปุ่มที่สอง ซึ่งควรเป็นตาราง คอลัมน์นั้น
‫ทีนี้ถ้าเราดูการออกแบบของเราตอนนี้ เราจะเห็นว่าเรามีปุ่มสองปุ่ม
‫สวัสดี.
‫เรียกใช้โค้ดของเราเพื่อดูว่ามีลักษณะอย่างไร
‫อย่างไรก็ตาม มันมีความกว้างเพียง 100 พิกเซล อย่างที่คุณเห็นที่นี่ ดังนั้นความกว้างจึงถูกจำกัดที่ 100 พิกเซล
‫ดังนั้น หากคุณเพิ่มมูลค่ารวมที่นี่ ก็จะใช้เป็นพิกเซลในความกว้าง
‫อย่างที่คุณเห็นที่นี่ นั่นคือความกว้างของคอลัมน์
‫และแน่นอน เราสามารถพูดได้ว่าเราสามารถใส่คอลัมน์เพิ่มเติมที่นี่ได้ง่ายๆ
‫เราทำได้ แล้วเราจะทำทีหลัง
‫แต่ก่อนที่เราจะทำอย่างนั้น ฉันอยากจะแสดงให้คุณเห็นสิ่งที่สำคัญมาก
‫ดังนั้น ถ้าฉันลาก XAML ขึ้นมาที่นี่ มันจะมีประโยชน์จริง ๆ เพราะเราจะเห็นความแตกต่างใน UI ของเราโดยตรง
‫และฉันต้องการเปลี่ยนความกว้างจาก 100 เป็นอัตโนมัติ
‫และอย่างที่คุณเห็น สิ่งที่รถยนต์ทำ
‫จะใช้เฉพาะความกว้างที่จำเป็นเพื่อให้พอดีกับเนื้อหาทั้งหมดที่มีอยู่ภายในองค์ประกอบเท่านั้น
‫ดังนั้น ในกรณีของเรา ปุ่มมีข้อความที่เรียกว่า สวัสดี และนั่นคือจำนวนพื้นที่ที่ต้องการหรือต้องการของ
‫hi
‫และนั่นคือความกว้างของปุ่มของเราด้วย
‫และอย่างที่คุณเห็น มันเป็นสำหรับคำนิยามคอลัมน์แรก
‫ดังนั้นคำนิยามคอลัมน์แรกที่ปุ่มของเรามี สวัสดี นั่นคือวิธีที่หรือนั่นคือปุ่มที่เปลี่ยนไป
‫อย่างที่คุณเห็นตอนนี้มันเปลี่ยนเป็น 59 5 พิกเซล
‫ถ้าฉันเพิ่มข้อความ อีกสักข้อความ คุณจะเห็นว่ามันขยายเป็น 153 5 พิกเซล
‫ดังนั้นคุณจึงใช้ระบบอัตโนมัติได้อย่างง่ายดายหากต้องการให้ทุกอย่างเข้าที่พอดีโดยอิงจากพื้นที่ที่ต้องการจริงๆ
‫แต่ถ้าฉันต้องการทำให้คอลัมน์มีความกว้างเท่ากันทุกประการล่ะ
‫แน่นอน ฉันสามารถใช้ค่าเต็มที่นี่หรือค่าคงที่ที่นี่ก็ได้ แต่ฉันสามารถใช้ดาวได้เช่นกัน
‫และสิ่งที่ดาวจะทำคือ ถ้าทั้งหมดมีดาว มันก็จะพูดว่า โอเค ใช้พื้นที่ทั้งหมด
‫และในกรณีนี้ เฉพาะพื้นที่ว่างที่คอลัมน์นี้มีเท่านั้น และเหมือนกับคอลัมน์อื่นๆ
‫ทุกประการ
‫ตอนนี้มีการถ่วงน้ำหนัก
‫นี่จึงมีน้ำหนักหนึ่งและอันหนึ่งก็มีน้ำหนักหนึ่งเช่นกัน
‫จึงมีน้ำหนักเท่ากัน ซึ่งหมายความว่ามีความกว้างเท่ากัน
‫หากเราต้องการเปลี่ยนสิ่งนั้น สมมติว่าฉันต้องการสร้างอันที่สองที่นี่ ปุ่มที่สองกว้างเป็นสองเท่าของอันแรก
‫ฉันสามารถใช้ดาวคู่ได้
‫ตอนนี้อันนี้จะกว้างเป็นสองเท่าของอันแรก
‫ตัวอย่างเช่น ถ้าฉันต้องการให้สามในห้าอยู่ทางซ้ายมือ และ 2/5 ทางขวามือเป็นความกว้าง
‫ฉันสามารถใช้วิธีนี้ได้ อย่างที่คุณเห็นที่นี่
‫ดังนั้นสามเท่าของดาวและสองเท่าของดาว
‫แล้วมันทำอะไร มันรวมทั้งหมดเข้าด้วยกัน แล้วใช้เวลาเพียงไม่กี่วินาทีของการตั้งค่าที่นี่
‫สมมุติว่าเรามีสามกับสอง
‫มันทำอะไรได้บ้าง มันบอกว่า โอเค ตอนนี้มีทั้งหมดห้าแล้ว
‫หน่วยที่มีอยู่ และฉันจะเอา 3/5 ของหน่วยเหล่านั้น
‫ตอนนี้คุณสามารถทำบางอย่างเช่น 100
‫คุณจะเห็นว่าอันนี้ใช้ 100
‫และนี่ใช้เวลาเพียงสอง
‫นั่นคือวิธีที่คุณสามารถเล่นกับความกว้างได้
‫และความสูงก็เช่นเดียวกัน
‫ตอนนี้ ไปข้างหน้าและสร้างการกำหนดแถว
‫ดังนั้นคำจำกัดความของแถวจุดกริด
‫และในนี้ เราสามารถดำเนินการต่อและสร้างคำจำกัดความแถวของเราได้
‫อันแรก, และผมจะทำให้มันง่ายเหมือนกัน, เหมือนในแถวเดียว.
‫และอันนี้ต้องการความสูง
‫ผมก็เลยจะบอกว่า โอเค ผมอยากได้ความสูงของดาว
‫และตอนนี้เราใช้สิ่งเดิมอีกครั้งสำหรับแถวที่สอง
‫และอย่างที่คุณเห็นตอนนี้ เรามีสองแถว
‫หนึ่งที่นี่และอันที่สองที่ด้านล่าง
‫และอย่างที่คุณเห็น แถวที่สองยังไม่มีเนื้อหาใดๆ
‫ตอนนี้ เรามาเปลี่ยนสิ่งนั้นโดย อย่างแรกเลย วางปุ่มนี้ไว้ด้านล่าง
‫ถูกต้อง.
‫และเราจะทำอย่างนั้นได้อย่างไร?
‫เราก็ใช้ grid dot row และเราบอกว่ามันอยู่ที่แถวที่หนึ่ง
‫ตอนนี้คุณอาจสงสัยว่าทำไมมันถึงเป็นอย่างนั้น?
‫ทำไมไม่เป็นสอง
‫อย่างที่คุณคงทราบอยู่แล้วในการเขียนโปรแกรม เราเริ่มนับด้วยศูนย์
‫แถวแรกเป็นศูนย์ แถวที่สองเป็นแถวเดียว
‫ตอนนี้สูงมีแถวที่สอง ซึ่งก็คือแถวที่หนึ่ง
‫ตอนนี้ ไปข้างหน้า และสร้างปุ่มอีกสองปุ่ม และอาจเปลี่ยนชื่อเป็นบางอย่างที่จะพูดเกี่ยวกับข้อมูลจริงของพวกเขามากขึ้น
‫ผมจะใส่มันลงในคอลัมน์ศูนย์ในแถวที่ 1 และอันนั้นที่จริง ผมจะใส่มันกลับไปที่ศูนย์
‫1 และอันนั้นจะอยู่ที่หนึ่ง และที่จริงแล้ว จะเป็นคอลัมน์ที่หนึ่งและแถวศูนย์แบบ นั่น.
‫ตอนนี้เรามีปุ่มทั้งหมดแล้ว และปุ่มนั้นจะเป็นปุ่มเดียว
‫อันนั้นจะเป็นปุ่มที่สอง ปุ่มสาม และปุ่มสี่
‫ยอดเยี่ยม.
‫ทีนี้ถ้าเราเริ่มอย่างนั้น คุณจะเห็นว่า
‫มันก็นับเช่นกันสำหรับ UI เอง
‫ดังนั้น หนึ่ง สอง สาม สี่
‫ไม่เป็นไร.
‫ตอนนี้เป็นความท้าทายเล็กน้อยสำหรับคุณเมื่อคุณได้เห็นวิธีใช้คอลัมน์และแถวของตารางแล้ว
‫โปรดไปข้างหน้าและสร้างตารางสามครั้งสามครั้งที่นี่ด้วยปุ่มแปดปุ่ม
‫ดังนั้น 1 ถึง 8 ควรเป็นปุ่มและตำแหน่งที่เก้า
‫ดังนั้นตำแหน่งหรือองค์ประกอบตารางด้านล่างขวาควรเป็นบล็อกข้อความ
‫ดังนั้นโปรดหยุดวิดีโอชั่วคราวแล้วลองทำดู
‫ไม่เป็นไร.
‫ฉันหวังว่าคุณจะลอง
‫สิ่งที่ผมจะทำคือ ผมจะเพิ่มอีกคอลัมน์โดยการเพิ่มนิยามคอลัมน์ตรงนี้, มันจะมีความกว้างเท่ากัน
‫และความสูงเท่ากัน
‫มันจะสูงเท่ากัน
‫และตอนนี้ อย่างที่คุณเห็น ปุ่มต่างๆ มันดูแปลกๆ ไปหน่อย
‫แต่นั่นเป็นเพียงเพราะฉันไม่มี
‫ซูมออกยัง
‫ดังนั้นตอนนี้เราสามารถเห็นได้อย่างถูกต้อง
‫ตอนนี้เรามีปุ่มของเราที่มีศูนย์หนึ่งและอื่นๆ
‫ผมจะคัดลอกปุ่มนั้นตรงนี้ และจัดตำแหน่งไว้ที่คอลัมน์ที่สอง
‫ดังนั้นแถวศูนย์และคอลัมน์ที่สอง
‫ในตอนนี้ คุณสามารถโต้แย้งได้ว่าการเริ่มด้วยแถวนั้นแล้วเข้าสู่คอลัมน์นั้นเหมาะสมกว่า
‫คุณก็ทำได้ แต่ในกรณีของฉัน มันเป็นอีกทางหนึ่ง
‫สุดท้ายสิ่งสำคัญคือคุณใช้ทั้งสองอย่างถูกต้อง
‫ตอนนี้เรามีปุ่มสามปุ่มที่ด้านบน
‫ตอนนี้ ไปข้างหน้าและสร้างแถวที่สองหรือจบแถวที่สอง
‫และนั่นคือคอลัมน์ที่สอง
‫และผมจะคัดลอกสามครั้ง ที่จริง สองครั้งก็พอ
‫และอันนั้นจะเป็นแถวต่อตำแหน่งศูนย์และแถวที่สอง ตำแหน่งหนึ่งหรือคอลัมน์หนึ่ง
‫แน่นอนว่าเราต้องเปลี่ยนค่า
‫หนึ่ง สอง สาม สี่ ห้า หก เจ็ด และแปด
‫และอย่างที่บอก ที่ด้านล่างซ้าย ฉันต้องการบล็อกข้อความ
‫ดังนั้นบล็อกข้อความจึงมีแนวทางเดียวกันกับกริด
‫คุณต้องมีคอลัมน์และแถว
‫ผมก็จะบอกว่านี่จะเป็นคอลัมน์ที่สองและตารางแถวที่สองด้วย
‫ตอนนี้เราอยู่ที่ด้านล่าง ซ้ายหรือล่าง ตอนนี้เราสามารถไปข้างหน้าและเขียนข้อความ
‫และฉันจะพูดบางอย่างเช่นข้อความ
‫ตอนนี้คุณอาจจะพูดว่า โอ้ ฉันไม่ชอบมัน
‫ข้อความอยู่ด้านบนซ้าย
‫คุณสามารถเปลี่ยนได้อย่างง่ายดายโดยป้อนบางอย่างเช่นการจัดตำแหน่งแนวนอนและใช้ศูนย์ที่นี่
‫ตอนนี้มันอยู่กึ่งกลางในแนวนอน
‫ซูมให้เห็นกันชัดๆไปเลย
‫ไม่เป็นไร.
‫และตอนนี้ ถ้าฉันต้องการจัดกึ่งกลางในแนวตั้งด้วย ฉันเพียงแค่ใช้การจัดแนวแนวตั้ง และใช้ศูนย์กลางที่นี่เช่นกัน
‫อย่างที่คุณเห็น ปุ่มอยู่ตรงกลางอย่างสมบูรณ์ และเราสามารถเปลี่ยนขนาดแบบอักษรได้
‫เพียงเพราะเราทำได้ และทำให้ใหญ่ขึ้นเล็กน้อย เช่น 32
‫และตอนนี้ คุณจะเห็นได้ว่าเรามีตาราง 3 คูณ 3 ที่มีปุ่มแปดปุ่มและข้อความหนึ่งข้อความ
‫ตอนนี้คุณสามารถไปข้างหน้าและจัดองค์ประกอบประเภทต่างๆ ทั้งหมดในหน้าต่างของคุณที่นี่ในหน้าต่างหลักและกริดของคุณ
‫นั่นคือความสวยงามของการใช้กริด
‫และอย่างที่คุณเห็น คุณสามารถซ้อนสิ่งของได้
‫คุณสามารถสร้างแผงสแต็กที่มีหลายกริด และนอกจากนี้ คุณยังมีข้อความอยู่ระหว่างหรืออะไรทำนองนั้น
‫ดังนั้นคุณจึงไม่จำกัดการใช้องค์ประกอบเดียวที่นี่
‫อย่างที่คุณเห็น เราสามารถไปข้างหน้าและสมมติว่าใส่ลงในแผงสแต็ก
‫แผงสแต็คแบบนั้น
‫ผมจะลากเส้นกริด
‫อย่างที่คุณเห็นตอนนี้มันกำลังบ่นเพราะตัวอย่างหน้าต่าง หน้าต่างหลัก รู้แค่อันแรกเท่านั้น
‫ดังนั้นมันจะเห็นพาเนล STACK ก็ต่อเมื่อเราตรวจสอบรูปลักษณ์ของเราแล้ว
‫อันที่จริง หยุดกันก่อนเถอะ จะได้เห็นว่ามันเขียนว่ามาร์กอัปไม่ถูกต้อง
‫ดังนั้นหากเรานำกริดทั้งหมดมาไว้ในแผงสแต็คของเรา อย่างที่คุณเห็น มันอยู่ตรงนั้นและเป็นข้อความ
‫ที่ด้านล่างจึงมีพื้นที่เหลือเฟือ
‫ตรงนี้เราสามารถเพิ่มอีกปุ่มหนึ่ง คุณจะเห็นว่านี่เป็นไปได้
‫และปุ่มนี้จะมีความสูง 100
‫และตอนนี้ อย่างที่คุณเห็น มันวางซ้อนกันอยู่ด้านบนสุด
‫และถึงแม้เราจะมีความสูงเท่าๆ กัน แต่ข้อความนี้ต้องการพื้นที่มากจนไม่สนใจ
‫ขนาดตัวอักษรจึงใหญ่เกินไป
‫ถ้าเราย้อนกลับไปที่ 16 ก็ยังใหญ่เกินไป
‫ถ้าเราไปสมมุติว่า 12 ตอนนี้มันดูเหมือนมากกว่า
‫ดังนั้นเมื่อใดก็ตามที่คุณใช้คำจำกัดความแถวกับดาวดวงนี้ คุณต้องระมัดระวัง
‫หากองค์ประกอบต้องการพื้นที่มากกว่าที่เป็นอยู่ องค์ประกอบนั้นจะล้น
‫ไม่เป็นไร.
‫นั่นคือสองกริด
‫ฉันจะกลับไปที่ตารางมาตรฐานที่สวยงามที่เรามีอยู่
‫โดยทั่วไปแล้ว สิ่งที่ผมแนะนำเสมอหลังจากที่คุณได้เห็นอะไรแบบนั้น และหลังจากที่คุณได้เรียนรู้อะไรแบบนั้นแล้ว
‫โปรดลองเล่นดู
‫เพียงแค่เล่นกับองค์ประกอบบางประเภท
‫คุณเคยเห็นมาแล้ว และเราจะตรวจสอบการควบคุมเพิ่มเติมในภายหลัง
‫สิ่งที่เราเคยใช้มาจนถึงตอนนี้คือปุ่ม ด้านขวา และบล็อกข้อความเป็นหลัก แต่เราจะใช้การควบคุมที่สวยงามที่แตกต่างกันในวิดีโอหน้า
‫แล้วเจอกันนะ