Combobox visual updates

[beervoley]

Description

This update brings acrylic brush, lots of new colors and rounded corners to the control.

I've also added some required updates to TextBox resources and Common_themeresources that are required by the new ComboBox. These changes will be checked in from this PR

What is not done yet

Focus Visuals for the combo box items need to be updated.
Font for editable ComboBox needs to be updated.
Shadows will be fixed in the OS.
Blue underline for Editable ComboBox needs to be sharper.

Screenshots (if appropriate):

[beervoley]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[mdtauk]

Not sure if these are problems with the image preview, or with the actual controls themselves, but I will point them out.

1. Is the backplate needed here for the Selected Item at rest? It could cause some confusion and visual clutter when you are hovering over items.

2. I believe the updated ListView guidance is that the Selected Indicator should have a minimum height of 16

3. The disabled state with the Dark Theme also has a backplate, which adds to the confusion with hover states. This backplate does not show on the Light Theme.

I would say, the Backplate for the ComboBoxItems should probably only be visible on PointerOver and Pressed states. The Selection Indicator is clear enough for the Current item.

---

There is a bigger question about how you would handle grouped headers in a ComboBox - which is another ask, and would bring it to parity with the FluentUI control.

[beervoley]

Not sure if these are problems with the image preview, or with the actual controls themselves, but I will point them out.

1. Is the backplate needed here for the Selected Item at rest? It could cause some confusion and visual clutter when you are hovering over items.
2. I believe the updated ListView guidance is that the Selected Indicator should have a minimum height of 16
3. The disabled state with the Dark Theme also has a backplate, which adds to the confusion with hover states. This backplate does not show on the Light Theme.

I would say, the Backplate for the ComboBoxItems should probably only be visible on PointerOver and Pressed states. The Selection Indicator is clear enough for the Current item.

There is a bigger question about how you would handle grouped headers in a ComboBox - which is another ask, and would bring it to parity with the FluentUI control.

1. I agree that it might be confusing. I'll see what we can do :)
2. The Selected Indicator is exactly 16 px in Rest state.
3. The backplate in Dark mode is due to incorrect disabled brush color value in dark mode. It will be fixed pretty soon :)

[beervoley]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[beervoley]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[beervoley]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[beervoley]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[beervoley]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[karkarl]

        <x:Double x:Key="ComboBoxArrowThemeFontSize">21</x:Double>

A lot of these Double and Thickness resources are duplicated across the themes. These can be moved out of the themes to avoid duplication.

---

Refers to: dev/ComboBox/ComboBox_themeresources.xaml:13 in f6b4e52. [](commit_id = f6b4e52, deletion_comment = False)

[beervoley]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).

[beervoley]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 1 pipeline(s).