ComboBox

Jump to bottom
Alex-451 edited this page Oct 9, 2022 · 1 revision

The ComboBox control presents users with a list of options. The list is shown and hidden as the control expands and collapses. In its default state, the list is collapsed, displaying only one choice.

Changing the color of the underline

The color of the underline can be changed by applying the TextFieldAssist.UnderlineBrush brush.

<ComboBoxStyle="{DynamicResource MaterialDesignComboBox}" materialDesign:TextFieldAssist.UnderlineBrush="Chocolate" >
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>

2022-10-09 22_11_22-Window

Styles

The Material Design In XAML Toolkit provides two styles:

  • MaterialDesignComboBox
  • MaterialDesignFloatingHintComboBox

MaterialDesignComboBox

The default ComboBox in the Material Design.

<ComboBoxStyle="{DynamicResource MaterialDesignComboBox}">
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>

2022-10-09 22_03_39-Window

MaterialDesignFloatingHintComboBox

Adds a customizable hint above the item preview.

<ComboBoxStyle="{DynamicResource MaterialDesignFloatingHintComboBox}" materialDesign:HintAssist.Hint="Hint text">
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>

2022-10-09 22_06_00-Window

Changing the color of the Hint

The color of the hint can be changed by applying the HintAssist.Foreground brush.

<ComboBoxStyle="{DynamicResource MaterialDesignFloatingHintComboBox}" materialDesign:HintAssist.Foreground="DeepPink" materialDesign:HintAssist.Hint="Hint text">
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>

2022-10-09 22_16_21-Window

If you see any mistake or want to contribute to this wiki feel free.

Home
Contributing
Compiling From Source
Glossary

Getting Started with MDIX
Getting Started
Tutorial On YouTube (português-BR)
Frequently Asked Questions
Examples Repository

Release Notes
Pack Icon Changes2.0.0 Breaking Changes

Controls
All Control Styles
Buttons
ComboBox
Dialogs
PopupBox
Snackbar
TextBox
Toggle Button
Transitions
Icons

Theming
Advanced Theming
Brush Names
Custom Palette Hues
Fonts
Overriding Material Design Styles
Swatches and Recommended Colors

Miscellaneous
MahApps Integration
Performance
Strong Naming
.NET 4.0 Compatibility
Projects using Material Design
Understanding Routed Commands

Clone this wiki locally

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
ComboBox
Jump to bottom

Alex-451 edited this page Oct 9, 2022
·
1 revision
The ComboBox control presents users with a list of options. The list is shown and hidden as the control expands and collapses. In its default state, the list is collapsed, displaying only one choice.
Changing the color of the underline
The color of the underline can be changed by applying the TextFieldAssist.UnderlineBrush brush.
<ComboBoxStyle="{DynamicResource MaterialDesignComboBox}" materialDesign:TextFieldAssist.UnderlineBrush="Chocolate" >
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>
2022-10-09 22_11_22-Window
Styles
The Material Design In XAML Toolkit provides two styles:
  • MaterialDesignComboBox
  • MaterialDesignFloatingHintComboBox
MaterialDesignComboBox
The default ComboBox in the Material Design.
<ComboBoxStyle="{DynamicResource MaterialDesignComboBox}">
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>
2022-10-09 22_03_39-Window
MaterialDesignFloatingHintComboBox
Adds a customizable hint above the item preview.
<ComboBoxStyle="{DynamicResource MaterialDesignFloatingHintComboBox}" materialDesign:HintAssist.Hint="Hint text">
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>
2022-10-09 22_06_00-Window
Changing the color of the Hint
The color of the hint can be changed by applying the HintAssist.Foreground brush.
<ComboBoxStyle="{DynamicResource MaterialDesignFloatingHintComboBox}" materialDesign:HintAssist.Foreground="DeepPink" materialDesign:HintAssist.Hint="Hint text">
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>
2022-10-09 22_16_21-Window
If you see any mistake or want to contribute to this wiki feel free.
Home
Contributing
Compiling From Source
Glossary
Getting Started with MDIX
Getting Started
Tutorial On YouTube (português-BR)
Frequently Asked Questions
Examples Repository
Release Notes
Pack Icon Changes2.0.0 Breaking Changes
Controls
All Control Styles
Buttons
ComboBox
Dialogs
PopupBox
Snackbar
TextBox
Toggle Button
Transitions
Icons
Theming
Advanced Theming
Brush Names
Custom Palette Hues
Fonts
Overriding Material Design Styles
Swatches and Recommended Colors
Miscellaneous
MahApps Integration
Performance
Strong Naming
.NET 4.0 Compatibility
Projects using Material Design
Understanding Routed Commands
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
ComboBox
Jump to bottom

