Bagikan melalui

Ikon di aplikasi Windows

  • Artikel

Ikon menyediakan singkatan visual untuk tindakan, konsep, atau produk. Dengan mengompresi makna ke dalam gambar simbolis, ikon dapat melintasi hambatan bahasa dan membantu menghemat sumber daya yang berharga: ruang layar. Ikon yang bagus selaras dengan tipografi dan dengan bahasa desain lainnya. Mereka tidak mencampur metafora, dan mereka hanya berkomunikasi apa yang diperlukan, secepat dan sesering mungkin.

Flyout bilah perintah dengan ikon untuk ditambahkan - tanda plus, edit - pensil, berbagi - halaman dan panah, dan pengaturan - roda gigi

Ikon dapat muncul di dalam aplikasi dan di luarnya. Di dalam aplikasi, Anda menggunakan ikon untuk mewakili tindakan, seperti menyalin teks atau masuk ke halaman pengaturan.

Artikel ini menjelaskan ikon dalam antarmuka pengguna aplikasi Anda. Untuk mempelajari tentang ikon yang mewakili aplikasi Anda di Windows (ikon aplikasi), lihat Ikon aplikasi.

Mengetahui kapan harus menggunakan ikon

Ikon dapat menghemat ruang, tetapi kapan Anda harus menggunakannya?

Gunakan ikon untuk tindakan, seperti memotong, menyalin, menempelkan, dan menyimpan, atau untuk item pada menu navigasi. Gunakan ikon jika mudah bagi pengguna untuk memahami apa arti ikon dan cukup sederhana untuk menjadi jelas dalam ukuran kecil.

Jangan gunakan ikon jika maknanya tidak jelas, atau jika membuatnya jelas memerlukan bentuk yang kompleks.

Gunakan tipe ikon yang tepat

Ada banyak cara untuk membuat ikon. Anda dapat menggunakan font simbol seperti font Segoe Fluent Icons. Anda dapat membuat gambar berbasis vektor Anda sendiri. Anda bahkan dapat menggunakan gambar bitmap, meskipun kami tidak merekomendasikannya. Berikut adalah ringkasan cara menambahkan ikon ke aplikasi Anda.

Untuk menambahkan ikon di aplikasi XAML, Anda menggunakan IconElement atau IconSource.

Tabel ini memperlihatkan berbagai jenis ikon yang berasal dari IconElement dan IconSource.

IconElement IconSource Deskripsi
AnimatedIcon AnimatedIconSource Mewakili ikon yang menampilkan dan mengontrol visual yang dapat menganimasikan sebagai respons terhadap perubahan interaksi pengguna dan status visual.
BitmapIcon BitmapIconSource Mewakili ikon yang menggunakan bitmap sebagai isinya.
FontIcon FontIconSource Mewakili ikon yang menggunakan glyph dari font yang ditentukan.
IconSourceElement T/A Mewakili ikon yang menggunakan IconSource sebagai kontennya.
ImageIcon ImageIconSource Mewakili ikon yang menggunakan gambar sebagai kontennya.
PathIcon PathiconSource Mewakili ikon yang menggunakan jalur vektor sebagai kontennya.
SymbolIcon SymbolIconSource Mewakili ikon yang menggunakan glyph dari SymbolThemeFontFamily sumber daya sebagai kontennya.

IconElement vs. IconSource

IconElement adalah FrameworkElement, sehingga dapat ditambahkan ke pohon objek XAML sama seperti elemen lain dari UI aplikasi Anda. Namun, ini tidak dapat ditambahkan ke ResourceDictionary dan digunakan kembali sebagai sumber daya bersama.

IconSource mirip dengan IconElement; namun, karena bukan FrameworkElement, iconSource tidak dapat digunakan sebagai elemen mandiri di UI Anda, tetapi dapat dibagikan sebagai sumber daya. IconSourceElement adalah elemen ikon khusus yang membungkus IconSource sehingga Anda dapat menggunakannya di mana saja Anda memerlukan IconElement. Contoh fitur-fitur ini ditampilkan di bagian berikutnya.

Contoh IconElement

Anda dapat menggunakan kelas turunan IconElement sebagai komponen UI mandiri.

Contoh ini menunjukkan cara mengatur glyph ikon sebagai konten Tombol. Atur FontFamily tombol ke SymbolThemeFontFamily dan properti kontennya ke nilai Unicode dari glyph yang ingin Anda gunakan.

<Button FontFamily="{ThemeResource SymbolThemeFontFamily}"
        Content="&#xE768;"/>

Tombol dengan ikon putar, kerangka segitiga yang menunjuk ke kanan

