Xamarin Form How to use OnIdiom

ในบางครั้ง เราพัฒนาแอปพลิเคชันมาสำหรับจอโทรศัพท์และมันสวยเพอเฟคมากมาย และเราพอใจแล้ว แต่เมื่อเราเอาไปที่ Tablet มันกลับไม่สวยและออกมายืดบ้าง เล็กบ้าง วันนี้ผมจะมาสอนวิธีใช้ขั้นพื้นๆที่สุด เพราะผมก็ใช้ได้ไม่เยอะเท่าไหร่กับตัวนี้ แต่มันคือส่วนสำคัญในการจัดการกับโทรศัพท์ที่มีขนาดไม่เท่ากันให้เข้ากับแอปเราได้

<Grid.RowDefinitions>
 <RowDefinition>
  <RowDefinition.Height>
   <OnIdiom
       Phone="*"
       Tablet="2*"/>
  </RowDefinition.Height>
 </RowDefinition>
 <RowDefinition Height="*" />
 <RowDefinition Height="200" />
</Grid.RowDefinitions>

จากโค๊ดด้านบนผมจะยกตัวอย่างที่ใช้กับ Grid โดยผมใช้กับ Row อันแรกให้ใช้ค่า Height เป็น * เมื่อเปิดแอปนี้บน Phone และเมื่อเปิดที่ Tablet จะใช้เป็น 2* นั่นเอง

ใน iPhone 8 Plus

และใน iPad Pro 12.9 นิ้ว

จะเห็นว่า Row บนสุดใน iPhone จะมีขนาดเท่ากันทุก Row แต่ใน iPad ซึ่งเป็น Tablet จะมีขนาดเป็นสองเท่าของ Row ตัวที่ 2 สีเหลืองตามที่ OnIdiom เรากำหนดใว้

และเรายังสามารถใช้กับค่าอื่นๆได้อีกด้วยเช่น Margin หรือ Padding

Margin

<Grid>
 <Grid.Margin>
  <OnIdiom
     Phone="0,20,0,0"
     Tablet="0,40,0,0"/>
  </Grid.Margin>
  . . .

Padding

<Grid>
 <Grid.Margin>
  <OnIdiom
     Phone="0,20,0,0"
     Tablet="0,40,0,0"/>
 </Grid.Margin>
. . .

ref: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/device