Good afternoon, I encountered the following problem. It is impossible to set the transparency of the ComboBoxItem. Tell me how you can do it.

At the moment I try this:

<ComboBox Style="{StaticResource regInputStyle}" x:Name="point"> <ComboBoxItem Padding="5" Background="White" Opacity="0.8" Content="Один"/> <ComboBoxItem Padding="5" Background="White" Opacity="0.8" Content="Два"/> </ComboBox>
  • 2
    We'll have to change the template, here is an example - lena

1 answer 1

This, unfortunately, is not so simple. Let's do it in parts.

Firstly, the combo box dropdown list has its own background color and border color. These colors are taken as resources with the keys SystemColors.WindowBrushKey and SystemColors.WindowFrameBrushKey , so you can turn them into transparent if you want.

 <ComboBox> <ComboBox.Resources> <SolidColorBrush x:Key="{x:Static SystemColors.WindowBrushKey}"> Transparent </SolidColorBrush> <SolidColorBrush x:Key="{x:Static SystemColors.WindowFrameBrushKey}"> Transparent </SolidColorBrush> </ComboBox.Resources> <ComboBoxItem Padding="5" Background="White" Opacity="0.8" Content="Один"/> <ComboBoxItem Padding="5" Background="White" Opacity="0.8" Content="Два"/> </ComboBox>

This gives almost what is needed, but it is almost.

combobox, what else?

See what the problem is? The system style for the combo box determines the shadow , and we have not turned it off with our transparency. If you are satisfied with this result, that's all. If not, read on.

How can I turn it off? For this, I did not find the built-in tools, which means that I will have to get a serious weapon - to edit the template. If you have Visual Studio 2015 or higher, you can easily get a system template for editing, if not - Expression Blend can help you (or a friend who has Visual Studio 2015 or later installed).

How to ask Visual Studio to show you the style is written in detail here . Having a style, you have to find the element that sets the shadow. I have this code:

 <Popup x:Name="PART_Popup" AllowsTransparency="true" Grid.ColumnSpan="2" IsOpen=...> <Themes:SystemDropShadowChrome x:Name="shadow" Color="Transparent" ...> <Border x:Name="dropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}"> <ScrollViewer x:Name="DropDownScrollViewer"> ...

We see that the shadow is set by the <Themes:SystemDropShadowChrome .../> control, but its color is set to Transparent . Looking for another code template, we find a trigger that changes color to opaque:

 <ControlTemplate.Triggers> <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="true"> <Setter Property="Margin" TargetName="shadow" Value="0,0,5,5"/> <Setter Property="Color" TargetName="shadow" Value="#71000000"/> </Trigger>

Commenting out this trigger (I have it twice in the template code), we get the desired result:

Well, one more combo box

The disadvantage of the “armor-piercing” method with template overriding is that you fix a template suitable for the operating system on which you do it. For example, if you do it on Windows 10, the look of the combo box will be the same as in Windows 10, even if you run the program on Windows 7. This is usually not a big problem, because you change the style completely.