Anda juga dapat secara eksplisit menambahkan salah satu objek elemen ikon yang tercantum sebelumnya, seperti SymbolIcon. Ini memberi Anda lebih banyak jenis ikon untuk dipilih. Ini juga memungkinkan Anda menggabungkan ikon dan jenis konten lainnya, seperti teks, jika Anda mau.

<Button>
    <StackPanel>
        <SymbolIcon Symbol="Play"/>
        <TextBlock Text="Play" HorizontalAlignment="Center"/>
    </StackPanel>
</Button>

Tombol dengan ikon putar, kerangka segitiga menunjuk ke kanan, dengan teks diputar di bawahnya

Contoh ini menunjukkan bagaimana Anda dapat menentukan FontIconSource di ResourceDictionary, lalu menggunakan IconSourceElement untuk menggunakan kembali sumber daya di berbagai tempat aplikasi Anda.

<!--App.xaml-->
<Application
   ...>
    <Application.Resources>
        <ResourceDictionary>
            ...
            <!-- Other app resources here -->

            <FontIconSource x:Key="CertIconSource" Glyph="&#xEB95;"/>

        </ResourceDictionary>
    </Application.Resources>
</Application>

<StackPanel Orientation="Horizontal">
    <IconSourceElement IconSource="{StaticResource CertIconSource}"/>
    <TextBlock Text="Certificate is expired" Margin="4,0,0,0"/>
</StackPanel>

<Button>
    <StackPanel>
        <IconSourceElement IconSource="{StaticResource CertIconSource}"/>
        <TextBlock Text="View certificate" HorizontalAlignment="Center"/>
    </StackPanel>
</Button>

Ikon sertifikat dengan sertifikat teks kedaluwarsa, dan tombol dengan ikon sertifikat dan sertifikat tampilan teks

Buka aplikasi Galeri WinUI 3 untuk melihat IconElement beraksi

Aplikasi Galeri WinUI 3 mencakup contoh interaktif dari sebagian besar kontrol, fitur, dan fungsi WinUI 3. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub

Properti ikon

Anda sering menempatkan ikon di UI Anda dengan menetapkannya ke icon properti elemen XAML lain. Icon properti yang menyertakan Source dalam nama mengambil IconSource; jika tidak, properti mengambil IconElement.

Daftar ini memperlihatkan beberapa elemen umum yang memiliki icon properti .

Perintah/Tindakan Navigasi Status/Lainnya
AppBarButton.Icon AppBarToggleButton.Icon AutoSuggestBox.QueryIcon MenuFlyoutItem.Icon MenuFlyoutSubItem.Icon SwipeItem.IconSource XamlUICommand.IconSource NavigationViewItem.Icon SelectorBarItem.Icon TabViewItem.IconSource Animatedicon.FallbackiconSource AnimatedIconSource.FallbackIconSource IconSourceElement.IconSource InfoBadge.IconSource InfoBar.IconSource TeachingTip.IconSource

Tip

Anda dapat melihat kontrol ini di aplikasi Galeri WinUI 3 untuk melihat contoh bagaimana ikon digunakan bersamanya.

Contoh yang tersisa di halaman ini memperlihatkan cara menetapkan ikon ke icon properti kontrol.

FontIcon dan SymbolIcon

Cara paling umum untuk menambahkan ikon ke aplikasi Anda adalah dengan menggunakan ikon sistem yang disediakan oleh font ikon di Windows. Windows 11 memperkenalkan font ikon sistem baru, Segoe Fluent Icons, yang menyediakan lebih dari 1.000 ikon yang dirancang untuk bahasa Desain Fasih. Mungkin tidak intuitif untuk mendapatkan ikon dari font, tetapi teknologi tampilan font Windows berarti ikon ini akan terlihat tajam dan tajam pada layar apa pun, pada resolusi apa pun, dan pada ukuran apa pun.

Penting

Keluarga font default

Daripada menentukan FontFamily secara langsung, FontIcon dan SymbolIcon menggunakan keluarga font yang ditentukan oleh SymbolThemeFontFamily sumber daya tema XAML. Secara default, sumber daya ini menggunakan keluarga font Segoe Fluent Icon. Jika aplikasi Anda dijalankan pada Windows 10, versi 20H2 atau yang lebih lama, keluarga font Segoe Fluent Icon tidak tersedia dan SymbolThemeFontFamily sumber daya kembali ke keluarga font Aset Segoe MDL2 sebagai gantinya.

Enumerasi simbol