Alex-451 edited this page Oct 9, 2022
·
1 revision
The ComboBox control presents users with a list of options. The list is shown and hidden as the control expands and collapses. In its default state, the list is collapsed, displaying only one choice.
Changing the color of the underline
The color of the underline can be changed by applying the TextFieldAssist.UnderlineBrush brush.
<ComboBoxStyle="{DynamicResource MaterialDesignComboBox}" materialDesign:TextFieldAssist.UnderlineBrush="Chocolate" >
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>
2022-10-09 22_11_22-Window
Styles
The Material Design In XAML Toolkit provides two styles:
  • MaterialDesignComboBox
  • MaterialDesignFloatingHintComboBox
MaterialDesignComboBox
The default ComboBox in the Material Design.
<ComboBoxStyle="{DynamicResource MaterialDesignComboBox}">
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>
2022-10-09 22_03_39-Window
MaterialDesignFloatingHintComboBox
Adds a customizable hint above the item preview.
<ComboBoxStyle="{DynamicResource MaterialDesignFloatingHintComboBox}" materialDesign:HintAssist.Hint="Hint text">
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>
2022-10-09 22_06_00-Window
Changing the color of the Hint
The color of the hint can be changed by applying the HintAssist.Foreground brush.
<ComboBoxStyle="{DynamicResource MaterialDesignFloatingHintComboBox}" materialDesign:HintAssist.Foreground="DeepPink" materialDesign:HintAssist.Hint="Hint text">
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>
2022-10-09 22_16_21-Window
If you see any mistake or want to contribute to this wiki feel free.
Home
Contributing
Compiling From Source
Glossary
Getting Started with MDIX
Getting Started
Tutorial On YouTube (português-BR)
Frequently Asked Questions
Examples Repository
Release Notes
Pack Icon Changes2.0.0 Breaking Changes
Controls
All Control Styles
Buttons
ComboBox
Dialogs
PopupBox
Snackbar
TextBox
Toggle Button
Transitions
Icons
Theming
Advanced Theming
Brush Names
Custom Palette Hues
Fonts
Overriding Material Design Styles
Swatches and Recommended Colors
Miscellaneous
MahApps Integration
Performance
Strong Naming
.NET 4.0 Compatibility
Projects using Material Design
Understanding Routed Commands
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
ComboBox
Jump to bottom

Alex-451 edited this page Oct 9, 2022
·
1 revision
The ComboBox control presents users with a list of options. The list is shown and hidden as the control expands and collapses. In its default state, the list is collapsed, displaying only one choice.
Changing the color of the underline
The color of the underline can be changed by applying the TextFieldAssist.UnderlineBrush brush.
<ComboBoxStyle="{DynamicResource MaterialDesignComboBox}" materialDesign:TextFieldAssist.UnderlineBrush="Chocolate" >
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>
2022-10-09 22_11_22-Window
Styles
The Material Design In XAML Toolkit provides two styles:
  • MaterialDesignComboBox
  • MaterialDesignFloatingHintComboBox
MaterialDesignComboBox
The default ComboBox in the Material Design.
<ComboBoxStyle="{DynamicResource MaterialDesignComboBox}">
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>
2022-10-09 22_03_39-Window
MaterialDesignFloatingHintComboBox
Adds a customizable hint above the item preview.
<ComboBoxStyle="{DynamicResource MaterialDesignFloatingHintComboBox}" materialDesign:HintAssist.Hint="Hint text">
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>
2022-10-09 22_06_00-Window
Changing the color of the Hint
The color of the hint can be changed by applying the HintAssist.Foreground brush.
<ComboBoxStyle="{DynamicResource MaterialDesignFloatingHintComboBox}" materialDesign:HintAssist.Foreground="DeepPink" materialDesign:HintAssist.Hint="Hint text">
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>
2022-10-09 22_16_21-Window
If you see any mistake or want to contribute to this wiki feel free.
Home
Contributing
Compiling From Source
Glossary
Getting Started with MDIX
Getting Started
Tutorial On YouTube (português-BR)
Frequently Asked Questions
Examples Repository
Release Notes
Pack Icon Changes2.0.0 Breaking Changes
Controls
All Control Styles
Buttons
ComboBox
Dialogs
PopupBox
Snackbar
TextBox
Toggle Button
Transitions
Icons
Theming
Advanced Theming
Brush Names
Custom Palette Hues
Fonts
Overriding Material Design Styles
Swatches and Recommended Colors
Miscellaneous
MahApps Integration
Performance
Strong Naming
.NET 4.0 Compatibility
Projects using Material Design
Understanding Routed Commands
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
ComboBox
Jump to bottom

