Bagikan melalui


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

Button control redline

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

Standard button
Tombol standar

Elemen Nama token: Category.color
Tombol CommonControls.Button
Batas tombol CommonControls.ButtonBorder

Tombol: status default

Default button
Tombol default

Elemen Nama token: Category.color
Tombol CommonControls.ButtonDefault
Batas tombol CommonControls.ButtonBorderDefault

Tombol: status dinonaktifkan

Disabled button
Tombol dinonaktifkan

Elemen Nama token: Category.color
Tombol CommonControls.ButtonDisabled
Batas tombol CommonControls.ButtonBorderDisabled

Tombol: status hover

Button on hover
Tombol di hover

Elemen Nama token: Category.color
Tombol CommonControls.ButtonHover
Batas tombol CommonControls.ButtonBorderHover

Tombol: status ditekan

Pressed button
Tombol ditekan

Elemen Nama token: Category.color
Tombol CommonControls.ButtonPressed
Batas tombol CommonControls.ButtonBorderPressed

Tombol: status terfokus

Focused button
Tombol terfokus

Elemen Nama token: Category.color
Tombol CommonControls.ButtonFocused
Batas tombol CommonControls.ButtonBorderFocused

Kontrol kotak centang

Check box (redline)
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

Check box
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

Disabled check box
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

Check box on 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

Pressed check box
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

Focused check box
Kotak centang terfokus

Elemen Nama token: Category.color
Latar belakang CommonControls.CheckBoxBackgroundFocused
Batas CommonControls.CheckBoxBorderFocused
Teks CommonControls.CheckBoxTextFocused
Glyph CommonControls.CheckBoxGlyphFocused

Drop-down/combo box (redline)
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

Default drop-down/combo box
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

Disabled drop-down/combo box
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

Drop-down/combo box on 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

Pressed drop-down/combo box
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

Drop-down/combo box pressed list item view
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

Drop-down/combo box with focus
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

Drop-down/combo box text input selection
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.

Tabular data/grid control (redline)
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.

Default instructional text
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.)

Secondary instructional text
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

Default hint text
Teks petunjuk default

Elemen Nama token: Category.color
Latar depan (teks) Environment.ControlEditHintText

Teks petunjuk yang diperlukan

Required hint text
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.

Search box control text
Teks kontrol kotak pencarian

Elemen Nama token: Category.color
Latar depan (teks) SearchControl.UnfocusedWatermarkText

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 (redline)
Hyperlink (garis merah)

Menggunakan... Jangan gunakan ...
... saat Anda perlu membuat hyperlink kustom. ... untuk apa pun yang bukan hyperlink.

Hyperlink: status default

Default hyperlink
Hyperlink default

Elemen Nama token: Category.color
Latar depan (Teks) Environment.PanelHyperlink

Hyperlink: status hover

Hyperlink on hover
Hyperlink di hover

Elemen Nama token: Category.color
Latar depan (Teks) Environment.PanelHyperlinkHover

Hyperlink: status ditekan

Pressed hyperlink
Hyperlink yang ditekan

Elemen Nama token: Category.color
Latar depan (Teks) Environment.PanelHyperlinkPressed

Hyperlink: status dinonaktifkan

Disabled hyperlink
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.

Infobar (redline)
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

Default infobar
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

Default infobar Close (×) button
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

Infobar Close (×) button on 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

Pressed infobar Close (×) button
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

Default infobar hyperlink button
Tombol hyperlink bilah info default

Elemen Nama token: Category.color
Latar depan (teks) InfoBar.Hyperlink

Tombol hyperlink bilah info: status hover

Infobar hyperlink button on 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

Pressed infobar hyperlink button
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

Default inline infobar hyperlink button
Tombol hyperlink bilah info sebaris default

Elemen Nama token: Category.color
Latar depan (teks) InfoBar.Hyperlink

Hyperlink sebaris bilah info (dalam kalimat): status hover

Infobar inline hyperlink button on 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

Pressed infobar inline hyperlink button
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

Default infobar button
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

Infobar button on 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

Pressed infobar button
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

Disabled infobar button
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

Focused infobar button
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.

Scroll bar (redline)
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