Banyak glyph umum dari SymbolThemeFontFamily disertakan dalam enumerasi Simbol . Jika glyph yang Anda butuhkan tersedia sebagai Simbol, Anda dapat menggunakan SymbolIcon di mana saja Anda akan menggunakan FontIcon dengan keluarga font default.

Anda juga menggunakan Nama simbol untuk mengatur icon properti di XAML menggunakan sintaks atribut, seperti ini

<AppBarButton Icon="Send" Label="Send"/>

Tombol dengan ikon kirim, kerangka kepala panah menunjuk ke kanan

Tip

Anda hanya dapat menggunakan Nama simbol untuk mengatur icon properti menggunakan sintaks atribut yang dipersingkat. Semua jenis ikon lainnya harus diatur menggunakan sintaks elemen properti yang lebih panjang, seperti yang ditunjukkan dalam contoh lain di halaman ini.

Ikon font

Hanya sebagian kecil glyph Ikon Fasih Segoe yang tersedia dalam enumerasi Simbol . Untuk menggunakan salah satu glyph lain yang tersedia, gunakan FontIcon. Contoh ini memperlihatkan cara membuat AppBarButton dengan SendFill ikon .

<AppBarButton Label="Send">
    <AppBarButton.Icon>
        <FontIcon Glyph="&#xE725;"/>
    </AppBarButton.Icon>
</AppBarButton>

Tombol dengan ikon kirim isian, kepala panah yang diisi menunjuk ke kanan

Jika Anda tidak menentukan FontFamily, atau Anda menentukan FontFamily yang tidak tersedia pada sistem saat runtime, FontIcon akan kembali ke keluarga font default yang ditentukan oleh SymbolThemeFontFamily sumber daya tema.

Anda juga dapat menentukan ikon menggunakan nilai Glyph dari font apa pun yang tersedia. Contoh ini menunjukkan cara menggunakan Glyph dari font Segoe UI Emoji.

<AppBarToggleButton Label="FontIcon">
    <AppBarToggleButton.Icon>
        <FontIcon FontFamily="Segoe UI Emoji" Glyph="&#x25B6;"/>
    </AppBarToggleButton.Icon>
</AppBarToggleButton>

Tombol dengan ikon putar dari font Segoe UI Emoji, kepala panah putih menunjuk ke kanan pada latar belakang biru

Untuk informasi dan contoh selengkapnya, lihat dokumentasi kelas FontIcon dan SymbolIcon .

Tip

Gunakan halaman Ikonografi di aplikasi Galeri WinUI 3 untuk melihat, mencari, dan menyalin kode untuk semua ikon yang tersedia di Segoe Fluent Icons.

Buka aplikasi Galeri WinUI 3 ke halaman Ikonografi

AnimatedIcon

Gerakan adalah bagian penting dari bahasa Desain Fasih. Ikon animasi menarik perhatian ke titik masuk tertentu, memberikan umpan balik dari status ke status, dan menambahkan keseruan ke interaksi.

Anda dapat menggunakan ikon animasi untuk mengimplementasikan ikon ringan berbasis vektor dengan gerakan menggunakan animasi Lottie .

Untuk informasi dan contoh selengkapnya, lihat Ikon animasi dan dokumentasi kelas AnimatedIcon.

Buka aplikasi Galeri WinUI 3 untuk melihat AnimatedIcon beraksi

PathIcon

Anda dapat menggunakan PathIcon untuk membuat ikon kustom yang menggunakan bentuk berbasis vektor, sehingga selalu terlihat tajam. Namun, membuat bentuk menggunakan Geometri XAML rumit karena Anda harus menentukan setiap titik dan kurva secara individual.

Contoh ini menunjukkan dua cara berbeda untuk menentukan Geometri yang digunakan dalam PathIcon.

<AppBarButton Label="PathIcon">
    <AppBarButton.Icon>
        <PathIcon Data="F1 M 16,12 20,2L 20,16 1,16"/>
    </AppBarButton.Icon>
</AppBarButton>

<AppBarButton Label="Circles">
    <AppBarButton.Icon>
        <PathIcon>
            <PathIcon.Data>
                <GeometryGroup>
                    <EllipseGeometry RadiusX="15" RadiusY="15" Center="90,90" />
                    <EllipseGeometry RadiusX="50" RadiusY="50" Center="90,90" />
                    <EllipseGeometry RadiusX="70" RadiusY="70" Center="90,90" />
                    <EllipseGeometry RadiusX="100" RadiusY="100" Center="90,90" />
                    <EllipseGeometry RadiusX="120" RadiusY="120" Center="90,90" />
                </GeometryGroup>      
            </PathIcon.Data>
        </PathIcon>
    </AppBarButton.Icon>
