Catatan
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba masuk atau mengubah direktori.
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba mengubah direktori.
Saat Anda merancang UI yang menggunakan elemen shell Visual Studio umum, atau Anda ingin elemen antarmuka Anda konsisten dengan fitur serupa, gunakan nama token yang ada dalam file definisi paket untuk memilih dan menetapkan warna. Ini memastikan bahwa UI Anda tetap konsisten dengan lingkungan Visual Studio secara keseluruhan dan diperbarui secara otomatis saat tema ditambahkan atau diperbarui.
Artikel ini menjelaskan elemen UI umum dan nama token yang mereka gunakan, yang dapat Anda referensikan saat membangun UI serupa. Untuk informasi spesifik tentang cara mengakses token warna ini, lihat Layanan VSColor.
Pastikan untuk menggunakan nama token dengan benar:
Gunakan nama token berdasarkan fungsi, bukan pada warna itu sendiri. Warna bersama umum dikaitkan dengan elemen antarmuka tertentu dan hanya dimaksudkan untuk digunakan untuk fitur yang sama atau serupa. Misalnya, jangan gunakan kembali warna kotak kombo yang ditekan untuk animasi kemajuan berputar hanya karena Anda menyukai warnanya. Fungsi kotak kombo dan animasi berbeda, dan jika warna yang terkait dengan perubahan kotak kombo, mungkin tidak lagi menjadi warna yang sesuai untuk elemen animasi Anda. Penggunaan warna yang konsisten membantu mengorientasikan pengguna Anda dan mencegah kebingungan.
Gunakan warna latar belakang dan teks dalam kombinasi yang benar. Warna latar belakang yang dimaksudkan untuk digunakan dengan teks akan memiliki warna teks terkait. Jangan gunakan warna teks selain apa yang ditentukan untuk latar belakang tersebut. Jika tidak ada warna teks terkait, jangan gunakan warna latar belakang tersebut untuk permukaan apa pun yang Anda harapkan untuk menampilkan teks. Kombinasi warna teks dan latar belakang lainnya dapat mengakibatkan antarmuka yang tidak dapat dibaca.
Gunakan warna kontrol yang sesuai untuk lokasinya. Dalam status tertentu, beberapa kontrol Visual Studio tidak memiliki warna batas dan latar belakang yang terpisah. Sebaliknya, mereka mengambil warna-warna dari permukaan di belakang mereka. Pastikan Anda selalu menggunakan nama token yang sesuai untuk lokasi tempat Anda menempatkan kontrol.
Penting
Jangan gunakan token yang ditemukan dalam kategori "Halaman Mulai" atau "Cider."
Kontrol bersama umum
Saat Anda menggunakan bilah perintah Visual Studio standar di fitur Anda, Anda akan memiliki akses ke kontrol shell bergaya. Anda tidak boleh membuat templat ulang kontrol umum ini. Namun, jika Anda perlu membangun bilah perintah kustom, Anda mungkin juga perlu membangun kontrol kustom. Dalam hal ini, pastikan untuk menggunakan nama token yang benar untuk setiap kontrol berikut sehingga UI Anda konsisten dengan visual Studio lainnya.
Kontrol tombol
Menggunakan... | Jangan gunakan ... |
---|---|
... untuk tombol dalam sumur dokumen yang ingin Anda integrasikan dengan tema Visual Studio (Terang, Gelap, Biru, atau tema Kontras Tinggi sistem). | ... untuk tombol yang akan ditampilkan terhadap latar belakang kustom yang bukan bagian dari tema Visual Studio. |
Tombol: status standar
Tombol standar
Elemen | Nama token: Category.color |
---|---|
Tombol | CommonControls.Button |
Batas tombol | CommonControls.ButtonBorder |
Tombol: status default
Tombol default
Elemen | Nama token: Category.color |
---|---|
Tombol | CommonControls.ButtonDefault |
Batas tombol | CommonControls.ButtonBorderDefault |
Tombol: status dinonaktifkan
Tombol dinonaktifkan
Elemen | Nama token: Category.color |
---|---|
Tombol | CommonControls.ButtonDisabled |
Batas tombol | CommonControls.ButtonBorderDisabled |
Tombol: status hover
Tombol di hover
Elemen | Nama token: Category.color |
---|---|
Tombol | CommonControls.ButtonHover |
Batas tombol | CommonControls.ButtonBorderHover |
Tombol: status ditekan
Tombol ditekan
Elemen | Nama token: Category.color |
---|---|
Tombol | CommonControls.ButtonPressed |
Batas tombol | CommonControls.ButtonBorderPressed |
Tombol: status terfokus
Tombol terfokus
Elemen | Nama token: Category.color |
---|---|
Tombol | CommonControls.ButtonFocused |
Batas tombol | CommonControls.ButtonBorderFocused |
Kontrol kotak centang
Kotak centang (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... untuk kontrol kotak centang yang terkandung dalam sumur dokumen. | ... untuk UI apa pun yang bukan kontrol kotak centang. |
Kotak centang: status default
Kotak centang default
Elemen | Nama token: Category.color |
---|---|
Latar belakang | CommonControls.CheckBoxBackground |
Batas | CommonControls.CheckBoxBorder |
Teks | CommonControls.CheckBoxText |
Glyph | CommonControls.CheckBoxGlyph |
Kotak centang: status dinonaktifkan
Kotak centang Dinonaktifkan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | CommonControls.CheckBoxBackgroundDisabled |
Batas | CommonControls.CheckBoxBorderDisabled |
Teks | CommonControls.CheckBoxTextDisabled |
Glyph | CommonControls.CheckBoxGlyphDisabled |
Kotak centang: status hover
Kotak centang di hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | CommonControls.CheckBoxBackgroundHover |
Batas | CommonControls.CheckBoxBorderHover |
Teks | CommonControls.CheckBoxTextHover |
Glyph | CommonControls.CheckBoxGlyphHover |
Kotak centang: status ditekan
Kotak centang yang ditekan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | CommonControls.CheckBoxBackgroundPressed |
Batas | CommonControls.CheckBoxBorderPressed |
Teks | CommonControls.CheckBoxTextPressed |
Glyph | CommonControls.CheckBoxGlyphPressed |
Kotak centang: status terfokus
Kotak centang terfokus
Elemen | Nama token: Category.color |
---|---|
Latar belakang | CommonControls.CheckBoxBackgroundFocused |
Batas | CommonControls.CheckBoxBorderFocused |
Teks | CommonControls.CheckBoxTextFocused |
Glyph | CommonControls.CheckBoxGlyphFocused |
Drop-down dan kotak kombo
Kotak drop-down/kombo (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... untuk drop-down dan kotak kombo di sumur dokumen. | ... untuk UI apa pun yang bukan kotak drop-down atau kombo. |
... untuk drop-down bilah perintah atau kotak kombo. |
Drop-down dan kotak kombo: status default
Kotak drop-down/kombo default
Elemen | Nama token: Category.color |
---|---|
Latar belakang | CommonControls.ComboBoxBackground |
Batas | CommonControls.ComboBoxBorder |
Teks | CommonControls.ComboBoxText |
Pemisah | CommonControls.ComboBoxSeparator |
Glyph | CommonControls.ComboBoxGlyph |
Latar belakang Glyph | CommonControls.ComboBoxGlyphBackground |
Drop-down dan kotak kombo: status dinonaktifkan
Kotak drop-down/kombo yang dinonaktifkan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | CommonControls.ComboBoxBackgroundDisabled |
Batas | CommonControls.ComboBoxBorderDisabled |
Teks | CommonControls.ComboBoxTextDisabled |
Pemisah | CommonControls.ComboBoxSeparatorDisabled |
Glyph | CommonControls.ComboBoxGlyphDisabled |
Latar belakang Glyph | CommonControls.ComboBoxGlyphBackgroundDisabled |
Drop-down dan kotak kombo: status hover
Kotak drop-down/kombo di hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | CommonControls.ComboBoxBackgroundHover |
Batas | CommonControls.ComboBoxBorderHover |
Teks | CommonControls.ComboBoxTextHover |
Pemisah | CommonControls.ComboBoxSeparatorHover |
Glyph | CommonControls.ComboBoxGlyphHover |
Latar belakang Glyph | CommonControls.ComboBoxGlyphBackgroundHover |
Drop-down dan kotak kombo: status ditekan
Kotak drop-down/kombo yang ditekan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | CommonControls.ComboBoxBackgroundPressed |
Batas | CommonControls.ComboBoxBorderPressed |
Teks | CommonControls.ComboBoxTextPressed |
Pemisah | CommonControls.ComboBoxSeparatorPressed |
Glyph | CommonControls.ComboBoxGlyphPressed |
Latar belakang Glyph | CommonControls.ComboBoxGlyphBackgroundPressed |
Tampilan item daftar kotak drop-down dan kombo: status ditekan
Turun bawah/kotak kombo menekan tampilan item daftar
Elemen | Nama token: Category.color |
---|---|
Latar belakang | CommonControls.ComboBoxListBackground CommonControls.ComboBoxListBackgroundHover CommonControls.ComboBoxListItemBackgroundPressed CommonControls.ComboBoxListItemBackgroundFocused |
Batas | CommonControls.ComboBoxListBorder CommonControls.ComboBoxListBorderHover CommonControls.ComboBoxListBorderPressed CommonControls.ComboBoxListBorderFocused |
Teks item | CommonControls.ComboBoxListItemText CommonControls.ComboBoxListItemTextHover CommonControls.ComboBoxListItemTextPressed CommonControls.ComboBoxListItemTextFocused |
Bayangan latar belakang | CommonControls.ComboBoxListBackgroundShadow |
Drop-down dan kotak kombo: status terfokus
Kotak drop-down/kombo dengan fokus
Elemen | Nama token: Category.color |
---|---|
Latar belakang | CommonControls.ComboBoxBackgroundFocused |
Batas | CommonControls.ComboBoxBorderFocused |
Teks | CommonControls.ComboBoxTextFocused |
Pemisah | CommonControls.ComboBoxSeparatorFocused |
Glyph | CommonControls.ComboBoxGlyphFocused |
Latar belakang Glyph | CommonControls.ComboBoxGlyphBackgroundFocused |
Drop-down dan kotak kombo: pilihan input teks
Pilihan input teks kotak drop-down/kombo
Elemen | Nama token: Category.color |
---|---|
Sorotan | CommonControls.ComboBoxTextInputSelection |
Kontrol data tabular (kisi)
Kontrol data tabular, juga dikenal sebagai kontrol kisi, adalah kontrol umum untuk Visual Studio yang dapat digunakan untuk menyajikan data dalam jumlah besar di beberapa kolom. Kontrol data tabular standar dapat ditemukan di beberapa tempat dalam Visual Studio: jendela alat Daftar Kesalahan, laporan IntelliTrace, dan tampilan tumpukan memori, antara lain. Selalu gunakan kontrol data tabular standar yang disediakan. Dalam beberapa instans yang jarang terjadi, Anda mungkin tidak memiliki akses ke kontrol data tabular standar. Dalam situasi ini, gunakan nama token berikut untuk memastikan bahwa UI Anda konsisten dengan kontrol data tabular lainnya di Visual Studio.
Kontrol data/kisi tabular (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... untuk kontrol tabular atau kisi. | ... untuk UI apa pun yang bukan kontrol tabular atau kisi. |
Header kolom
Header kolom terdiri dari latar belakang, batas, teks judul, dan glyph opsional yang biasanya digunakan saat kisi diurutkan menurut kolom tersebut.
Header kolom: status default
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Header.Default |
Latar depan (Teks) | Environment.CommandBarTextActive |
Latar depan (Glyph) | Header.Glyph |
Batas | Header.SeparatorLine |
Header kolom: status hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Header.MouseOver |
Latar depan (Teks) | Environment.CommandBarTextHover |
Latar depan (Glyph) | Header.MouseOverGlyph |
Batas | Header.SeparatorLine |
Header kolom: status ditekan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | CommonControls.CheckBoxBackgroundPressed |
Latar depan (Teks) | CommonControls.CheckBoxBorderPressed |
Latar depan (Glyph) | CommonControls.CheckBoxTextPressed |
Batas | CommonControls.CheckBoxGlyphPressed |
Item tampilan daftar
Item tampilan daftar terdiri dari latar belakang dan konten. Konten dapat berupa teks, ikon, atau keduanya.
Item tampilan daftar: status default
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Transparan |
Latar depan (Teks) | Environment.CommandBarTextActive |
Batas | Tidak |
Item tampilan daftar: status aktif
Elemen | Nama token: Category.color |
---|---|
Latar belakang | TreeView.SelectedItemActive |
Latar depan (Teks) | TreeView.SelectedItemActiveText |
Batas | Tidak |
Item tampilan daftar: status tidak aktif
Elemen | Nama token: Category.color |
---|---|
Latar belakang | TreeView.SelectedItemInactive |
Latar depan (Teks) | TreeView.SelectedItemInactiveText |
Batas | Tidak |
Teks UI
Teks instruksi
Teks instruksional memberikan penjelasan utama yang menonjol tentang apa yang harus dilakukan dalam halaman dialog atau dokumen.
Teks instruksi default
Elemen | Nama token: Category.color |
---|---|
Latar depan (teks) | Environment.ControlText |
Teks instruksi sekunder
Di halaman dokumen dengan banyak teks dan kontrol, beberapa teks instruksional menggunakan nilai warna yang berbeda. Ini membantu menyampaikan informasi mana yang paling penting dan mengurangi kepadatan keseluruhan elemen UI. (Lihat juga bagian di bawah ini tentang teks petunjuk.)
Teks instruksi sekunder
Elemen | Nama token: Category.color |
---|---|
Latar depan (teks) | Environment.ControlEditHintText |
Teks petunjuk
Teks petunjuk muncul dalam kontrol kosong, di bawah kontrol, atau pada permukaan dokumen kosong untuk memperlihatkan kepada pengguna apa yang harus dilakukan berikutnya. Anda dapat menggunakan teks petunjuk dengan latar belakang Jendela atau Kontrol.
Teks petunjuk default
Teks petunjuk default
Elemen | Nama token: Category.color |
---|---|
Latar depan (teks) | Environment.ControlEditHintText |
Teks petunjuk yang diperlukan
Teks petunjuk yang diperlukan
Elemen | Nama token: Category.color |
---|---|
Latar depan (teks) | Environment.ControlRequiredHintText |
Latar belakang | Environment.ControlRequiredBackground |
Teks kontrol kotak pencarian
Lihat Kotak pencarian untuk token warna lain yang terkait dengan kontrol Pencarian.
Teks kontrol kotak pencarian
Elemen | Nama token: Category.color |
---|---|
Latar depan (teks) | SearchControl.UnfocusedWatermarkText |
Hyperlink
Hyperlink adalah satu kontrol yang tidak memiliki pasangan latar depan/latar belakang. Dalam semua kasus, gunakan warna hyperlink latar depan, yang akan muncul dengan benar pada latar belakang gelap, abu-abu, dan putih. Jika Anda tidak menggunakan token warna untuk kontrol hyperlink, Anda akan melihat warna sistem default untuk "ditekan," yang akan berkedip merah. Itulah sinyal bahwa kontrol tidak menggunakan token warna lingkungan yang benar.
Hyperlink (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... saat Anda perlu membuat hyperlink kustom. | ... untuk apa pun yang bukan hyperlink. |
Hyperlink: status default
Hyperlink default
Elemen | Nama token: Category.color |
---|---|
Latar depan (Teks) | Environment.PanelHyperlink |
Hyperlink: status hover
Hyperlink di hover
Elemen | Nama token: Category.color |
---|---|
Latar depan (Teks) | Environment.PanelHyperlinkHover |
Hyperlink: status ditekan
Hyperlink yang ditekan
Elemen | Nama token: Category.color |
---|---|
Latar depan (Teks) | Environment.PanelHyperlinkPressed |
Hyperlink: status dinonaktifkan
Hyperlink yang dinonaktifkan
Elemen | Nama token: Category.color |
---|---|
Latar depan (Teks) | Environment.PanelHyperlinkDisabled |
Bilah info
Bilah info digunakan untuk memberikan informasi selengkapnya tentang konteks tertentu dan selalu muncul di bagian atas jendela dokumen atau jendela alat.
Bilah info (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... saat membuat bilah info kustom. | ... untuk elemen UI yang tidak mirip dengan bilah info. |
Bilah info: status default
Bilah info default
Elemen | Nama token: Category.color |
---|---|
Latar belakang | InfoBar.InfoBarBackground |
Latar depan (Teks) | InfoBar.InfoBar |
Batas | InfoBar.InfoBarBorder |
Tombol Tutup Bilah Info (×): status default
Tombol Tutup bilah info default (×)
Elemen | Nama token: Category.color |
---|---|
Latar belakang | InfoBar.CloseButton |
Batas | InfoBar.CloseButtonBorder |
Glyph | InfoBar.CloseButtonGlyph |
Tombol Tutup Bilah Info (×): status hover
Tombol Tutup Bilah Info (×) di hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | InfoBar.CloseButtonHover |
Batas | InfoBar.CloseButtonHoverBorder |
Glyph | InfoBar.CloseButtonHoverGlyph |
Tombol Tutup Bilah Info (×): status ditekan
Tombol Tutup bilah info (×) yang ditekan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | InfoBar.CloseButtonDown |
Batas | InfoBar.CloseButtonDownBorder |
Glyph | InfoBar.CloseButtonDownGlyph |
Tombol hyperlink bilah info: status default
Tombol hyperlink bilah info default
Elemen | Nama token: Category.color |
---|---|
Latar depan (teks) | InfoBar.Hyperlink |
Tombol hyperlink bilah info: status hover
Tombol hyperlink bilah info di hover
Elemen | Nama token: Category.color |
---|---|
Latar depan (teks) | Infobar.HyperlinkMouseOver (Dengan garis bawah) |
Tombol hyperlink bilah info: status ditekan
Tombol hyperlink bilah info yang ditekan
Elemen | Nama token: Category.color |
---|---|
Latar depan (teks) | Infobar.HyperlinkMouseDown (Dengan garis bawah) |
Hyperlink sebaris bilah info (dalam kalimat): status default
Tombol hyperlink bilah info sebaris default
Elemen | Nama token: Category.color |
---|---|
Latar depan (teks) | InfoBar.Hyperlink |
Hyperlink sebaris bilah info (dalam kalimat): status hover
Tombol hyperlink sebaris bilah info di hover
Elemen | Nama token: Category.color |
---|---|
Latar depan (teks) | Infobar.HyperlinkMouseOver (Dengan garis bawah) |
Hyperlink sebaris bilah info (dalam kalimat): status ditekan
Tombol hyperlink sebaris bilah info yang ditekan
Elemen | Nama token: Category.color |
---|---|
Latar depan (teks) | Infobar.HyperlinkMouseDown (Dengan garis bawah) |
Tombol Bilah Info: status default
Tombol bilah info default
Elemen | Nama token: Category.color |
---|---|
Latar belakang | InfoBar.Button |
Latar depan (teks) | InfoBar.Button |
Batas | InfoBar.ButtonBorder |
Tombol Bilah Info: status hover
Tombol Bilah Info di hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | InfoBar.ButtonMouseOver |
Latar depan (teks) | InfoBar.ButtonMouseOver |
Batas | InfoBar.ButtonMouseOverBorder |
Tombol Bilah Info: status ditekan
Tombol bilah info yang ditekan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | InfoBar.ButtonMouseDown |
Latar depan (teks) | InfoBar.ButtonMouseDown |
Batas | InfoBar.ButtonMouseDownBorder |
Tombol bilah info: status dinonaktifkan
Tombol bilah info yang dinonaktifkan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | InfoBar.ButtonDisabled |
Latar depan (teks) | InfoBar.ButtonDisabled |
Batas | InfoBar.ButtonDisabledBorder |
Tombol Bilah Info: status terfokus
Tombol bilah info yang difokuskan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | InfoBar.ButtonFocus |
Latar depan (teks) | InfoBar.ButtonFocus |
Batas | InfoBar.ButtonFocusBorder |
Bilah gulir
Bilah gulir ditata oleh lingkungan Visual Studio, dan tidak perlu bertema. Namun, Anda mungkin memutuskan bahwa Anda ingin memanfaatkan warna yang digunakan di bilah gulir sehingga UI Anda selalu tampak konsisten dengan bagian lingkungan Visual Studio ini.
Bilah gulir (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... saat Anda membuat UI yang ingin Anda cocokkan dengan bilah gulir Visual Studio. | ... untuk apa pun yang Anda tidak ingin selalu cocok dengan antarmuka pengguna bilah gulir. |
Bilah gulir: status default
Bilah gulir default
Elemen | Nama token: Category.color |
---|---|
Bilah gulir | Environment.ScrollBarBackground |
Latar depan (Jempol) | Environment.ScrollBarThumbBackground |
Bilah gulir: status hover
Bilah gulir di hover
Elemen | Nama token: Category.color |
---|---|
Bilah gulir | Environment.ScrollBarBackground |
Latar depan (Jempol) | Environment.ScrollBarThumbMouseOverBackground |
Bilah gulir: status ditekan*
Bilah gulir yang ditekan
Elemen | Nama token: Category.color |
---|---|
Bilah gulir | Environment.ScrollBarBackground |
Latar depan (Jempol) | Environment.ScrollBarThumbPressedBackground |
Panah bilah gulir: status default
Panah bilah gulir default
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.ScrollBarArrowBackground (Atur ke warna yang sama dengan bilah gulir.) |
Latar depan (Glyph) | Environment.ScrollBarArrowGlyph |
Panah bilah gulir: status hover
Panah bilah gulir di hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.ScrollBarArrowMouseOverBackground (Atur ke warna yang sama dengan bilah gulir.) |
Latar depan (Glyph) | Environment.ScrollBarArrowGlyphMouseOver |
Panah bilah gulir: status ditekan
Panah bilah gulir yang ditekan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.ScrollBarArrowPressedBackground (Atur ke warna yang sama dengan bilah gulir.) |
Latar depan (Glyph) | Environment.ScrollBarArrowGlyphPressed |
Kotak pencarian
Jika memungkinkan, gunakan kontrol pencarian umum yang disediakan oleh lingkungan Visual Studio. Warna kotak pencarian ditemukan dalam kategori "SearchControl" dalam file ShellColors.pkgdef , yang berisi nama token untuk bidang input, tombol tindakan, tombol drop-down, dan menu drop-down.
Kotak pencarian bisa menjadi salah satu dari beberapa status, beberapa di antaranya saling eksklusif:
"Terfokus" atau "tidak fokus" mengacu pada apakah kursor ada di kotak teks atau tidak.
"Aktif" atau "tidak aktif" mengacu pada apakah pengguna telah memasukkan kueri pencarian di kotak teks.
"Arahkan kursor" berarti bahwa pengguna telah mengarahkan mouse ke atas kotak pencarian dengan mouse (status ini mengambil alih semua status lainnya).
"Dinonaktifkan" berarti bahwa fungsionalitas pencarian dinonaktifkan untuk konteks saat ini.
Kotak pencarian (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... saat Anda mendesain kotak pencarian kustom. | ... untuk apa pun yang bukan kotak pencarian. |
... untuk apa pun yang anda tidak ingin selalu cocok dengan UI kotak pencarian. |
Bidang input pencarian terfokus
Bidang input pencarian terfokus
Elemen | Nama token: Category.color |
---|---|
Latar belakang | SearchControl.FocusedBackground |
Latar depan (Teks) | SearchControl.FocusedBackground |
Batas | SearchControl.FocusedBorder |
Pemisah | SearchControl.FocusedDropDownSeparator |
Bidang input pencarian aktif yang tidak fokus
Bidang input pencarian aktif yang tidak fokus
Elemen | Nama token: Category.color |
---|---|
Latar belakang | SearchControl.SearchActiveBackground |
Latar depan (Teks) | SearchControl.SearchActiveBackground |
Batas | SearchControl.UnfocusedBorder |
Pemisah | SearchControl.DropDownSeparator |
Bidang input pencarian tidak fokus dan tidak aktif
Bidang input pencarian tidak fokus dan tidak aktif
Elemen | Nama token: Category.color |
---|---|
Latar belakang | SearchControl.Unfocused |
Latar depan (Teks) | SearchControl.Unfocused |
Batas | SearchControl.UnfocusedBorder |
Pemisah | SearchControl.DropDownSeparator |
Bidang input pencarian yang disorot (hanya teks)
Bidang input pencarian yang disorot
Elemen | Nama token: Category.color |
---|---|
Latar belakang | SearchControl.Selection |
Latar depan (Teks) | SearchControl.FocusedBackground |
Batas | Tidak |
Pemisah | SearchControl.FocusedDropDownSeparator |
Bidang input pencarian yang dinonaktifkan
Bidang input pencarian yang dinonaktifkan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | SearchControl.Disabled |
Latar depan (Teks) | SearchControl.Disabled |
Batas | SearchControl.DisabledBorder |
Pemisah | SearchControl.DropDownSeparator |
Tombol tindakan pencarian terfokus
Tombol tindakan pencarian terfokus
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Tidak |
Latar depan (Cari glyph) | SearchControl.SearchGlyph |
Latar depan (Hentikan glyph) | SearchControl.StopGlyph |
Latar depan (Clear glyph) | SearchControl.ClearGlyph |
Batas | T/A |
Tombol tindakan pencarian tidak fokus
Tombol tindakan pencarian tidak fokus
Elemen | Nama token: Category.color |
---|---|
Latar belakang | T/A |
Latar depan (Cari glyph) | SearchControl.SearchGlyph |
Latar depan (Hentikan glyph) | SearchControl.StopGlyph |
Latar depan (Clear glyph) | SearchControl.ClearGlyph |
Batas | T/A |
Tombol tindakan pencarian yang ditekan
Tombol tindakan pencarian yang ditekan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | SearchControl.ActionButtonMouseDown |
Latar depan (Glyph) | SearchControl.ActionButtonMouseDownGlyph |
Batas | SearchControl.ActionButtonMouseDownBorder |
Tombol tindakan pencarian yang dinonaktifkan
Tombol tindakan pencarian yang dinonaktifkan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Tidak |
Latar depan (Glyph) | SearchControl.ActionButtonDisabledGlyph |
Batas | Tidak |
Tombol drop-down pencarian terfokus
Tombol drop-down pencarian terfokus
Elemen | Nama token: Category.color |
---|---|
Latar belakang | SearchControl.FocusedDropDownButton |
Latar depan (Glyph) | SearchControl.FocusedDropDownButtonGlyph |
Batas | SearchControl.FocusedDropDownButtonBorder |
Tombol drop-down pencarian tidak fokus
Tombol drop-down pencarian tidak fokus
Elemen | Nama token: Category.color |
---|---|
Latar belakang | SearchControl.UnfocusedDropDownButton |
Latar depan (Glyph) | SearchControl.UnfocusedDropDownButtonGlyph |
Batas | SearchControl.UnfocusedDropDownButtonBorder |
Tombol drop-down pencarian yang ditekan
Tombol drop-down pencarian yang ditekan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | SearchControl.MouseDownDropDownButton |
Latar depan (Glyph) | SearchControl.MouseDownDropDownButtonGlyph |
Batas | SearchControl.MouseDownDropDownButtonBorder |
Tombol drop-down pencarian yang dinonaktifkan
Tombol drop-down pencarian yang dinonaktifkan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Tidak |
Latar depan (Glyph) | SearchControl.DisabledDownButtonGlyph |
Batas | Tidak |
Daftar drop-down pencarian
Menu drop-down kotak pencarian berpotensi sedikit lebih kompleks daripada menu drop-down lainnya di Visual Studio. Bagian "pencarian yang disarankan" dan "opsi pencarian" dapat muncul sendiri atau bersama-sama di menu, dan masing-masing berwarna secara terpisah. Garis juga memisahkan kedua bagian ini saat muncul bersama dan batas mengelilingi seluruh menu dropdown.
Daftar drop-down pencarian (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... saat Anda membuat daftar drop-down pencarian kustom. | ... untuk daftar drop-down yang muncul dalam konteks lain. |
... nama token yang benar untuk komponen daftar yang benar. | ... dalam kombinasi latar belakang/latar depan selain yang ditentukan. |
Elemen daftar drop-down pencarian
Elemen | Nama token: Category.color |
---|---|
Batas | SearchControl.PopupBorder |
Pemisah | SearchControl.PopupSectionHeaderSeparator |
Bayangan | Environment.DropShadowBackground |
Pencarian yang disarankan: status default
Pencarian default yang disarankan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | SearchControl.PopupItemsListBackgroundGradientBegin (Gradien berhenti untuk token ini tidak digunakan dalam UI bertema.) |
Latar depan (Teks) | SearchControl.PopupItemText |
Pencarian yang disarankan: status hover
Pencarian yang disarankan di hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | SearchControl.PopupControlMouseOverBackgroundGradientBegin (Gradien berhenti untuk token ini tidak digunakan dalam UI bertema.) |
Latar depan (Teks) | SearchControl.PopupMouseOverItemText |
Batas | SearchControl.PopupControlMouseOverBorder |
Opsi pencarian: status default
Opsi pencarian default (kotak centang)
Opsi pencarian default (tautan)
Elemen | Nama token: Category.color |
---|---|
Latar belakang | SearchControl.PopupSectionBackgroundGradientBegin (Gradien berhenti untuk token ini tidak digunakan dalam UI bertema.) |
Latar depan (teks kotak centang) | SearchControl.PopupCheckboxText |
Latar depan (Teks tautan) | SearchControl.PopupButtonText |
Latar belakang header | SearchControl.PopupSectionHeaderGradientBegin (Gradien berhenti untuk token ini tidak digunakan dalam UI bertema.) |
Latar depan (Teks header) | SearchControl.PopupSectionHeaderText |
Opsi pencarian: status hover
Opsi pencarian (kotak centang) di hover
Opsi pencarian (tautan) di hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | SearchControl.PopupControlMouseOverBackgroundGradientBegin (Gradien berhenti untuk token ini tidak digunakan dalam UI bertema.) |
Latar depan (teks kotak centang) | SearchControl.PopupCheckboxMouseDownText |
Latar depan (Teks tautan) | SearchControl.PopupButtonMouseDownText |
Batas | SearchControl.PopupControlMouseOverBorder |
Opsi pencarian: status ditekan
Opsi pencarian yang ditekan (kotak centang)
Opsi pencarian yang ditekan (tautan)
Elemen | Nama token: Category.color |
---|---|
Latar belakang kotak centang | SearchControl.PopupControlMouseDownBackgroundGradientBegin SearchControl.PopupControlMouseDownBackgroundGradientEnd (Gradien berhenti untuk token ini tidak digunakan dalam UI bertema.) |
Latar depan (teks kotak centang) | SearchControl.PopupCheckboxMouseDownText |
Tautkan latar belakang | SearchControl.PopupButtonMouseDownBackgroundGradientBegin (Gradien berhenti untuk token ini tidak digunakan dalam UI bertema.) |
Latar depan (Teks tautan) | SearchControl.PopupButtonMouseDownText |
Tampilan pohon
Beberapa jendela alat, termasuk Penjelajah Solusi, Server Explorer, dan Tampilan Kelas, menerapkan skema organisasi hierarkis yang warnanya dikontrol oleh nama warna dalam TreeView
kategori. Semua item dalam tampilan pohon memiliki warna latar belakang dan teks. Item yang memiliki elemen turunan berlapis juga memiliki glyph yang menunjukkan apakah item diperluas atau diciutkan.
Tampilan pohon (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... di mana saja Anda perlu menerapkan tampilan organisasi hierarkis. | ... untuk apa pun yang tidak mirip dengan tampilan pohon. |
... dalam kombinasi latar belakang/latar depan selain yang ditentukan. |
Item tampilan pohon: status default
Item tampilan pohon default
Elemen | Nama token: Category.color |
---|---|
Latar belakang | TreeView.Background |
Latar depan (Teks) | TreeView.Background |
Latar depan (Glyph) | TreeView.Glyph |
Batas | Tidak |
Item tampilan pohon: status hover
Item tampilan pohon di hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | TreeView.Background |
Latar depan (Teks) | TreeView.Background |
Latar depan (Glyph) | TreeView.GlyphMouseOver |
Batas | Tidak |
Item tampilan pohon: seret ke atas status
Item tampilan pohon saat diseret
Elemen | Nama token: Category.color |
---|---|
Latar belakang | TreeView.DragOverItem |
Latar depan (Teks) | TreeView.DragOverItem |
Latar depan (Glyph) | TreeView.DragOverItemGlyph |
Batas | Tidak |
Item tampilan pohon: dipilih, status terfokus
Item tampilan pohon yang dipilih dan difokuskan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | TreeView.SelectedItemActive |
Latar depan (Teks) | TreeView.SelectedItemActive |
Latar depan (Glyph) | TreeView.SelectedItemActiveGlyph |
Batas | TreeView.FocusVisualBorder |
Item tampilan pohon: dipilih, status tidak fokus
Item tampilan pohon yang dipilih dan tidak fokus
Elemen | Nama token: Category.color |
---|---|
Latar belakang | TreeView.SelectedItemInactive |
Latar depan (Teks) | TreeView.SelectedItemInactive |
Latar depan (Glyph) | TreeView.SelectedItemInactiveGlyph |
Batas | Tidak |
Item tampilan pohon: status diarahkan, dipilih, dan difokuskan
Item tampilan pohon yang dipilih dan difokuskan pada hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | TreeView.SelectedItemActive |
Latar depan (Teks) | TreeView.SelectedItemActive |
Latar depan (Glyph) | TreeView.SelectedItemActiveGlyphMouseOver |
Batas | TreeView.FocusVisualBorder |
Item tampilan pohon: status diarahkan, dipilih, dan tidak fokus
Item tampilan pohon yang dipilih dan tidak difokuskan di hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | TreeView.SelectedItemInactive |
Latar depan (Teks) | TreeView.SelectedItemInactive |
Latar depan (Glyph) | TreeView.SelectedItemActiveGlyphMouseOver |
Batas | Tidak |
Penampilan shell
Latar belakang
Latar belakang lingkungan terdiri dari dua lapisan. Lapisan bawah adalah warna solid yang mencakup seluruh IDE. Lapisan atas pas di bawah rak perintah dan di antara jendela alat sembunyikan saluran secara otomatis di tepi kiri dan kanan IDE. Lapisan latar belakang atas dan bawah diatur ke warna yang sama dalam tema Terang dan Gelap.
Latar belakang shell Visual Studio (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... untuk tempat di mana Anda ingin mencocokkan latar belakang lingkungan Visual Studio. | ... sebagai isian untuk tempat-tempat yang bukan permukaan latar belakang. |
... sebagai latar belakang untuk menempatkan elemen latar depan. |
Tampilan shell lapisan bawah
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.EnvironmentBackground |
Penampilan shell lapisan atas
Perhentian gradien diatur ke nilai warna yang sama di tema Visual Studio 2013 Terang dan Gelap.
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.EnvironmentBackgroundGradientBegin Environment.EnvironmentBackgroundGradientEnd Environment.EnvironmentBackgroundGradientMiddle1 Environment.EnvironmentBackgroundGradientMiddle2 |
Rak perintah
Dua set nama token digunakan untuk latar belakang rak perintah: satu set tempat bilah menu berada dan satu untuk tempat bilah perintah berada. Grup bilah perintah individual memiliki nilai warna latar belakangnya sendiri, yang dibahas secara lebih rinci di bagian "bilah perintah". Bilah menu dan teks bilah perintah dibahas di bagian menu dan bilah perintah.
Rak perintah Visual Studio (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... untuk area tempat Anda menempatkan menu atau toolbar. | ... untuk area yang tidak mirip dengan rak perintah. |
... dengan kombinasi nama token latar belakang/latar depan yang benar. |
Bilah menu rak perintah
Perhentian gradien diatur ke nilai warna yang sama di tema Visual Studio 2013 Terang dan Gelap.
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.CommandShelfHighlightGradientBegin Environment.CommandShelfHighlightGradientMiddle Environment.CommandShelfHighlightGradientEnd |
Bilah perintah rak perintah
Perhentian gradien diatur ke nilai warna yang sama di tema Visual Studio 2013 Terang dan Gelap.
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.CommandShelfBackgroundGradientBegin Environment.CommandShelfBackgroundGradientMiddle Environment.CommandShelfBackgroundGradientEnd |
Perancang Manifes
Perancang Manifes dirancang sebagai cara untuk mempermudah pengeditan file manifes di proyek Windows 8 dan Windows Telepon 8. Meskipun tidak ada kerangka kerja bersama yang tersedia untuk dikonsumsi, mungkin sesuai bagi Anda untuk mencocokkan tata letak desain dan warna tab orientasi/navigasi dan struktur keseluruhan. Untuk informasi selengkapnya tentang detail tata letak, lihat Tata Letak untuk Visual Studio.
Perancang Manifes (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... untuk desainer yang mirip dengan Perancang Manifes. | ... jika Anda memiliki lebih dari enam tab. |
... sebagai ganti menggunakan kontrol tab umum di bagian atas editor dalam sumur dokumen. | ... untuk UI apa pun yang tidak terstruktur seperti Perancang Manifes. |
Tab Yang dipilih Perancang Manifes: status default
Elemen | Nama token: Category.color |
---|---|
Latar belakang | ManifestDesigner.TabActive |
Batas | Tidak |
Panel deskripsi yang dipilih Perancang Manifes: status default
Elemen | Nama token: Category.color |
---|---|
Latar belakang | ManifestDesigner.DescriptionPane |
Halaman konten yang dipilih Perancang Manifes: status default
Elemen | Nama token: Category.color |
---|---|
Latar belakang | ManifestDesigner.Background |
Teks pembantu dialog | ManifestDesigner.WatermarkText (Nama token ini tidak cocok dengan fungsinya.) |
Tab Perancang Manifes: status tidak dipilih
Elemen | Nama token: Category.color |
---|---|
Latar belakang | ManifestDesigner.Tab.Inactive |
Tab Perancang Manifes: status hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | ManifestDesigner.Tab.Mouseover |
Struktur perintah
Menu
Menu dapat terjadi di beberapa tempat dalam Visual Studio: bilah menu utama, disematkan di jendela dokumen atau alat, atau pada klik kanan di berbagai lokasi di seluruh IDE. Implementasi menu yang terkait dengan elemen UI lainnya dibahas di bagian untuk elemen masing-masing. Anda harus selalu menggunakan implementasi menu standar yang disediakan oleh lingkungan Visual Studio. Namun, dalam beberapa instans langka Anda mungkin tidak memiliki akses ke menu Visual Studio standar. Dalam situasi ini, gunakan nama token berikut untuk memastikan bahwa UI Anda konsisten dengan menu lain di Visual Studio.
Menu Visual Studio (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... saat Anda perlu membuat menu kustom. | ... warna latar belakang saja. Selalu gunakan kombinasi latar belakang/latar depan seperti yang ditentukan. |
... saat Anda memiliki komponen UI baru yang ingin Anda cocokkan dengan menu Visual Studio. |
Judul menu
Judul menu terdiri dari latar belakang, batas, dan teks judul, serta glyph opsional, biasanya saat menu ditemukan di bilah perintah.
Judul menu (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... setiap kali Anda membuat judul menu kustom. | ... untuk apa pun yang anda tidak ingin selalu cocok dengan judul menu. |
... dalam kombinasi latar belakang/latar depan selain yang ditentukan. |
Judul menu: status default
Judul menu default
Judul menu default dengan glyph
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Tidak |
Latar depan (teks) | Environment.CommandBarTextActive |
Latar depan (glyph) | Environment.CommandBarMenuGlyph |
Batas | Tidak |
Judul menu: status hover
Judul menu di hover
Judul menu dengan glyph di hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.CommandBarMouseOverBackgroundBegin (Gradien berhenti untuk token ini tidak digunakan dalam UI bertema.) |
Latar depan (teks) | Environment.CommandBarTextHover |
Latar depan (glyph) | Environment.CommandBarMenuMouseOverGlyph |
Batas | Environment.CommandBarBorder |
Judul menu: status ditekan
Judul menu yang ditekan
Judul menu yang ditekan dengan glyph
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.CommandBarMenuBackgroundGradientBegin (Gradien berhenti untuk token ini tidak digunakan dalam UI bertema.) |
Latar depan (Teks) | Environment.CommandBarTextActive |
Latar depan (Glyph) | Environment.CommandBarMenuMouseDownGlyph |
Batas | Environment.CommandBarMenuBorder (Hanya sisi kiri, atas, dan kanan.) |
Judul menu: status dinonaktifkan
Judul menu yang dinonaktifkan dengan glyph
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Tidak |
Latar depan (Teks) | Environment.CommandBarTextInactive |
Latar depan (Glyph) | Environment.CommandBarTextInactive |
Batas | Tidak |
Item menu
Item menu individual terdiri dari teks menu dan ikon opsional, kotak centang, atau submenu glyph. Latar belakang dan warna teksnya berubah pada hover. Token warna ini adalah pasangan latar belakang/latar depan.
Menggunakan... | Jangan gunakan ... |
---|---|
... untuk daftar drop-down apa pun yang diluncurkan dari bilah menu atau bilah perintah. | ... untuk daftar drop-down apa pun dalam konteks lain. |
... dalam kombinasi latar belakang/latar depan selain yang ditentukan. |
Item menu: status default
Item menu default
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.CommandBarMenuBackgroundGradientBegin (Gradien berhenti untuk token ini tidak digunakan dalam UI bertema.) |
Latar depan (Teks) | Environment.CommandBarTextActive |
Latar depan (Submenu glyph) | Environment.CommandBarMenuSubmenuGlyph |
Batas | Environment.CommandBarMenuBorder |
Latar belakang saluran ikon | Environment.CommandBarMenuIconBackground |
Pemisah | Environment.CommandBarMenuSeparator |
Bayangan | Environment.DropShadowBackground |
Item menu: status yang dicentang dan dipilih
Item menu yang dicentang
Item menu terpilih
Elemen | Nama token: Category.color |
---|---|
Tanda centang | Environment.CommandBarCheckBox |
Centang latar belakang tanda | Environment.CommandBarSelectedIcon |
Latar belakang ikon | Environment.CommandBarSelected |
Batas ikon | Environment.CommandBarSelectedBorder |
Item menu: status hover
Item menu di hover
Item menu yang dicentang di hover
Item menu terpilih di hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.CommandBarMenuItemMouseOver |
Latar depan (Teks) | Environment.CommandBarMenuItemMouseOverText |
Latar depan (Submenu glyph) | Environment.CommandBarMenuMouseOverSubmenuGlyph |
Tanda centang | Environment.CommandBarCheckBoxMouseOver |
Centang latar belakang tanda | Environment.CommandBarHoverOverSelectedIcon |
Latar belakang ikon | Environment.CommandBarHoverOverSelected |
Batas ikon | Environment.CommandBarHoverOverSelectedIconBorder |
Item menu: status dinonaktifkan
Item menu yang dinonaktifkan
Item menu yang dinonaktifkan dengan tanda centang
Elemen | Nama token: Category.color |
---|---|
Latar depan (Teks) | Environment.CommandBarTextInactive |
Latar depan (Submenu glyph) | Environment.CommandBarMenuSubmenuGlyph |
Tanda centang | Environment.CommandBarCheckBoxDisabled |
Centang latar belakang tanda | Environment.CommandBarSelectedIconDisabled |
Bilah perintah
Bilah perintah dapat muncul di beberapa tempat dalam Visual Studio IDE, terutama rak perintah dan disematkan di jendela alat atau dokumen.
Secara umum, selalu gunakan implementasi bilah perintah standar yang disediakan oleh lingkungan Visual Studio. Menggunakan mekanisme standar memastikan bahwa semua detail visual akan muncul dengan benar dan elemen interaktif tersebut, akan berperilaku konsisten dengan kontrol bilah perintah Visual Studio lainnya. Namun, jika perlu bagi Anda untuk membangun bilah perintah Anda sendiri, pastikan Anda menatanya dengan benar menggunakan nama token berikut.
Bilah perintah (garis merah)
Tombol luapan (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... di tempat-tempat di mana Anda memerlukan bilah perintah yang disematkan, tetapi tidak dapat menggunakan implementasi bilah perintah Visual Studio standar. | ... untuk elemen UI yang tidak mirip dengan bilah perintah. |
... untuk komponen bilah perintah selain yang nama tokennya ditentukan. |
Grup bilah perintah
Grup bilah perintah terdiri dari sekumpulan kontrol bilah perintah terkait dan mungkin berisi sejumlah tombol, tombol terpisah, menu drop-down, kotak kombo, atau menu. Warna untuk kontrol tersebut diatur oleh nama token terpisah dan dibahas secara individual di tempat lain dalam panduan ini. Baris pemisah digunakan untuk membagi grup bilah perintah menjadi subgrup terkait.
Grup bilah perintah (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... di tempat-tempat di mana Anda memerlukan bilah perintah yang disematkan, tetapi tidak dapat menggunakan implementasi bilah perintah Visual Studio standar. | ... untuk elemen UI yang tidak mirip dengan bilah perintah. |
... untuk komponen bilah perintah selain yang nama tokennya ditentukan. |
Grup bilah perintah: status default
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.CommandBarGradientBegin (Gradien berhenti untuk token ini tidak digunakan dalam UI bertema.) |
Batas | Environment.CommandBarToolBarBorder |
Seret handel | Environment.CommandBarDragHandle |
Pemisah | Environment.CommandBarToolBarSeparator Environment.CommandBarToolBarSeparatorHighlight |
Ikon perintah
Ikon perintah (garis merah)
Ikon perintah dengan teks (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... untuk tombol apa pun yang akan ditempatkan pada bilah perintah. | ... untuk kontrol yang memiliki nama token mereka sendiri. |
... dalam kombinasi latar belakang/latar depan selain yang ditentukan. |
Ikon perintah: status default
Ikon perintah default
Elemen | Nama token: Category.color |
---|---|
Latar belakang | N/A (mewarisi dari latar belakang bilah perintah) |
Latar depan (Teks) | Environment.CommandBarTextActive |
Batas | T/A |
Ikon perintah: status default, dipilih
Ikon perintah default yang dipilih
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.CommandBarSelected |
Latar depan (Teks) | Environment.CommandBarTextSelected |
Batas | Environment.CommandBarSelectedBorder |
Ikon perintah: arahkan mouse atau status fokus
Ikon perintah pada hover atau fokus
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.CommandBarMouseOverBackgroundBegin (Gradien berhenti untuk token ini tidak digunakan dalam UI bertema.) |
Latar depan (Teks) | Environment.CommandBarTextHover |
Batas | Environment.CommandBarBorder |
Ikon perintah: arahkan mouse atau status fokus, dipilih
Ikon perintah yang dipilih pada hover atau fokus
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.CommandBarHoverOverSelected |
Latar depan (Teks) | Environment.CommandBarTextHoverOverSelected |
Batas | Environment.CommandBarHoverOverSelectedIconBorder |
Ikon perintah: status ditekan
Ikon perintah yang ditekan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.CommandBarMouseDownBackgroundBegin (Gradien berhenti untuk token ini tidak digunakan dalam UI bertema.) |
Latar depan (Teks) | Environment.CommandBarTextMouseDown |
Batas | Environment.CommandBarBorder |
Ikon perintah: status dinonaktifkan
Ikon perintah yang dinonaktifkan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | N/A (mewarisi dari latar belakang bilah perintah) |
Latar depan (Teks) | Environment.CommandBarTextInactive |
Batas | T/A |
Kotak kombo bilah perintah
Penting
Kotak kombo mirip dengan drop-down, tetapi menyertakan wilayah teks yang dapat diedit. Jika drop-down Anda tidak menyertakan wilayah teks yang dapat diedit, gunakan token warna untuk menu drop-down bilah perintah.
Kotak kombo bilah perintah (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... saat membuat kotak kombo kustom. | ... untuk apa pun yang Anda tidak ingin selalu cocok dengan antarmuka pengguna bilah perintah. |
... saat membuat kontrol bilah perintah yang mirip dengan kotak kombo. | ... ketika Anda memiliki akses ke kotak kombo bergaya. |
Bidang input kotak kombo bilah perintah: status default
Bidang input kotak kombo bilah perintah
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.ComboBoxBackground |
Latar depan (Teks) | Environment.ComboBoxText |
Batas | Environment.ComboBoxBorder |
Pemisah | Tidak ada pemisah |
Tombol drop-down bilah perintah: status default
Tombol drop-down bilah perintah
Elemen | Nama token: Category.color |
---|---|
Latar belakang | N/A (mewarisi dari latar belakang bilah perintah) |
Latar depan (Glyph) | Environment.ComboBoxGlyph |
Daftar drop-down bilah perintah: status default
Daftar drop-down bilah perintah
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.ComboBoxPopupBackgroundBegin (Gradien berhenti untuk token ini tidak digunakan dalam UI bertema.) |
Latar depan (Teks) | Environment.ComboBoxItemText |
Batas | Environment.ComboBoxPopupBorder |
Bidang input kotak kombo bilah perintah: status hover
Bidang input kotak kombo bilah perintah pada hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.ComboBoxMouseOverBackgroundBegin (Gradien berhenti untuk token ini tidak digunakan dalam UI bertema.) |
Latar depan (Teks) | Environment.ComboBoxMouseOverText |
Batas | Environment.ComboBoxMouseOverBorder |
Pemisah | Environment.ComboBoxMouseOverSeparator |
Tombol drop-down bilah perintah: status hover
Tombol drop-down bilah perintah di hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.ComboBoxButtonMouseOverBackground |
Latar depan (Glyph) | Environment.ComboBoxMouseOverGlyph |
Daftar drop-down bilah perintah: status hover
Daftar drop-down bilah perintah di hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang (Item menu) | Environment.ComboBoxItemMouseOverBackground |
Latar depan (Teks) | Environment.ComboBoxItemMouseOverText |
Batas (Item menu) | Environment.ComboBoxItemMouseOverBorder |
Bidang input kotak kombo bilah perintah: status terfokus
Bidang input kotak kombo bilah perintah terfokus
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.ComboBoxFocusedBackground |
Latar depan (Teks) | Environment.ComboBoxFocusedText |
Batas | Environment.ComboBoxFocusedBorder |
Pemisah | Environment.ComboBoxFocusedButtonSeparator |
Tombol drop-down bilah perintah: status terfokus
Tombol drop-down bilah perintah yang difokuskan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.ComboBoxFocusedButtonBackground |
Latar depan (Glyph) | Environment.ComboBoxFocusedGlyph |
Bidang input kotak kombo bilah perintah: status ditekan
Bidang input kotak kombo bilah perintah yang ditekan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.ComboBoxMouseDownBackground |
Latar depan (Teks) | Environment.ComboBoxMouseDownText |
Batas | Environment.ComboBoxMouseDownBorder |
Pemisah | Environment.ComboBoxMouseDownSeparator |
Tombol drop-down bilah perintah: status ditekan
Tombol drop-down bilah perintah yang ditekan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.ComboBoxButtonMouseDownBackground |
Latar depan (Glyph) | Environment.ComboBoxMouseDownGlyph |
Bidang input kotak kombo bilah perintah: status dinonaktifkan
Bidang input kotak kombo bilah perintah yang dinonaktifkan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.ComboBoxDisabledBackground |
Latar depan (Teks) | Environment.ComboBoxDisabledText |
Batas | Environment.ComboBoxDisabledBorder |
Pemisah | Tidak ada pemisah |
Tombol drop-down bilah perintah: status dinonaktifkan
Tombol drop-down bilah perintah yang dinonaktifkan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Tidak |
Latar depan (Glyph) | Environment.ComboBoxDisabledGlyph |
Menu drop-down bilah perintah
Penting
Drop-down mirip dengan kotak kombo, tetapi tidak memiliki wilayah teks yang dapat diedit. Jika drop-down Anda menyertakan wilayah teks yang dapat diedit, gunakan token warna untuk kotak kombo bilah perintah.
Menu drop-down bilah perintah (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... saat Anda membuat kontrol daftar drop-down kustom. | ... untuk apa pun yang tidak mirip dengan daftar drop-down. |
... untuk kotak kombo atau tombol pisahkan. |
Bidang pilihan drop-down bilah perintah: status default
Bidang pilihan drop-down bilah perintah default
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.DropDownBackground |
Latar depan (Teks) | DropDownText |
Batas | DropDownBorder |
Pemisah | Tidak ada pemisah |
Tombol drop-down bilah perintah: status default
Tombol drop-down bilah perintah default
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Tidak |
Latar depan (Glyph) | Environment.DropDownGlyph |
Daftar drop-down bilah perintah: status default
Daftar drop-down bilah perintah default
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.DropDownPopupBackgroundBegin (Gradien berhenti untuk token ini tidak digunakan dalam UI bertema.) |
Latar depan (Teks) | Environment.ComboBoxItemText |
Batas | Environment.DropDownPopupBorder |
Bayangan | Environment.DropShadowBackground |
Bidang pilihan drop-down bilah perintah: status hover
Bidang pilihan drop-down bilah perintah di hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.DropDownMouseOverBackgroundBegin (Gradien berhenti untuk token ini tidak digunakan dalam UI bertema.) |
Latar depan (Teks) | Environment.DropDownMouseOverText |
Batas | Environment.DropDownMouseOverBorder |
Pemisah | Environment.DropDownButtonMouseOverSeparator |
Tombol drop-down bilah perintah: status hover
Tombol drop-down bilah perintah di hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.DropDownButtonMouseOverBackground |
Latar depan (Glyph) | Environment.DropDownMouseOverGlyph |
Daftar drop-down bilah perintah: status hover
Daftar drop-down bilah perintah di hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang (Item menu) | Environment.ComboBoxItemMouseOverBackground |
Latar depan (Teks) | Environment.ComboBoxItemMouseOverText |
Batas (Item menu) | Environment.ComboBoxItemMouseOverBorder |
Bidang pilihan drop-down bilah perintah: status ditekan
Bidang pilihan drop-down bilah perintah yang ditekan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.DropDownMouseDownBackground |
Latar depan (Teks) | Environment.DropDownMouseDownText |
Batas | Environment.DropDownMouseDownBorder |
Pemisah | Environment.DropDownButtonMouseDownSeparator |
Tombol drop-down bilah perintah: status ditekan
Tombol drop-down bilah perintah yang ditekan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.DropDownButtonMouseDownBackground |
Latar depan (Glyph) | Environment.DropDownMouseDownGlyph |
Bidang pilihan drop-down bilah perintah: status dinonaktifkan
Bidang pilihan drop-down bilah perintah yang dinonaktifkan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.DropDownDisabledBackground |
Latar depan (Teks) | Environment.DropDownDisabledText |
Batas | Environment.DropDownDisabledBorder |
Pemisah | Tidak ada pemisah |
Tombol drop-down bilah perintah: status dinonaktifkan
Tombol drop-down bilah perintah yang dinonaktifkan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | T/A |
Latar depan (Glyph) | Environment.DropDownDisabledGlyph |
Tombol pemisah bilah perintah
Tombol terpisah berbagi banyak nama token dengan kontrol bilah perintah lainnya, seperti tombol, menu, dan teks bilah perintah. Semua tindakan yang diperlukan dan nama token tombol drop-down diulang di sini untuk kenyamanan. Daftar drop-down tombol terpisah adalah implementasi menu bilah perintah.
Tombol pisahkan bilah perintah (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... saat Anda membuat tombol pemisahan kustom. | ... untuk jenis tombol lainnya. |
... dalam kombinasi latar belakang/latar depan selain yang ditentukan. |
Tombol pisahkan bilah perintah: status default
Tombol pisahkan bilah perintah default
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Tidak |
Latar depan (Teks) | Environment.CommandBarTextActive |
Latar depan (Glyph) | Environment.CommandBarSplitButtonGlyph |
Batas | T/A |
Pemisah | T/A |
Tombol pisahkan bilah perintah: status hover
Tombol pisahkan bilah perintah di hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.CommandBarMouseOverBackgroundBegin (Gradien berhenti untuk token ini tidak digunakan dalam UI bertema.) |
Latar depan (Teks) | Environment.CommandBarTextHover |
Latar depan (Glyph) | Environment.CommandBarSplitButtonMouseOverGlyph |
Batas | Environment.CommandBarBorder |
Pemisah | Environment.CommandBarSplitButtonSeparator |
Tombol pisahkan bilah perintah: status ditekan
Tombol pisahkan bilah perintah yang ditekan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.CommandBarMouseDownBackgroundBegin (Gradien berhenti untuk token ini tidak digunakan dalam UI bertema.) |
Latar depan (Teks) | Environment.CommandBarTextMouseDown |
Latar depan (Glyph) | Environment.CommandBarSplitButtonMouseDownGlyph |
Batas | Environment.CommandBarBorder |
Pemisah | T/A |
Tombol pisahkan bilah perintah: status dinonaktifkan
Tombol pemisah bilah perintah yang dinonaktifkan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | T/A |
Latar depan (Teks) | Environment.ComboBoxItemTextInactive |
Latar depan (Glyph) | Environment.CommandBarTextInactive |
Batas | T/A |
Pemisah | T/A |
Bilah perintah tombol 'Opsi lainnya' dan 'Luapan'
Tombol "Opsi lainnya" digunakan saat grup bilah perintah dapat disesuaikan dengan menambahkan atau menghapus tombol bilah perintah terkait. Tombol "Luapan" muncul ketika bilah perintah terpotong karena kurangnya ruang horizontal, dan saat klik memperlihatkan menu yang berisi tombol bilah perintah yang tidak dapat ditampilkan. Warna untuk kedua tombol ini dikontrol oleh sekumpulan nama token yang sama.
Tombol 'Opsi lainnya' bilah perintah (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... untuk tombol 'Opsi lainnya' atau 'Luapan' kustom. | ... untuk tombol yang tidak memiliki fungsionalitas serupa dengan tombol 'Opsi lainnya' atau 'Luapan'. |
Tombol 'Opsi lainnya' dan 'Luapan' bilah perintah: status default
Tombol 'Opsi lainnya' bilah perintah default
Tombol 'Luapan' bilah perintah default
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.CommandBarOptionsBackground |
Latar depan (Glyph) | Environment.CommandBarOptionsGlyph |
Bilah perintah tombol 'Opsi lainnya' dan 'Luapan': status hover
Tombol 'Opsi lainnya' bilah perintah di hover
Tombol 'Luapan' bilah perintah di hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.CommandBarOptionsMouseOverBackgroundBegin (Gradien berhenti untuk token ini tidak digunakan dalam UI bertema.) |
Latar depan (Glyph) | Environment.CommandBarOptionsMouseDownGlyph |
Bilah perintah tombol 'Opsi lainnya' dan 'Luapan': status ditekan
Tombol 'Opsi lainnya' bilah perintah yang ditekan
Tombol 'Luapan' bilah perintah yang ditekan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.CommandBarOptionsMouseDownBackgroundBegin (Gradien berhenti untuk token ini tidak digunakan dalam UI bertema.) |
Latar depan (Glyph) | Environment.CommandBarOptionsMouseDownGlyph |
Jendela dokumen
Tidak perlu mereplikasi jendela dokumen, karena disediakan oleh lingkungan Visual Studio. Namun, Anda mungkin memutuskan bahwa Anda ingin memanfaatkan warna yang digunakan di jendela dokumen sehingga UI Anda selalu tampak konsisten dengan bagian lingkungan Visual Studio ini.
Saat menggunakan token warna jendela dokumen, berhati-hatilah untuk menggunakannya hanya untuk elemen serupa, dan selalu berpasangan. Jika Anda tidak melakukannya, Anda mungkin mendapatkan hasil yang tidak terduga di UI Anda.
Bingkai jendela dokumen
Jendela dokumen dapat ditampung di IDE atau mengambang sebagai jendela terpisah. Ketika jendela dokumen mengambang di luar IDE, jendela dokumen masih berada di dalam sumur dokumen, dan memiliki warna latar belakang, batas, teks, dan tab yang sama seperti saat merupakan bagian dari IDE. Namun, dokumen berada di dalam bingkai yang memiliki latar belakang, batas, dan warna teksnya sendiri. Ketika jendela alat ditampar di dokumen dengan baik, jendela tersebut mewarisi perilaku dan warna untuk tab mereka dari nama token jendela dokumen.
Jendela dokumen yang ditampar (garis merah)
Jendela dokumen mengambang (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... di mana saja Anda membuat UI yang ingin Anda cocokkan dengan jendela dokumen. | ... untuk antarmuka pengguna apa pun yang tidak ingin Anda ubah secara otomatis jika shell memiliki pembaruan tema. |
Jendela dokumen tertampung atau mengambang: status default
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Bergantung pada jenis dokumen |
Latar depan (Teks) | Bergantung pada jenis dokumen |
Batas | Environment.ToolWindowBorder |
Bingkai jendela dokumen terfokus dan mengambang: status default
Bingkai jendela dokumen terfokus dan mengambang default
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.ToolWindowFloatingFrame |
Latar depan (Teks) | Environment.ToolWindowFloatingFrame |
Latar depan (Glyph) | Environment.RaftedWindowButtonActiveGlyph |
Batas | Environment.MainWindowActiveDefaultBorder |
Batas (Glyph) | Environment.RaftedWindowButtonActiveBorder (Atur ke transparan) |
Bingkai jendela dokumen mengambang yang tidak fokus: status default
Bingkai jendela dokumen default yang tidak fokus dan mengambang
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.ToolWindowFloatingFrameInactive |
Latar depan (Teks) | Environment.ToolWindowFloatingFrameInactive |
Latar depan (Glyph) | Environment.RaftedWindowButtonInactiveGlyph |
Batas | Environment.MainWindowInactiveBorder |
Batas (Glyph) | Environment.RaftedWindowButtonInactiveBorder (Atur ke transparan) |
Bingkai jendela dokumen terfokus dan mengambang: status hover
Bingkai jendela dokumen terfokus dan mengambang pada hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang (Glyph) | Environment.RaftedWindowButtonHoverActive |
Latar depan (Glyph) | Environment.RaftedWindowButtonHoverActiveGlyph |
Batas (Glyph) | Environment.RaftedWindowButtonHoverActiveBorder |
Bingkai jendela dokumen mengambang yang tidak fokus: status hover
Bingkai jendela dokumen mengambang yang tidak fokus pada hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang (Glyph) | EnvironmentRaftedWindowButtonHoverInactive |
Latar depan (Glyph) | Environment.RaftedWindowButtonHoverInactiveGlyph |
Batas (Glyph) | Environment.RaftedWindowButtonHoverInactiveBorder |
Bingkai jendela dokumen terfokus dan mengambang: status ditekan
Bingkai jendela dokumen terfokus dan mengambang saat ditekan
Elemen | Nama token: Category.color |
---|---|
Latar belakang (Glyph) | Environment.RaftedWindowButtonDown |
Latar depan (Glyph) | Environment.RaftedWindowButtonDownGlyph |
Batas (Glyph) | Environment.RaftedWindowButtonDownBorder |
Tab Dokumen
Tab dokumen berada di saluran tab untuk menunjukkan dokumen mana yang saat ini terbuka, bersama dengan dokumen yang saat ini dipilih atau aktif. Jendela alat juga dapat ditampung di saluran tab dokumen jika pengguna menempatkannya di sana. Dalam situasi ini, mereka menggunakan warna tab yang sama dengan jendela dokumen. Jika Anda membuat UI yang ingin selalu cocok dengan warna jendela dokumen (termasuk pembaruan tema atau jika tema baru diinstal), maka referensikan token warna ini.
Tab dokumen (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... di mana saja Anda membuat UI yang ingin Anda cocokkan dengan tab dokumen dan secara otomatis mengambil pembaruan tema atau warna tema baru. | ... untuk antarmuka pengguna apa pun yang tidak ingin Anda ubah secara otomatis saat shell memiliki pembaruan tema. |
Buka tab dokumen
Setiap dokumen yang terbuka memiliki tab di saluran tab dokumen yang menampilkan namanya. Dokumen dapat dipilih atau dibuka di latar belakang, dan tabnya mencerminkan status berikut:
Tab terpilih mewakili dokumen yang saat ini ditampilkan dalam sumur dokumen. Tab yang dipilih memiliki batas dokumen yang meluas di tepi atas sumur dokumen.
Tab latar belakang adalah tab dokumen apa pun yang bukan tab yang saat ini dipilih. Setelah diklik, mereka menjadi tab yang dipilih dan memperoleh semua warna latar belakang, batas, dan teks dari nama token tersebut.
Buka tab dokumen (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... saat Anda membuat tab dokumen kustom. | ... untuk tab provisi (pratinjau). |
... untuk antarmuka pengguna apa pun yang tidak ingin Anda ubah secara otomatis jika shell memiliki pembaruan tema. |
Tab dokumen yang dipilih dan difokuskan
Tab dokumen yang dipilih dan difokuskan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.FileTabSelectedGradientTop (Gradien berhenti untuk token ini tidak digunakan dalam UI bertema.) |
Latar depan (Teks) | Environment.FileTabSelectedText |
Batas | Environment.FileTabSelectedBorder (Atur ke warna yang sama dengan latar belakang.) |
Batas dokumen | Environment.FileTabDocumentBorderBackground |
Tab dokumen yang dipilih dan tidak difokuskan
Tab dokumen yang dipilih dan tidak difokuskan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.FileTabInactiveGradientTop (Gradien berhenti untuk token ini tidak digunakan dalam UI bertema.) |
Latar depan (Teks) | Environment.FileTabInactiveText |
Batas | Environment.FileTabInactiveBorder (Atur ke warna yang sama dengan latar belakang.) |
Batas dokumen | Environment.FileTabInactiveDocumentBorderBackground |
Tab dokumen latar belakang: status default
Tab dokumen latar belakang default
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.FileTabBackground |
Latar depan (Teks) | Environment.FileTabText |
Batas | Environment.FileTabBorder (Atur ke warna yang sama dengan latar belakang.) |
Tab dokumen latar belakang: status hover
Tab dokumen latar belakang pada hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.FileTabHotGradientTop (Gradien berhenti untuk token ini tidak digunakan dalam UI bertema.) |
Latar depan (Teks) | Environment.FileTabHotText |
Batas | Environment.FileTabHotBorder (Atur ke warna yang sama dengan latar belakang.) |
Tab Pratinjau
Juga disebut tab "provisi". Tab pratinjau muncul di sisi kanan saluran tab dokumen saat pengguna mengklik item di jendela alat Penjelajah Solusi. Ini bertindak sebagai pratinjau dokumen dan juga memberi pengguna opsi untuk menjaga dokumen tetap terbuka di sisi kiri saluran tab dokumen. Hanya satu tab pratinjau yang terbuka yang dapat terbuka pada satu waktu. Tab pratinjau memiliki latar belakang dan status yang dipilih, seperti tab terbuka, dan dapat difokuskan atau tidak fokus dalam status aktifnya.
Tab Pratinjau (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... di mana saja Anda membuat pratinjau provisi dan ingin beberapa elemen cocok dengan warna tab pratinjau saat ini. | ... untuk segala jenis dokumen atau tab yang tidak tersedia (pratinjau). |
... untuk antarmuka pengguna apa pun yang tidak ingin Anda ubah secara otomatis jika shell memiliki pembaruan tema. |
Tab pratinjau yang difokuskan dan dipilih
Tab pratinjau yang difokuskan dan dipilih
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.FileTabProvisionalSelectedActive |
Latar depan (Teks) | Environment.FileTabProvisionalSelectedActiveForeground |
Batas | Environment.FileTabProvisionalSelectedActiveBorder (Atur ke warna yang sama dengan latar belakang.) |
Batas dokumen | Environment.FileTabProvisionalSelectedActiveBorder |
Tidak fokus, tab pratinjau yang dipilih
Tidak fokus, tab pratinjau yang dipilih
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.FileTabProvisionalSelectedInactive |
Latar depan (Teks) | Environment.FileTabProvisionalSelectedInactiveForeground |
Batas | Environment.FileTabProvisionalSelectedInactiveBorder |
Batas dokumen | Environment.FileTabProvisionalSelectedInactiveBorder |
Tab pratinjau latar belakang: status default
Tab pratinjau latar belakang default
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.FileTabProvisionalInactive |
Latar depan (Teks) | Environment.FileTabProvisionalInactiveForeground |
Batas | Environment.FileTabProvisionalInactiveBorder (Atur ke warna yang sama dengan latar belakang.) |
Tab pratinjau latar belakang: status hover
Tab pratinjau latar belakang di hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.FileTabProvisionalHover |
Latar depan (Teks) | Environment.FileTabProvisionalHoverForeground |
Batas | Environment.FileTabProvisionalHoverBorder (Atur ke warna yang sama dengan latar belakang.) |
Tombol luapan dokumen
Tombol luapan dokumen ada jika ada satu atau beberapa dokumen yang terbuka, terlepas dari apakah ada ruang vertikal dalam konfigurasi saat ini agar pas dengan semua tab dokumen. Menu drop-down luapan dokumen, yang dikontrol oleh warna menu bilah perintah, menampilkan daftar semua dokumen yang terbuka, baik terlihat maupun tersembunyi, dan perubahan glyph luapan tergantung pada apakah semua dokumen yang terbuka ditampilkan di saluran tab.
Tombol luapan dokumen (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... saat Anda membuat tombol luapan dokumen kustom. | ... untuk UI yang tidak mirip dengan tombol luapan. |
... untuk tombol luapan bilah perintah. |
Tombol luapan dokumen: status default
Tombol luapan dokumen default
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.DocWellOverflowButtonBackground |
Latar depan (Glyph) | Environment.DocWellOverflowButtonGlyph |
Batas | T/A |
Tombol luapan dokumen: status hover
Tombol luapan dokumen di hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.DocWellOverflowButtonMouseOverBackground |
Latar depan (Glyph) | Environment.DocWellOverflowButtonMouseOverGlyph |
Batas | Environment.DocWellOverflowButtonMouseOverBorder |
Tombol luapan dokumen: status ditekan
Tombol luapan dokumen saat ditekan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.DocWellOverflowButtonMouseDownBackground |
Latar depan (Glyph) | Environment.DocWellOverflowButtonMouseDownGlyph |
Batas | Environment.DocWellOverflowButtonMouseDownBorder |
Pemberian tag
Visual Studio mendukung pemberian tag, yang memungkinkan pengguna untuk mendeklarasikan kata kunci yang dapat dicari untuk tujuan pelacakan. Misalnya, manajer dan pengembang proyek dapat menggunakan Team Foundation Server (TFS) untuk menandai item kerja. Tabel di bawah ini memberikan nama warna untuk tag itu sendiri dan glyph "tutup ikon" yang muncul dalam status hover dan dipilih.
Penandaan di Visual Studio (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... untuk UI yang mendukung pemberian tag. | ... untuk semua jenis UI lainnya. |
Tag
Tag: status default
Tag default
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Tag.Background |
Latar depan (Teks) | Tag.Background |
Tag: status hover
Tag pada hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Tag.HoverBackground |
Latar depan (Teks) | Tag.HoverBackgroundText |
Tag: status ditekan
Tag yang ditekan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Tag.PressedBackground |
Latar depan (Teks) | Tag.PressedBackgroundText |
Tag: status terpilih
Tag yang dipilih
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Tag.SelectedBackground |
Latar depan (Teks) | Tag.SelectedBackgroundText |
Tutup glyph tag (×)
Tutup (×) tag glyph: status default
Glyph tag Tutup Default (×)
Elemen | Nama token: Category.color |
---|---|
Latar belakang | T/A |
Latar depan (Glyph) | Tag.TagHoverGlyph |
Tutup (×) tag glyph: status hover
Tutup glyph tag (×) di hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Tag.TagHoverGlyphHoverBackground |
Latar depan (Glyph) | Tag.TagHoverGlyphHover |
Batas | Tag.TagHoverGlyphHoverBorder |
Tutup glyph tag (×): status ditekan
Glyph tag Tutup (×) Ditekan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Tag.TagHoverGlyphPressedBackground |
Latar depan (Glyph) | Tag.TagHoverGlyphPressed |
Batas | Tag.TagHoverGlyphPressedBorder |
Tag yang dipilih dengan glyph Tutup (×): status default
Tag default yang dipilih dengan glyph Tutup (×)
Elemen | Nama token: Category.color |
---|---|
Latar belakang | T/A |
Latar depan (Glyph) | Tag.TagSelectedGlyph |
Tag yang dipilih dengan glyph Tutup (×) : status hover
Tag yang dipilih dengan glyph Tutup (×) di hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Tag.TagSelectedGlyphHoverBackground |
Latar depan (Glyph) | Tag.TagSelectedGlyphHover |
Batas | Tag.TagSelectedGlyphHoverBorder |
Tag yang dipilih dengan glyph Tutup (×): status ditekan
Memilih, menekan tag dengan glyph Tutup (×)
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Tag.TagSelectedGlyphPressedBackground |
Latar depan(Glyph) | Tag.TagSelectedGlyphPressed |
Batas | Tag.TagSelectedGlyphPressedBorder |
Jendela alat
Tidak perlu mereplikasi jendela alat, karena disediakan oleh lingkungan Visual Studio. Namun, Anda mungkin memutuskan bahwa Anda ingin memanfaatkan warna yang digunakan di jendela alat sehingga UI Anda selalu tampak konsisten dengan bagian lingkungan Visual Studio ini.
Jendela alat (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... di mana saja Anda membuat UI yang ingin Anda cocokkan dengan jendela alat. | ... untuk antarmuka pengguna apa pun yang tidak ingin Anda ubah secara otomatis jika shell memiliki pembaruan tema. |
Bingkai jendela alat
Jendela alat di Visual Studio digunakan untuk berbagai tugas, dan dapat ada di salah satu dari beberapa status yang berbeda. Jika jendela alat terbuka, jendela tersebut dapat ditetapkan ke salah satu dari empat sisi area dokumen. Jendela alat juga dapat mengapung di luar IDE, yang memungkinkan mereka untuk diposisikan ulang di mana saja dalam layar pengguna. Jendela mengambang selalu berada di atas IDE. Terakhir, jendela alat dapat ditampung sebagai jendela dokumen dan muncul sebagai tab di dokumen dengan baik. Jendela alat yang telah ditampung sebagai jendela dokumen diwarnai sebagian menggunakan nama token jendela dokumen.
Bingkai jendela alat (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... di mana saja Anda membuat UI yang ingin Anda cocokkan dengan jendela alat. | ... untuk antarmuka pengguna apa pun yang tidak ingin Anda ubah secara otomatis jika shell memiliki pembaruan tema. |
Jendela alat yang ditampar
Jendela alat yang ditampar
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.ToolWindowBackground |
Batas | Environment.ToolWindowBorder |
Jendela alat mengambang dan terfokus
Jendela alat mengambang dan terfokus
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.ToolWindowBackground |
Batas | Environment.MainWindowActiveDefaultBorder |
Jendela alat mengambang dan tidak fokus
Jendela alat mengambang dan tidak fokus
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.ToolWindowBackground |
Batas | Environment.MainWindowInactiveBorder |
Jendela seperti kotak alat
Kotak alat adalah salah satu jendela alat umum yang paling sering digunakan di Visual Studio. Ini pada dasarnya adalah kontrol pohon dengan tema khusus dan gaya yang diterapkan.
Jendela seperti kotak alat (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... saat Anda merancang jendela alat yang ingin selalu konsisten dengan kotak alat shell. | ... untuk apa pun yang tidak mirip dengan UI kotak alat, atau jika Anda tidak yakin apakah UI Anda akan mengalami masalah jika warna kotak alat shell berubah. |
Simpul kotak alat: status default
Simpul induk kotak alat default
Simpul anak kotak alat default
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.ToolboxContent (Judul) |
Latar belakang | Environment.ToolWindowBackground (Item individual, atau seluruh jendela jika tidak ada kontrol yang tersedia) |
Batas | Tidak |
Latar depan (Glyph) | Environment.ToolboxContent |
Latar depan (Teks) | Environment.ToolboxContent |
Simpul anak kotak alat: status hover
Simpul anak kotak alat di hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.ToolboxContentMouseOver (Item individual saja) |
Batas | Tidak |
Latar depan (Teks) | Environment.ToolboxContentMouseOver (Item individual saja) |
Simpul kotak alat yang dipilih: status terfokus
Simpul induk kotak alat yang difokuskan dan dipilih
Simpul anak kotak alat yang difokuskan dan dipilih
Elemen | Nama token: Category.color |
---|---|
Latar belakang | TreeView.SelectedItemActive Dari kategori tampilan Pohon |
Batas | TreeView.FocusVisualBorder Dari kategori tampilan Pohon |
Latar depan (Glyph) | TreeView.SelectedItemActive Dari kategori tampilan Pohon |
Latar depan (Teks) | TreeView.SelectedItemActive Dari kategori tampilan Pohon |
Simpul kotak alat yang dipilih: status tidak fokus
Simpul induk kotak alat yang dipilih dan tidak fokus
Simpul anak kotak alat yang dipilih dan tidak difokuskan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | TreeView.SelectedItemInactive Dari kategori tampilan Pohon |
Batas | Tidak |
Latar depan (Glyph) | TreeView.SelectedItemInactive Dari kategori tampilan Pohon |
Latar depan (Teks) | TreeView.SelectedItemInactive Dari kategori tampilan Pohon |
Bilah judul jendela alat
Batas bilah judul bukan batas sejati, ini adalah garis tebal di bagian atas bilah judul. Ini tidak memiliki nama token untuk statusnya yang tidak fokus.
Bilah judul jendela alat (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... di mana saja Anda membuat UI yang ingin Anda cocokkan dengan jendela alat. | ... untuk antarmuka pengguna apa pun yang tidak ingin Anda ubah secara otomatis jika shell memiliki pembaruan tema. |
Bilah judul yang difokuskan
Bilah judul yang difokuskan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.TitleBarActiveGradientBegin (Gradien berhenti untuk token ini tidak digunakan dalam UI bertema.) |
Latar depan (Teks) | Environment.TitleBarActiveText |
Batas | Environment.TitleBarActiveBorder (Atur ke warna yang sama dengan latar belakang.) |
Seret handel | Environment.TitleBarDragHandleActive |
Bilah judul tidak difokuskan
Bilah judul tidak difokuskan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.TitleBarInactiveGradientBegin (Gradien berhenti untuk token ini tidak digunakan dalam UI bertema.) |
Latar depan (Teks) | Environment.TitleBarInactiveText |
Batas | T/A |
Seret handel | Environment.TitleBarDragHandle |
Tombol bilah judul jendela alat
Tombol bilah judul (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... untuk tombol yang muncul di UI yang menggunakan token warna dari bilah judul jendela alat. | ... untuk tombol yang muncul di lokasi lain. |
... dalam kombinasi latar belakang/latar depan selain yang ditentukan. |
Tombol bilah judul yang difokuskan: status default
Tombol bilah judul default yang difokuskan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | T/A |
Latar depan (Glyph) | Environment.ToolWindowButtonActiveGlyph |
Batas | T/A |
Tombol bilah judul tidak fokus: status default
Default, tombol bilah judul tidak fokus
Elemen | Nama token: Category.color |
---|---|
Latar belakang | T/A |
Latar depan (Glyph) | Environment.ToolWindowButtonInactiveGlyph |
Batas | T/A |
Tombol bilah judul yang difokuskan: status hover
Tombol bilah judul yang difokuskan pada hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.ToolWindowButtonHoverActive |
Latar depan (Glyph) | Environment.ToolWindowButtonHoverActiveGlyph |
Batas | Environment.ToolWindowButtonHoverActiveBorder |
Tombol bilah judul tidak fokus: status hover
Tombol bilah judul tidak fokus pada hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.ToolWindowButtonHoverInactive |
Latar depan (Glyph) | Environment.ToolWindowButtonHoverInactiveGlyph |
Batas | Environment.ToolWindowButtonHoverInactiveBorder |
Tombol bilah judul yang difokuskan: status ditekan
Tombol bilah judul yang difokuskan saat ditekan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.ToolWindowButtonDown |
Latar depan (Glyph) | Environment.ToolWindowButtonDownActiveGlyph |
Batas | Environment.ToolWindowButtonDownBorder |
Tombol bilah judul tidak fokus: status ditekan
Tombol bilah judul tidak fokus saat ditekan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.ToolWindowButtonDown |
Latar depan (Glyph) | Environment.ToolWindowButtonDownInactiveGlyph |
Batas | Environment.ToolWindowButtonDownBorder |
Tab jendela alat
Tab jendela alat (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... di mana saja Anda membuat UI yang ingin Anda cocokkan dengan jendela alat. | ... untuk antarmuka pengguna apa pun yang tidak ingin Anda ubah secara otomatis jika shell memiliki pembaruan tema. |
Tab jendela alat yang dipilih dan difokuskan
Tab jendela alat yang dipilih dan difokuskan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.ToolWindowTabSelectedTab |
Latar depan (Teks) | Environment.ToolWindowTabSelectedActiveText |
Batas | Environment.ToolWindowTabSelectedBorder (Atur ke warna yang sama dengan latar belakang.) |
Tab jendela alat yang dipilih dan tidak difokuskan
Tab jendela alat yang dipilih dan tidak difokuskan
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.ToolWindowTabSelectedTab |
Latar depan (Teks) | Environment.ToolWindowTabSelectedText |
Batas | Environment.ToolWindowTabSelectedBorder (Atur ke warna yang sama dengan latar belakang.) |
Tab jendela alat latar belakang: status default
Tab jendela alat latar belakang default
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.ToolWindowTabGradientBegin Environment.ToolWindowTabGradientEnd (Hentian gradien diatur ke nilai warna yang sama di Visual Studio 2013.) |
Latar depan (Teks) | Environment.ToolWindowTabText |
Batas | Environment.ToolWindowTabBorder |
Tab jendela alat latar belakang: status hover
Tab jendela alat latar belakang di hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.ToolWindowTabMouseOverBackgroundBegin Environment.ToolWindowTabMouseOverBackgroundEnd (Hentian gradien diatur ke nilai warna yang sama di Visual Studio 2013.) |
Latar depan (Teks) | Environment.ToolWindowTabMouseOverText |
Batas | Environment.ToolWindowTabMouseOverBorder (Atur ke warna yang sama dengan latar belakang.) |
Sembunyikan tab secara otomatis
Sembunyikan tab secara otomatis (garis merah)
Menggunakan... | Jangan gunakan ... |
---|---|
... di mana saja Anda membuat UI yang ingin Anda cocokkan dengan tab jendela alat tersembunyi otomatis. | ... untuk antarmuka pengguna apa pun yang tidak ingin Anda ubah secara otomatis jika shell memiliki pembaruan tema. |
Sembunyikan tab secara otomatis: status default
Tab sembunyikan otomatis default
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.AutoHideTabBackgroundBegin (Gradien berhenti untuk token ini tidak digunakan dalam UI bertema.) |
Latar depan (Teks) | Environment.AutoHideTabText |
Batas | Environment.AutoHideTabBorder |
Sembunyikan tab secara otomatis: status hover
Tab Sembunyikan otomatis di hover
Elemen | Nama token: Category.color |
---|---|
Latar belakang | Environment.AutoHideTabMouseOverBackgroundBegin (Gradien berhenti untuk token ini tidak digunakan dalam UI bertema.) |
Latar depan (Teks) | Environment.AutoHideTabMouseOverText |
Batas | Environment.AutoHideTabMouseOverBorder |