Default scroll bar
Bilah gulir default

Elemen Nama token: Category.color
Bilah gulir Environment.ScrollBarBackground
Latar depan (Jempol) Environment.ScrollBarThumbBackground

Bilah gulir: status hover

Scroll bar on hover
Bilah gulir di hover

Elemen Nama token: Category.color
Bilah gulir Environment.ScrollBarBackground
Latar depan (Jempol) Environment.ScrollBarThumbMouseOverBackground

Bilah gulir: status ditekan*

Pressed scroll bar
Bilah gulir yang ditekan

Elemen Nama token: Category.color
Bilah gulir Environment.ScrollBarBackground
Latar depan (Jempol) Environment.ScrollBarThumbPressedBackground

Panah bilah gulir: status default

Default scroll bar arrow
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

Scroll bar arrow on 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

Pressed scroll bar arrow
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.

Search box (redline)
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

Focused search input field
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

Search input field unfocused
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

Unfocused, inactive search input field
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)

Highlighted search input field
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

Disabled search input field
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

Search action button focused
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

Unfocused search action button
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

Pressed search action button
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

Search action button disabled
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

Focused search drop-down button
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

Unfocused search drop-down button
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

Pressed search drop-down button
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

Disabled search drop-down button
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.

Search drop-down list (redline)
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

Default suggested searches
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

Suggested searches on 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

Search check box
Opsi pencarian default (kotak centang)

Search options
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

Search options (check box) on hover
Opsi pencarian (kotak centang) di hover

Search options (link) on 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

Pressed search options (check box)
Opsi pencarian yang ditekan (kotak centang)

Pressed search options (link)
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.

Tree view (redline)
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

Default tree view item
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

Tree view item on 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

Tree view item on drag over
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

Selected and focused tree view item
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

Selected and unfocused tree view item
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

Selected and focused tree view item on hover
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

Selected and unfocused tree view item on hover
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.

Visual Studio shell background (redline)
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.

Visual Studio command shelf (redline)
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.

Manifest Designer (redline)
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.

Visual Studio menu (redline)
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 terdiri dari latar belakang, batas, dan teks judul, serta glyph opsional, biasanya saat menu ditemukan di bilah perintah.

Menu title (redline)
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

Default menu title
Judul menu default

Default menu title with glyph
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

Menu title on hover
Judul menu di hover

Menu title with glyph on 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

Pressed menu title
Judul menu yang ditekan

Pressed menu title with glyph
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

Disabled menu title with glyph
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 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.

Menu items redline

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

Default menu items
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

Menu checked
Item menu yang dicentang

Menu selected
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

Menu hover
Item menu di hover

Menu hover checked
Item menu yang dicentang di hover

Menu hover selected
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

Menu disabled
Item menu yang dinonaktifkan

Menu disabled checked
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.

Command bar redline
Bilah perintah (garis merah)

Overflow button redline
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.

Command bar group redline
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

Command icon redline
Ikon perintah (garis merah)

Command icon with text redline
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

Command icon 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

Default, selected command icon
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

Command icon on hover or focus
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

Selected command icon on hover or focus
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

Pressed command icon
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

Disabled command icon
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.

Command bar combo box redline
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

Command bar combo box input field
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

Combo box drop-down button
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

Command bar drop-down list
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

Command bar combo box input field on 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

Command bar combo box drop-down button on 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

Command bar combo box drop-down list on 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

Focused command bar combo box input field
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

Focused command bar drop-down button
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

Pressed command bar combo box input field
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

Pressed command bar combo box drop-down button
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

Disabled command bar combo box input field
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

Disabled command bar combo box drop-down button
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.

Command bar drop-down (redline)
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

Default command bar drop-down selection field
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

Default command bar drop-down button
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

Default command bar drop-down list
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

Command bar drop-down selection field on 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

Command bar drop-down button on 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

Command bar drop-down list on 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

Drop-down selection field pressed
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

Pressed command bar drop-down button
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

Disabled command bar drop-down selection field
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

Disabled command bar drop-down button
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.

Split button redline
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

Default command bar split button
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

Command bar split button on 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

Pressed command bar split button
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

