Nilai khusus platform di XAML

  • 5 menit

Pengalaman visual aplikasi Anda akan berbeda di setiap platform. Sering kali, Anda perlu menyempurnakan UI untuk setiap platform berdasarkan elemen visual yang Anda gunakan. .NET MAUI memungkinkan Anda mengelola tata letak aplikasi berdasarkan properti perangkat ini.

Dalam pelajaran ini, Anda akan mempelajari tentang fitur yang disediakan .NET MAUI untuk memungkinkan Anda mengubah UI untuk aplikasi Anda sesuai dengan platform yang mereka jalankan.

Menggunakan kelas Perangkat

Kelas DeviceInfo adalah kelas utilitas yang menyediakan informasi khusus perangkat untuk perangkat yang menjalankan aplikasi Anda. Ini mengekspos informasi ini melalui sekumpulan properti. Properti yang paling penting adalah DeviceInfo.Platform, yang mengembalikan string yang menunjukkan jenis perangkat yang saat ini digunakan: Android, , iOSWinUI, atau macOS.

Pertimbangkan skenario berikut ini sebagai contoh kapan Anda mungkin menggunakan fitur ini. Perilaku default aplikasi .NET MAUI iOS adalah konten yang ditambahkan ke enkroach halaman pada bilah status iOS di bagian atas layar. Anda ingin mengubah perilaku ini. Solusi paling sederhana adalah dengan menggeser konten ke bawah di halaman. Solusi Catatan yang Anda buat dalam latihan sebelumnya mengatasi masalah ini dengan mengatur properti Padding dari kontrol VerticalStackLayout untuk memindahkan konten ke bawah sebanyak 60 poin:

<VerticalStackLayout x:Name="MyStackLayout" Padding="30,60,30,30">
    ...
</VerticalStackLayout>

Masalahnya adalah masalah ini hanya berlaku di iOS. Mengalihkan konten sebanyak ini di Android dan WinUI menghasilkan pemborosan real estat layar di bagian atas halaman.

Anda bisa membuat kueri properti DeviceInfo.Platform untuk mengatasi masalah tampilan ini. Anda dapat menambahkan kode berikut ke konstruktor halaman aplikasi untuk memperluas padding di bagian atas halaman, tetapi hanya untuk iOS:

MyStackLayout.Padding = 
    DeviceInfo.Platform == DevicePlatform.iOS
        ? new Thickness(30, 60, 30, 30) // Shift down by 60 points on iOS only
        : new Thickness(30); // Set the default margin to be 30 points

Catatan

DevicePlatform.iOS adalah DevicePlatform struct yang mengembalikan nilai iOSstring . Ada properti yang setara untuk platform lain yang didukung. Anda harus menggunakan properti ini daripada membandingkan dengan string yang dikodekan secara permanen; ini adalah praktik yang baik, dan ini akan membuktikan kode Anda di masa mendatang jika beberapa nilai string ini berubah di masa mendatang.

Kode ini berfungsi, tetapi ada di file code-behind halaman. Padding adalah nilai khusus antarmuka pengguna. Bisa dibilang, lebih tepat dan mudah untuk melakukannya dari XAML alih-alih dari kode-belakang.

Menggunakan ekstensi markup OnPlatform

.NET MAUI XAML menyediakan OnPlatform ekstensi markup, yang memungkinkan Anda mendeteksi platform runtime dari dalam kode XAML Anda. Anda dapat menerapkan ekstensi markup ini sebagai bagian dari kode XAML yang menetapkan nilai properti. Ekstensi ini mengharuskan Anda untuk menyediakan jenis properti, bersama dengan serangkaian On Platform blok tempat Anda menetapkan nilai properti sesuai dengan platform.

Catatan

Ekstensi OnPlatform markup bersifat umum; dibutuhkan parameter jenis. Jenis TypeArguments atribut yang ditentukan memastikan jenis ekstensi yang benar digunakan.

Anda dapat mengatur properti Padding seperti ini. Perhatikan bahwa jenis properti Padding adalah Thickness:

<VerticalStackLayout>
    <VerticalStackLayout.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="30,60,30,30" />
        </OnPlatform>
    </VerticalStackLayout.Padding>
    <!--XAML for other controls goes here -->
    ...
</VerticalStackLayout>

Untuk platform selain iOS, pengisian akan tetap diatur ke nilai default "0,0,0,0". Untuk WinUI dan Android, Anda dapat mengatur padding ke 30 poin dengan blok tambahan OnPlatform :

<VerticalStackLayout>
    <VerticalStackLayout.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="30,60,30,30" />
            <On Platform="Android" Value="30" />
            <On Platform="WinUI" Value="30" />
        </OnPlatform>
    </VerticalStackLayout.Padding>
    ...
</VerticalStackLayout>

Anda dapat menerapkan teknik yang sama ini ke properti lain. Contoh berikut mengubah warna latar belakang tata letak tumpukan pada halaman menjadi Silver di iOS, menjadi Hijau di Android, dan ke Kuning di Windows.

<VerticalStackLayout>
    ...
    <VerticalStackLayout.BackgroundColor>
        <OnPlatform x:TypeArguments="Color">
            <On Platform="iOS" Value="Silver" />
            <On Platform="Android" Value="Green" />
            <On Platform="WinUI" Value="Yellow" />
        </OnPlatform>
    </VerticalStackLayout.BackgroundColor>
    ...
</VerticalStackLayout>

Sintaks ini sedikit bertele-tele, tetapi ada sintaks disederhanakan yang tersedia untuk ekstensi OnPlatform. Anda dapat menyederhanakan contoh yang mengatur padding, sebagai berikut:

<VerticalStackLayout Padding="{OnPlatform iOS='30,60,30,30', Default='30'}">
    <!--XAML for other controls goes here -->
</VerticalStackLayout>

Anda dapat menentukan nilai default untuk properti, bersama dengan nilai khusus platform apa pun. Dalam formulir ini, parameter tipe disimpulkan dari properti tempat atribut OnPlatform diterapkan.

Untuk mengatur warna latar belakang, Anda dapat menggunakan fragmen XAML ini sebagai ganti contoh sebelumnya kedua:

<VerticalStackLayout BackgroundColor="{OnPlatform WinUI=Yellow, iOS=Silver, Android=Green}">
    ...
</VerticalStackLayout>

Uji pengetahuan

1.

Ekstensi markup mana yang dapat Anda gunakan dalam kode XAML untuk mendeteksi platform tempat aplikasi berjalan?

2.

Apa tujuan atribut TypeArguments untuk ekstensi OnPlatform?