Menentukan Sumber Daya Gambar Pita
Sebagai sistem presentasi perintah yang kaya, kerangka kerja Windows Ribbon dirancang untuk mendukung sumber daya gambar secara luas di seluruh antarmuka pengguna Pita (UI). Semua sumber daya gambar dideklarasikan dalam markup Pita atau dikueri dari aplikasi host Pita.
Untuk Windows 8 dan yang lebih baru, kerangka kerja Pita mendukung format grafik berikut: file bitmap ARGB (BMP) 32-bit dan file Portable Network Graphics (PNG) dengan transparansi.
Untuk Windows 7 dan yang lebih lama, sumber daya gambar harus sesuai dengan format grafik BMP standar yang digunakan di Windows.
Catatan
Kesalahan kompilasi dapat terjadi jika format gambar yang tidak didukung diberikan ke kerangka kerja.
Ukuran Gambar
Untuk memberikan fleksibilitas yang lebih besar untuk tata letak kontrol Pita saat mengubah ukuran jendela aplikasi, kerangka kerja Pita menerima dan merender gambar dalam salah satu dari dua ukuran: besar atau kecil.
Gambar berikut mengilustrasikan aplikasi Pita yang mendukung beberapa ukuran Pita melalui tata letak kontrol yang fleksibel dan penggantian gambar besar dengan gambar kecil jika tersedia.
Cuplikan layar berikut ini memperlihatkan Pita dengan gambar besar untuk kontrol Zoom.
Cuplikan layar berikut ini memperlihatkan Perubahan ukuran Pita yang sama dengan gambar kecil untuk kontrol Zoom
Cuplikan layar berikut ini memperlihatkan pita dalam keadaan tersembunyi. Pita disembunyikan ketika semua tata letak kontrol potensial telah habis dan pita tidak dapat dirender dengan ruang kerja aplikasi yang dapat digunakan.
Untuk gambar apa pun, ukuran piksel yang tepat tergantung pada resolusi tampilan, atau titik per inci (dpi), dari monitor yang digunakan. Pada 96 dpi, gambar besar berukuran 32x32 piksel dan gambar kecil berukuran 16x16 piksel. Ukuran gambar meningkat dalam mode linier relatif terhadap dpi seperti yang diilustrasikan dalam tabel berikut.
| DPI | Gambar Kecil | Gambar Besar |
|---|---|---|
| 96 dpi | 16x16 piksel | 32x32 piksel |
| 120 dpi | 20x20 piksel | 40x40 piksel |
| 144 dpi | 24x24 piksel | 48x48 piksel |
| 192 dpi | 32x32 piksel | 64x64 piksel |
Kerangka kerja Pita menskalakan sumber daya gambar sesuai kebutuhan. Namun, karena mengubah ukuran dapat menghasilkan artefak dan degradasi gambar yang tidak diinginkan, sangat disarankan agar aplikasi menyediakan sekumpulan kecil sumber daya gambar yang mencakup berbagai pengaturan dpi yang umum digunakan. Jika kecocokan persis tidak ditemukan, gambar terdekat akan ditingkatkan atau diturunkan skalanya.
Untuk memfasilitasi ini, sumber daya gambar dapat dideklarasikan dalam markup Pita dengan menggunakan sekumpulan elemen Gambar untuk setiap elemen Perintah . Pada durasi, kerangka kerja memilih gambar untuk ditampilkan berdasarkan atribut MinDPI dari setiap elemen Gambar .
Penting
Saat kumpulan sumber daya gambar yang dirancang untuk mendukung pengaturan dpi layar tertentu diberikan ke kerangka kerja Pita melalui sekumpulan elemen Gambar , kerangka kerja menggunakan Gambar dengan nilai atribut MinDPI yang cocok dengan pengaturan dpi layar saat ini.
Jika tidak ada elemen Gambar yang dinyatakan dengan nilai MinDPI yang cocok dengan pengaturan dpi layar saat ini, kerangka kerja memilih Gambar yang memiliki nilai MinDPI terdekat kurang dari pengaturan dpi layar saat ini dan meningkatkan skala sumber daya gambar. Jika tidak, jika tidak ada elemen Gambar yang dideklarasikan dengan nilai atribut MinDPI kurang dari pengaturan dpi layar saat ini, kerangka kerja memilih nilai MinDPI terdekat yang lebih besar dari pengaturan dpi layar saat ini dan menurunkan skala sumber daya gambar.
Contoh berikut ini menggambarkan cara mendeklarasikan sekumpulan gambar untuk mengakomodasi berbagai ukuran Pita dan pengaturan sistem.
<Command.LargeImages>
<Image Source="res/CutLargeImage32.bmp" Id="116" Symbol="ID_CUT_LARGEIMAGE1" MinDPI="96" />
<Image Source="res/CutLargeImage40.bmp" Id="117" Symbol="ID_CUT_LARGEIMAGE2" MinDPI="120" />
<Image Source="res/CutLargeImage48.bmp" Id="118" Symbol="ID_CUT_LARGEIMAGE3" MinDPI="144" />
<Image Source="res/CutLargeImage64.bmp" Id="119" Symbol="ID_CUT_LARGEIMAGE4" MinDPI="192" />
</Command.LargeImages>
<Command.SmallImages>
<Image Source="res/CutSmallImage16.bmp" Id="122" Symbol="ID_CUT_SMALLIMAGE1" MinDPI="96" />
<Image Source="res/CutSmallImage20.bmp" Id="123" Symbol="ID_CUT_SMALLIMAGE2" MinDPI="120" />
<Image Source="res/CutSmallImage24.bmp" Id="124" Symbol="ID_CUT_SMALLIMAGE3" MinDPI="144" />
<Image Source="res/CutSmallImage32.bmp" Id="125" Symbol="ID_CUT_SMALLIMAGE4" MinDPI="192" />
</Command.SmallImages>
<Command.LargeHighContrastImages>
<Image Source="res/CutLargeImage32HC.bmp" Id="130" Symbol="ID_CUT_LARGEIMAGE1HC" MinDPI="96" />
<Image Source="res/CutLargeImage40HC.bmp" Id="131" Symbol="ID_CUT_LARGEIMAGE2HC" MinDPI="120" />
<Image Source="res/CutLargeImage48HC.bmp" Id="132" Symbol="ID_CUT_LARGEIMAGE3HC" MinDPI="144" />
<Image Source="res/CutLargeImage64HC.bmp" Id="133" Symbol="ID_CUT_LARGEIMAGE4HC" MinDPI="192" />
</Command.LargeHighContrastImages>
<Command.SmallHighContrastImages>
<Image Source="res/CutSmallImage16HC.bmp" Id="135" Symbol="ID_CUT_SMALLIMAGE1HC" MinDPI="96" />
<Image Source="res/CutSmallImage20HC.bmp" Id="136" Symbol="ID_CUT_SMALLIMAGE2HC" MinDPI="120" />
<Image Source="res/CutSmallImage24HC.bmp" Id="137" Symbol="ID_CUT_SMALLIMAGE3HC" MinDPI="144" />
<Image Source="res/CutSmallImage32HC.bmp" Id="138" Symbol="ID_CUT_SMALLIMAGE4HC" MinDPI="192" />
</Command.SmallHighContrastImages>
Jika gambar yang dinyatakan dalam markup tidak valid pada durasi karena alasan apa pun, aplikasi host dikueri untuk gambar baru. Ketika gambar-gambar ini dihasilkan dan dimuat secara terprogram, aplikasi harus mencoba mengembalikan gambar yang berukuran sesuai dengan ukuran ikon sistem default yang ditentukan oleh metrik sistem SM_CXICON.
Catatan
Gambar besar memiliki ukuran SM_CXICON dengan SM_CXICON dan gambar kecil memiliki ukuran SM_CXICON/2 berdasarkan SM_CXICON/2.
Kedalaman Warna, Transparansi, dan Kontras
Gambar reguler diharapkan berada dalam format piksel ARGB 32 bit per piksel (BPP) dan diskalakan ke ukuran ikon sistem default. Format ini mendukung transparansi dan antialias (menggunakan 8 bit per saluran).
Peringatan
Banyak alat pengeditan gambar tidak mempertahankan saluran alfa 8-bit urutan tertinggi saat memuat atau menyimpan 32 gambar BPP.
Agar gambar ditampilkan dengan benar dalam mode kontras tinggi, gambar harus dalam format piksel palet 4 BPP. Saat gambar dirender, kerangka kerja Pita memetakan ulang warna tertentu berdasarkan konteks kontras tinggi gambar.
Tabel berikut mencantumkan perilaku penyajian warna kontras tinggi dari kerangka kerja.
Warna piksel
Nilai RGB
Aktivitas
Latar belakang putih
Latar Belakang Gelap
MAGENTA
800080
Transparan
Transparan
HITAM
000000
COLOR_WINDOWTEXT
PUTIH
PUTIH
FFFFFF
COLOR_WINDOW
HITAM
ABU-ABU TUA
808080
COLOR_3DSHADOW
COLOR_3DSHADOW
ABU
C0C0C0
COLOR_3DFACE
COLOR_3DFACE
ABU-ABU MUDA
DFDFDF
COLOR_3DLIGHT
COLOR_3DLIGHT
BIRU TUA
000080
n/a
PUTIH
Untuk informasi selengkapnya tentang format gambar yang didukung oleh kerangka kerja Pita, lihat berikut ini:
- Struktur BITMAPINFOHEADER - menjelaskan format piksel ARGB 32 BPP.
- Fungsi CreateDIBSection - menjelaskan cara membuat gambar format piksel ARGB 32 BPP.
- Fungsi LoadImage - menjelaskan cara memuat gambar format piksel ARGB 32 BPP.
Aksesibilitas
Mengandalkan sumber daya gambar untuk memberikan informasi, menyampaikan fungsionalitas kontrol, dan mengekspos status aplikasi, meningkatkan kebutuhan akan persyaratan aksesibilitas selama desain dan pengembangan aplikasi.
Untuk dukungan kontras tinggi dasar, Pita memungkinkan sekumpulan file gambar terpisah ditampilkan saat tema kontras tinggi aktif. Gambar-gambar ini bisa 32 BPP atau 4 BPP, dengan warna dipetakan ke palet khusus di mana warna gelap dan terang terbalik tergantung pada warna latar depan dan latar belakang tema kontras tinggi aktif.
Contoh berikut menunjukkan bagaimana sumber daya gambar kontras tinggi dinyatakan dalam markup Pita:
<Command Name="cmdNew" Id="0xE100" Symbol="ID_CMD_NEW" LabelTitle="New document" Keytip="N" >
<Command.TooltipTitle>New (Ctrl+N)</Command.TooltipTitle>
<Command.TooltipDescription>Create a new document.</Command.TooltipDescription>
<Command.LargeImages>
<Image Source="cmdNew-32px.bmp" MinDPI="96" />
<Image Source="cmdNew-40px.bmp" MinDPI="120" />
<Image Source="cmdNew-48px.bmp" MinDPI="144" />
<Image Source="cmdNew-64px.bmp" MinDPI="192" />
</Command.LargeImages>
<Command.LargeHighContrastImages>
<Image Source="cmdNew-32px-HC.bmp" MinDPI="96" />
<Image Source="cmdNew-40px-HC.bmp" MinDPI="120" />
<Image Source="cmdNew-48px-HC.bmp" MinDPI="144" />
<Image Source="cmdNew-64px-HC.bmp" MinDPI="192" />
</Command.LargeHighContrastImages>
<Command.SmallImages>
<Image Source="cmdNew-16px.bmp" MinDPI="96" />
<Image Source="cmdNew-20px.bmp" MinDPI="120" />
<Image Source="cmdNew-24px.bmp" MinDPI="144" />
<Image Source="cmdNew-32px.bmp" MinDPI="192" />
</Command.SmallImages>
<Command.SmallHighContrastImages>
<Image Source="cmdNew-16px-HC.bmp" MinDPI="96" />
<Image Source="cmdNew-20px-HC.bmp" MinDPI="120" />
<Image Source="cmdNew-24px-HC.bmp" MinDPI="144" />
<Image Source="cmdNew-32px-HC.bmp" MinDPI="192" />
</Command.SmallHighContrastImages>
</Command>
Topik terkait