Combobox has unwanted borders

[mobynet1]

I have tried to look at the various templates for the combobox and comboboxitem and cannot quite put my finger on what to turn off, as in either removing, setting the border color to transparent, or border thickness to 0. I also see rectangles in the control template so I have set the stroke thickness to 0. I can get rid of the annoying borders, but, my toggle button arrow vanishes with these changes.

This is what my combobox looks like with only comboboxitem styling applied:

The C# Markup I am using is as follows:

new ComboBox ()
	.Grid (column: 0)
	.BorderBrush (Colors.Transparent)
	.BorderThickness (0)
	.FontFamily ("PoppinsRegular")
	.FontSize (12)
	.FontWeight (FontWeights.Normal)
	.Height (27)
	.ItemContainerStyle (MobyStyles.ComboBoxItemStyle ())
	.ItemsSource (() => vm.Options)
	.Margin (20, 0, 15, 0)
	.SelectedItem (() => vm.SelectedOption)
	//.Style (MobyStyles.ComboBoxStyle ())
	.VerticalAlignment (VerticalAlignment.Center)
	.Width (150),

Are there any templates that define this behavior that I can edit for my personal use to keep the toggle button arrow and still get rid of these borders? My main trepidation comes from how these controls handle themes and if I overwrite the control's template I'm worried this will mess with the themes for the combobox.

Thanks in advance!
Steve

[morning4coffe-dev]

Hey Steve (@mobynet1),

Thanks for your question! If you don't want to style the entire control, you can use the Lightweight Styling option, which allows you to modify specific parts of the control. In your example, you could use something like this:

new ComboBox()
// ... 
.Resources(config => config
    .Add(Theme.ComboBox.Resources.Default.BorderThickness.Default, new Thickness(0))
    .Add(Theme.ComboBox.Resources.Default.BorderThickness.Focused, new Thickness(0))
)

This addition should result in something similar:

Screen.Recording.2024-08-08.105158.mp4

Let me know if this helps. If you need more details, you can find them here:

• Lightweight Styling docs
• Lightweight Styling CSM ComboBox resource keys

[mobynet1]

@morning4coffe-dev Thanks! I found this and I also found that by looking at the various (combobox, textbox) theme resource files located in the microsoft-ui-xaml and finding the properties that needed to be altered, did the trick! I have my controls looking exactly as I need. Now, my only question is will this affect base styling on other platforms such as Android, iOS, etc. I am doing this on Windows for now.

[morning4coffe-dev]

@mobynet1 Nice, glad to hear that! It should work and display consistently across all platforms supported by Uno. You can check https://gallery.platform.uno for a Lightweight styling sample. Please let me know when you test it on other platforms. If it doesn't work, I will investigate further.