Xamarin Form how to use OnPlatform
เราได้ลองใช้ OnIdiom กันแล้ว ทีนี้เราจะมารู้จักกับ OnPlatform กันบ้างครับ ในเมื่อเราสามารถแบ่งขนาดของจอได้แล้ว ต่อมาถ้าเราจะแบ่ง Platform หล่ะ เราจะทำอย่างไร เราอยากให้ Android มีขนาดเท่านี้ แต่ว่าใน iOS มีอีกขนาดที่แตกต่างหล่ะ วันนี้เราจะให้ OnPlatform มาช่วย
เรามาเริ่มจากโค๊ดง่ายๆ ตั้งแต่ที่เราสร้างโปรเจคกันเลยคับ โดยโค๊ดที่ผมจะใช้ก็ไม่ซับซ้อนอะไรมีดังนี้คับ
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Tutorial"
x:Class="Tutorial.MainPage">
<ContentPage.Content>
<Label Text="Hello World"/>
</ContentPage.Content>
</ContentPage>ถ้าใครเคยเขียนมาก่อนแล้วจะรู้เลยว่าโค๊ดนี้จะออกมาหน้าตาอย่างไรเรามาชมใน Android เครื่อง Galaxy Tab A กันคับ
เป็นไงคับ มันแค่แสดง Text ว่า Hello World อยู่ด้านบนสุดของจอปกติง่ายๆ แล้วทีนี้เรามาดูใน iOS เครื่อง iPad Pro 12.9 นิ้ว กันบ้าง
มันทับกับแถบด้านบนเฉยเลย ทั้งๆที่เป็นโค๊ดเดียวกัน ถ้าเป็นเมื่อก่อน iOS เวอร์ชั่นเก่าๆ มันยังหลบแถบด้านบนให้นะครับ แล้วเราจะแก้ไขอย่างไรหล่ะ
วิธีแก้ไขก็มีหลายวิธีเอามากๆเช่นกันคับ แต่ผมจะยกวิธีที่พื้นๆมาวิธีที่เค้าใช้กันมากที่สุดจากที่ผมค้นหาสืบค้นมา นั่นก็คือการสร้าง ContentView ครอบข้อมูลหน้านั้นก่อนแล้วจึงใส่ Margin ให้มันกันเขตจากด้านบนลงมา 20 หน่วย จะได้โค๊ดแบบนี้
<ContentPage.Content>
<ContentView Margin="0,20,0,0">
<Label Text="Hello World"/>
</ContentView>
</ContentPage.Content>เรามาชมผลที่ได้กันครับเริ่มจากใน iPad Pro 12.9 นิ้ว
มันช่างสวยงามพอดีมากครับ แต่ใน Android หล่ะ
มันก็สวยปกติดีไม่ได้ปิดบังอะไร แต่มันใช่เหรอคับ ผมว่าไม่ใช่ ดังนั้น OnPlatform จึงจะมาช่วยตรงนี้ครับ เรามาแก้ไขโค๊ดให้ได้แบบนี้แล้วลอง Run ได้เลยครับ
<ContentView>
<ContentView.Margin>
<OnPlatform x:TypeArguments="Thickness"
Android="0,0,0,0"
iOS="0,20,0,0"/>
</ContentView.Margin>
<Label Text="Hello World"/>
</ContentView>โดย x:TypeArguments จะต้องกำหนดให้ตรงกับประเภทตัวแรปของ property นั้นๆ ในที่นี้ สำหรับ Margin คือ Thickness และเราได้กำหนดให้ใน Android ไม่ต้องเว้นช่องว่างเลย ยกเว้นใน iOS ที่ให้เว้นจากด้านบนลงมา 20 หน่วยเท่านั้นเอง
