Xamarin Form PushModalAsync

สวัสดีคนอ่านทุกคนวันนี้เราจะมารู้จักกับ Modal Pages กันบ้างนะครับ แต่สำหรับคนที่เพิ่งผ่านเข้ามาผมแนะนำให้ไปรู้จักกับ Navigation Page แบบ Hierarchical Navigation ก่อนจะมารู้จักกับ Modal Page กันคับ

Modal Page ตามชื่อเลยครับ มันก็คือ Modal ที่แสดงขึ้นมาคล้ายๆกับ Dialog ทั่วๆไป แต่แตกต่างตรงที่ ของ Xamarin นั้นมันบังคับมาให้เป็น Modal แบบเต็มจอเท่านั้น และมันยังทำงานได้แบบเดียวกับ หน้า view ธรรมดาๆทั่วไปแบบเป๊ะๆเลย!!!

แต่มันจะมีมาเพื่ออะไรหล่ะมันจะมีมาทำใมในเมื่อการ Push แบบ ธรรมดาๆมันก็ดีอยู่แล้วจะมี PushModalAsync มาทำใมอีก วันนี้เราจะมาทำความเข้าใจมันคับ

เนื่องจากบน iOS นั้น การทำ view จำพวก Popover หรือ Dialog นั้นจะยังไม่ค่อยปรับแต่งอะไรได้ และยังจำกัดค่อนข้างมากไม่เหมือนกับ Android ที่เราสามารถ Custom ให้ Dialog ต่างๆมี Controls อะไรก็ได้ตามใจชอบ ทำให้ Xamarin Form เกิด Modal View ที่ดูเต็มจอขึ้นมา อารมณ์ประมาณว่า Merge ความสามารถของทั้ง iOS และ Android ที่มีเหมือนกันให้มาอยู่ที่เดียวกัน ใน Xamarin Form จึงเกิดเป็น Modal ที่บังคับเต็มจอนั่นเอง

Which to use?

อ่าวถ้าเกิดมันเหมือนกัน เราจะใช้อะไรหล่ะระหว่าง PushAsync กับ PushModalAsync จะใช้อะไรดี เราจะต้องมาดูความต่างของแต่ละแบบ

PushAsync นั้นจะเป็นควบคุมหน้า View ในแบบ Hierarchical Navigation นั้นจะเหมาะกับการแสดง view ที่มี Step หรือ ต้องการให้ผู้ใช้ดูแต่ละหน้าอย่างเป็น Step ไม่ข้ามไปมา และผู้ใช้ยังสามารถกดไปกลับได้ตลอดเวลา

PushModalAsync นั้นจะสร้าง Modal ขึ้นมาและจำไม่สามารถกด Back หรือถอยหลังได้เพราะมันไม่มีปุ่มให้กด(ยกเว้น Android ผู้พัฒนาจะต้องสร้างและดักทางเอาเอง) เหมาะกับ Form ที่ต้องการให้ผู้ใช้กรอกให้ครบก่อนที่จะไปหน้าอื่น มันจำไม่ทำให้ผู้ใช้ต้องมางงว่า เห้ย หน้านี้มันกลับมากรอกได้อีกหรือเปล่า หน้านี้มันกดข้ามได้ใช่ใหม เพราะว่ามันเป็น Modal ที่มีเฉพาะปุ่มที่ผู้พัฒนาสร้างขึ้นมาเท่านั้น(กด Back ไม่ได้) ก็จะดีที่ผู้ใช้จะได้รู้ว่า ต้องกรอกให้หมด กด Save หรือ Submit หรือจะกด Cancel ค่อยไปหน้าอื่น

และความต่างอีกอย่างของ PushAsync กับ PushModalAsync นั้นก็คือ เมื่อเรา Pop หน้าออก ซึ่งทั้งสองนี้จะใช้ PopAsync หรือ PopModalAsync เหมือนๆกัน แต่สำหรับ PushAsync นั้นจะมี PopToRootAsync ที่สามารถปิดทั้งหน้าที่กดเปิดมาจนถึงหน้า Root ได้นั่นเอง

ref: http://blog.adamkemp.com/2014/09/navigation-in-xamarinforms_2.html

ref: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/modal

ref: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/