Alex-451 edited this page Oct 9, 2022
·
1 revision
The ComboBox control presents users with a list of options. The list is shown and hidden as the control expands and collapses. In its default state, the list is collapsed, displaying only one choice.
Changing the color of the underline
The color of the underline can be changed by applying the TextFieldAssist.UnderlineBrush brush.
<ComboBoxStyle="{DynamicResource MaterialDesignComboBox}" materialDesign:TextFieldAssist.UnderlineBrush="Chocolate" >
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>
2022-10-09 22_11_22-Window
Styles
The Material Design In XAML Toolkit provides two styles:
  • MaterialDesignComboBox
  • MaterialDesignFloatingHintComboBox
MaterialDesignComboBox
The default ComboBox in the Material Design.
<ComboBoxStyle="{DynamicResource MaterialDesignComboBox}">
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>
2022-10-09 22_03_39-Window
MaterialDesignFloatingHintComboBox
Adds a customizable hint above the item preview.
<ComboBoxStyle="{DynamicResource MaterialDesignFloatingHintComboBox}" materialDesign:HintAssist.Hint="Hint text">
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>
2022-10-09 22_06_00-Window
Changing the color of the Hint
The color of the hint can be changed by applying the HintAssist.Foreground brush.
<ComboBoxStyle="{DynamicResource MaterialDesignFloatingHintComboBox}" materialDesign:HintAssist.Foreground="DeepPink" materialDesign:HintAssist.Hint="Hint text">
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>
2022-10-09 22_16_21-Window
If you see any mistake or want to contribute to this wiki feel free.
Home
Contributing
Compiling From Source
Glossary
Getting Started with MDIX
Getting Started
Tutorial On YouTube (português-BR)
Frequently Asked Questions
Examples Repository
Release Notes
Pack Icon Changes2.0.0 Breaking Changes
Controls
All Control Styles
Buttons
ComboBox
Dialogs
PopupBox
Snackbar
TextBox
Toggle Button
Transitions
Icons
Theming
Advanced Theming
Brush Names
Custom Palette Hues
Fonts
Overriding Material Design Styles
Swatches and Recommended Colors
Miscellaneous
MahApps Integration
Performance
Strong Naming
.NET 4.0 Compatibility
Projects using Material Design
Understanding Routed Commands
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
ComboBox
Jump to bottom

Alex-451 edited this page Oct 9, 2022
·
1 revision
The ComboBox control presents users with a list of options. The list is shown and hidden as the control expands and collapses. In its default state, the list is collapsed, displaying only one choice.
Changing the color of the underline
The color of the underline can be changed by applying the TextFieldAssist.UnderlineBrush brush.
<ComboBoxStyle="{DynamicResource MaterialDesignComboBox}" materialDesign:TextFieldAssist.UnderlineBrush="Chocolate" >
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>
2022-10-09 22_11_22-Window
Styles
The Material Design In XAML Toolkit provides two styles:
  • MaterialDesignComboBox
  • MaterialDesignFloatingHintComboBox
MaterialDesignComboBox
The default ComboBox in the Material Design.
<ComboBoxStyle="{DynamicResource MaterialDesignComboBox}">
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>
2022-10-09 22_03_39-Window
MaterialDesignFloatingHintComboBox
Adds a customizable hint above the item preview.
<ComboBoxStyle="{DynamicResource MaterialDesignFloatingHintComboBox}" materialDesign:HintAssist.Hint="Hint text">
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>
2022-10-09 22_06_00-Window
Changing the color of the Hint
The color of the hint can be changed by applying the HintAssist.Foreground brush.
<ComboBoxStyle="{DynamicResource MaterialDesignFloatingHintComboBox}" materialDesign:HintAssist.Foreground="DeepPink" materialDesign:HintAssist.Hint="Hint text">
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>
2022-10-09 22_16_21-Window
If you see any mistake or want to contribute to this wiki feel free.
Home
Contributing
Compiling From Source
Glossary
Getting Started with MDIX
Getting Started
Tutorial On YouTube (português-BR)
Frequently Asked Questions
Examples Repository
Release Notes
Pack Icon Changes2.0.0 Breaking Changes
Controls
All Control Styles
Buttons
ComboBox
Dialogs
PopupBox
Snackbar
TextBox
Toggle Button
Transitions
Icons
Theming
Advanced Theming
Brush Names
Custom Palette Hues
Fonts
Overriding Material Design Styles
Swatches and Recommended Colors
Miscellaneous
MahApps Integration
Performance
Strong Naming
.NET 4.0 Compatibility
Projects using Material Design
Understanding Routed Commands
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
ComboBox
Jump to bottom