</AppBarButton>

Tombol dengan ikon jalur kustomTombol dengan ikon jalur kustom, dua lingkaran di sekitar titik tengah

Untuk mempelajari selengkapnya tentang menggunakan kelas Geometri untuk membuat bentuk kustom, lihat dokumentasi kelas dan Memindahkan dan menggambar perintah untuk geometri. Lihat juga dokumentasi Geometri WPF. Kelas Geometri WinUI tidak memiliki semua fitur yang sama dengan kelas WPF, tetapi membuat bentuk sama untuk keduanya.

Untuk informasi dan contoh selengkapnya, lihat dokumentasi kelas PathIcon .

BitmapIcon dan ImageIcon

Anda dapat menggunakan BitmapIcon atau ImageIcon untuk membuat ikon dari file gambar (seperti PNG, GIF, atau JPEG), meskipun kami tidak merekomendasikannya jika opsi lain tersedia. Gambar bitmap dibuat pada ukuran tertentu, sehingga harus ditingkatkan atau diturunkan tergantung pada seberapa besar Anda ingin ikon dan resolusi layar. Ketika gambar diturunkan skalanya (menyusut), gambar dapat tampak buram. Saat ditingkatkan skalanya, skalanya dapat tampak blokir dan dikselerasi.

BitmapIcon

Secara default, BitmapIcon menghapus semua informasi warna dari gambar dan merender semua piksel yang tidak transparan dalam warna Latar Depan . Untuk membuat ikon monokrom, gunakan gambar solid pada latar belakang transparan dalam format PNG. Format gambar lain akan dimuat rupanya tanpa kesalahan tetapi menghasilkan blok solid warna Latar Depan.

<AppBarButton Label="ImageIcon">
    <AppBarButton.Icon>
        <ImageIcon Source="ms-appx:///Assets/slices3.png"/>
    </AppBarButton.Icon>
</AppBarButton>

Tombol dengan ikon bitmap, irisan berbentuk pai dalam warna hitam dan putih

Anda dapat mengambil alih perilaku default dengan mengatur properti ShowAsMonochrome ke false. Dalam hal ini, BitmapIcon berperilaku sama dengan ImageIcon untuk jenis file bitmap yang didukung (file SVG tidak didukung).

<BitmapIcon UriSource="ms-appx:///Assets/slices3.jpg" 
            ShowAsMonochrome="False"/>

Untuk informasi dan contoh selengkapnya, lihat dokumentasi kelas BitmapIcon .

Tip

Penggunaan BitmapIcon mirip dengan penggunaan BitmapImage; lihat kelas BitmapImage untuk informasi selengkapnya yang berlaku untuk BitmapIcon, seperti mengatur properti UriSource dalam kode.

ImageIcon

ImageIcon menunjukkan gambar yang disediakan oleh salah satu kelas turunan ImageSource. Yang paling umum adalah BitmapSource, tetapi seperti yang disebutkan sebelumnya, kami tidak merekomendasikan gambar bitmap untuk ikon karena potensi masalah penskalaan.

Sumber daya Grafik Vektor (SVG) yang dapat diskalakan sangat ideal untuk ikon, karena selalu terlihat tajam pada ukuran atau resolusi apa pun. Anda dapat menggunakan SVGImageSource dengan ImageIcon, yang mendukung mode statis aman dari spesifikasi SVG tetapi tidak mendukung animasi atau interaksi. Untuk informasi selengkapnya, lihat dukungan SVGImageSource dan SVG.

ImageIcon mengabaikan properti Latar Depan , sehingga selalu menampilkan gambar dalam warna aslinya. Karena warna Latar Depan diabaikan, ikon tidak merespons perubahan status visual saat digunakan dalam tombol atau kontrol serupa lainnya.

<AppBarButton Label="ImageIcon">
    <AppBarButton.Icon>
        <ImageIcon Source="ms-appx:///Assets/slices3.svg"/>
    </AppBarButton.Icon>
</AppBarButton>

Tombol dengan ikon gambar, irisan berbentuk pai dalam warna yang berbeda

Untuk informasi dan contoh selengkapnya, lihat dokumentasi kelas ImageIcon .

Tip

Penggunaan ImageIcon mirip dengan kontrol Gambar; lihat kelas Gambar untuk informasi selengkapnya yang berlaku untuk ImageIcon. Salah satu perbedaan penting adalah bahwa dengan ImageIcon, hanya bingkai pertama dari gambar multi-bingkai (seperti GIF animasi) yang digunakan. Untuk menggunakan ikon animasi, lihat AnimatedIcon.