Disabled command bar split button
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.

Command bar 'More options' button (redline)
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

Default command bar 'More options' button
Tombol 'Opsi lainnya' bilah perintah default

Default command bar 'Overflow' button
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

Command bar 'More options' button on hover
Tombol 'Opsi lainnya' bilah perintah di hover

Command bar 'Overflow' button on 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

Pressed command bar 'More options' button
Tombol 'Opsi lainnya' bilah perintah yang ditekan

Overflow pressed
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.

Docked document window (redline)
Jendela dokumen yang ditampar (garis merah)

Floating document window (redline)
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

Default focused, floating document window frame
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

Default unfocused, floating document window frame
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

Focused, floating document window frame on 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

Unfocused, floating document window frame on 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

Focused, floating document window frame on press
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.

Document tabs (redline)
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.

Open document tab (redline)
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

Selected, focused document tab
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

Selected, unfocused document tab
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

Default background document tab
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

Background document tab on 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.

Preview tab (redline)
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

Focused, selected preview tab
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

Unfocused, selected preview tab
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

Default background preview tab
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

Background preview tab on 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.

Document overflow button (redline)
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

Default document overflow button
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

Document overflow button on 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

Document overflow button on press
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.

Tagging in Visual Studio (redline)
Penandaan di Visual Studio (garis merah)

Menggunakan... Jangan gunakan ...
... untuk UI yang mendukung pemberian tag. ... untuk semua jenis UI lainnya.

Tag

Tag: status default

Default tag
Tag default

Elemen Nama token: Category.color
Latar belakang Tag.Background
Latar depan (Teks) Tag.Background

Tag: status hover

Tag on hover
Tag pada hover

Elemen Nama token: Category.color
Latar belakang Tag.HoverBackground
Latar depan (Teks) Tag.HoverBackgroundText

Tag: status ditekan

Pressed tag
Tag yang ditekan

Elemen Nama token: Category.color
Latar belakang Tag.PressedBackground
Latar depan (Teks) Tag.PressedBackgroundText

Tag: status terpilih

Selected tag
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

Default Close (×) tag glyph
Glyph tag Tutup Default (×)

Elemen Nama token: Category.color
Latar belakang T/A
Latar depan (Glyph) Tag.TagHoverGlyph

Tutup (×) tag glyph: status hover

Close (×) tag glyph on 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

Pressed Close (×) tag glyph
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

Default selected tag with Close (×) glyph
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

Selected tag with Close (×) glyph on 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

Selected, pressed tag with Close (×) glyph
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.

Tool window (redline)
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.

Tool window frame (redline)
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

Docked tool window
Jendela alat yang ditampar

Elemen Nama token: Category.color
Latar belakang Environment.ToolWindowBackground
Batas Environment.ToolWindowBorder

Jendela alat mengambang dan terfokus

Floating, focused tool window
Jendela alat mengambang dan terfokus

Elemen Nama token: Category.color
Latar belakang Environment.ToolWindowBackground
Batas Environment.MainWindowActiveDefaultBorder

Jendela alat mengambang dan tidak fokus

Floating, unfocused tool window
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.

Toolbox-like window (redline)
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

Default toolbox parent node
Simpul induk kotak alat default

Default toolbox child node
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

Toolbox child node on 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

Focused, selected toolbox parent node
Simpul induk kotak alat yang difokuskan dan dipilih

Focused, selected toolbox child node
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

Selected, unfocused toolbox parent node
Simpul induk kotak alat yang dipilih dan tidak fokus

Selected, unfocused toolbox child node
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.

Tool window title bar (redline)
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

Focused title bar
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

Title bar unfocused
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

Title bar button (redline)
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

Default, focused title bar buttons
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, unfocused title bar buttons
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

Focused title bar buttons on 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

Unfocused title bar buttons on 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

Focused title bar buttons on press
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

Unfocused title bar buttons on press
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

Tool window tab (redline)
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

Selected, focused tool window tab
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

Selected, unfocused tool window tab
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

Default background tool window tab
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

Background tool window tab on 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

Auto-hide tabs (redline)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

Default auto-hide tab
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

Auto-hide tab on 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