Warna bersama untuk Visual Studio

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