Alex-451 edited this page Oct 9, 2022
·
1 revision
The ComboBox control presents users with a list of options. The list is shown and hidden as the control expands and collapses. In its default state, the list is collapsed, displaying only one choice.
Changing the color of the underline
The color of the underline can be changed by applying the TextFieldAssist.UnderlineBrush brush.
<ComboBoxStyle="{DynamicResource MaterialDesignComboBox}" materialDesign:TextFieldAssist.UnderlineBrush="Chocolate" >
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>
2022-10-09 22_11_22-Window
Styles
The Material Design In XAML Toolkit provides two styles:
  • MaterialDesignComboBox
  • MaterialDesignFloatingHintComboBox
MaterialDesignComboBox
The default ComboBox in the Material Design.
<ComboBoxStyle="{DynamicResource MaterialDesignComboBox}">
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>
2022-10-09 22_03_39-Window
MaterialDesignFloatingHintComboBox
Adds a customizable hint above the item preview.
<ComboBoxStyle="{DynamicResource MaterialDesignFloatingHintComboBox}" materialDesign:HintAssist.Hint="Hint text">
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>
2022-10-09 22_06_00-Window
Changing the color of the Hint
The color of the hint can be changed by applying the HintAssist.Foreground brush.
<ComboBoxStyle="{DynamicResource MaterialDesignFloatingHintComboBox}" materialDesign:HintAssist.Foreground="DeepPink" materialDesign:HintAssist.Hint="Hint text">
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>
2022-10-09 22_16_21-Window
If you see any mistake or want to contribute to this wiki feel free.
Home
Contributing
Compiling From Source
Glossary
Getting Started with MDIX
Getting Started
Tutorial On YouTube (português-BR)
Frequently Asked Questions
Examples Repository
Release Notes
Pack Icon Changes2.0.0 Breaking Changes
Controls
All Control Styles
Buttons
ComboBox
Dialogs
PopupBox
Snackbar
TextBox
Toggle Button
Transitions
Icons
Theming
Advanced Theming
Brush Names
Custom Palette Hues
Fonts
Overriding Material Design Styles
Swatches and Recommended Colors
Miscellaneous
MahApps Integration
Performance
Strong Naming
.NET 4.0 Compatibility
Projects using Material Design
Understanding Routed Commands
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
ComboBox
Jump to bottom

Alex-451 edited this page Oct 9, 2022
·
1 revision
The ComboBox control presents users with a list of options. The list is shown and hidden as the control expands and collapses. In its default state, the list is collapsed, displaying only one choice.
Changing the color of the underline
The color of the underline can be changed by applying the TextFieldAssist.UnderlineBrush brush.
<ComboBoxStyle="{DynamicResource MaterialDesignComboBox}" materialDesign:TextFieldAssist.UnderlineBrush="Chocolate" >
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>
2022-10-09 22_11_22-Window
Styles
The Material Design In XAML Toolkit provides two styles:
  • MaterialDesignComboBox
  • MaterialDesignFloatingHintComboBox
MaterialDesignComboBox
The default ComboBox in the Material Design.
<ComboBoxStyle="{DynamicResource MaterialDesignComboBox}">
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>
2022-10-09 22_03_39-Window
MaterialDesignFloatingHintComboBox
Adds a customizable hint above the item preview.
<ComboBoxStyle="{DynamicResource MaterialDesignFloatingHintComboBox}" materialDesign:HintAssist.Hint="Hint text">
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>
2022-10-09 22_06_00-Window
Changing the color of the Hint
The color of the hint can be changed by applying the HintAssist.Foreground brush.
<ComboBoxStyle="{DynamicResource MaterialDesignFloatingHintComboBox}" materialDesign:HintAssist.Foreground="DeepPink" materialDesign:HintAssist.Hint="Hint text">
<ComboBoxItemIsSelected="True">Item 1</ComboBoxItem>
</ComboBox>
2022-10-09 22_16_21-Window
If you see any mistake or want to contribute to this wiki feel free.
Home
Contributing
Compiling From Source
Glossary
Getting Started with MDIX
Getting Started
Tutorial On YouTube (português-BR)
Frequently Asked Questions
Examples Repository
Release Notes
Pack Icon Changes2.0.0 Breaking Changes
Controls
All Control Styles
Buttons
ComboBox
Dialogs
PopupBox
Snackbar
TextBox
Toggle Button
Transitions
Icons
Theming
Advanced Theming
Brush Names
Custom Palette Hues
Fonts
Overriding Material Design Styles
Swatches and Recommended Colors
Miscellaneous
MahApps Integration
Performance
Strong Naming
.NET 4.0 Compatibility
Projects using Material Design
Understanding Routed Commands
Clone this wiki locally