How do I add a glass effect to the selected combobox items in WPF?

Question

1.00/5 (1 vote)

See more:

How do I add a transparent glass type of effect on the highlighted item rather than a solid background of a combo box control in a WPF app.

Here is my XAML code

What I have tried:

XML

<?xml version="1.0" encoding="utf-8"?>
<Window
	x:Class="comboBoxStyling.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Title="comboBoxStyling"
	Height="300"
	Width="600"
	Background="Transparent"
	AllowsTransparency="True"
	WindowStartupLocation="CenterScreen"
	WindowStyle="None"
	x:Name="window1"
	Loaded="window1_Loaded">
	<Window.Resources>
		<ControlTemplate
			x:Key="ComboBoxToggleButton"
			TargetType="{x:Type ToggleButton}">
			<Grid>
				<Grid.ColumnDefinitions>
					<ColumnDefinition />
					<ColumnDefinition
						Width="20" />
				</Grid.ColumnDefinitions>
				<Border
					x:Name="Border"
					Grid.ColumnSpan="2"
					CornerRadius="0"
					Background="#FF3F3F3F"
					BorderBrush="#FF97A0A5"
					BorderThickness="1" />
				<Border
					Grid.Column="0"
					CornerRadius="0"
					Margin="1"
					Background="#FF3F3F3F"
					BorderBrush="#FF97A0A5"
					BorderThickness="0,0,1,0" />
				<Path
					x:Name="Arrow"
					Grid.Column="1"
					Fill="White"
					HorizontalAlignment="Center"
					VerticalAlignment="Center"
					Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z" />
			</Grid>
			<ControlTemplate.Triggers>
				<Trigger
					Property="ToggleButton.IsMouseOver"
					Value="true">
					<Setter
						TargetName="Border"
						Property="Background"
						Value="#808080" />
				</Trigger>
				<Trigger
					Property="ToggleButton.IsChecked"
					Value="true">
					<Setter
						TargetName="Border"
						Property="Background"
						Value="#E0E0E0" />
				</Trigger>
				<Trigger
					Property="IsEnabled"
					Value="False">
					<Setter
						TargetName="Border"
						Property="Background"
						Value="#EEEEEE" />
					<Setter
						TargetName="Border"
						Property="BorderBrush"
						Value="#AAAAAA" />
					<Setter
						Property="Foreground"
						Value="#888888" />
					<Setter
						TargetName="Arrow"
						Property="Fill"
						Value="#888888" />
				</Trigger>
			</ControlTemplate.Triggers>
		</ControlTemplate>
		<ControlTemplate
			x:Key="ComboBoxTextBox"
			TargetType="{x:Type TextBox}">
			<Border
				x:Name="PART_ContentHost"
				Focusable="False"
				Background="{TemplateBinding Background}" />
		</ControlTemplate>
		<Style
			x:Key="{x:Type ComboBox}"
			TargetType="{x:Type ComboBox}">
			<Setter
				Property="SnapsToDevicePixels"
				Value="true" />
			<Setter
				Property="OverridesDefaultStyle"
				Value="true" />
			<Setter
				Property="ScrollViewer.HorizontalScrollBarVisibility"
				Value="Auto" />
			<Setter
				Property="ScrollViewer.VerticalScrollBarVisibility"
				Value="Auto" />
			<Setter
				Property="ScrollViewer.CanContentScroll"
				Value="true" />
			<Setter
				Property="MinWidth"
				Value="120" />
			<Setter
				Property="MinHeight"
				Value="20" />
			<Setter
				Property="Foreground"
				Value="White" />
			<Setter
				Property="Template">
				<Setter.Value>
					<ControlTemplate
						TargetType="{x:Type ComboBox}">
						<Grid>
							<ToggleButton
								Name="ToggleButton"
								Template="{StaticResource ComboBoxToggleButton}"
								Grid.Column="2"
								Focusable="false"
								IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
								ClickMode="Press"></ToggleButton>
							<ContentPresenter
								Name="ContentSite"
								IsHitTestVisible="False"
								Content="{TemplateBinding SelectionBoxItem}"
								ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
								ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
								Margin="3,3,23,3"
								VerticalAlignment="Center"
								HorizontalAlignment="Left" />
							<TextBox
								x:Name="PART_EditableTextBox"
								Style="{x:Null}"
								Template="{StaticResource ComboBoxTextBox}"
								HorizontalAlignment="Left"
								VerticalAlignment="Center"
								Margin="3,3,23,3"
								Focusable="True"
								Background="#FF3F3F3F"
								Foreground="Green"
								Visibility="Hidden"
								IsReadOnly="{TemplateBinding IsReadOnly}" />
							<Popup
								Name="Popup"
								Placement="Bottom"
								IsOpen="{TemplateBinding IsDropDownOpen}"
								AllowsTransparency="True"
								Focusable="False"
								PopupAnimation="Slide">
								<Grid
									Name="DropDown"
									SnapsToDevicePixels="True"
									MinWidth="{TemplateBinding ActualWidth}"
									MaxHeight="{TemplateBinding MaxDropDownHeight}">
									<Border
										x:Name="DropDownBorder"
										Background="#3f3f3f"
										BorderThickness="1"
										BorderBrush="#888888" />
									<ScrollViewer
										Margin="4,6,4,6"
										SnapsToDevicePixels="True">
										<StackPanel
											IsItemsHost="True"
											KeyboardNavigation.DirectionalNavigation="Contained" />
									</ScrollViewer>
								</Grid>
							</Popup>
						</Grid>
						<ControlTemplate.Triggers>
							<Trigger
								Property="HasItems"
								Value="false">
								<Setter
									TargetName="DropDownBorder"
									Property="MinHeight"
									Value="95" />
							</Trigger>
							<Trigger
								Property="IsEnabled"
								Value="false">
								<Setter
									Property="Foreground"
									Value="#888888" />
							</Trigger>
							<Trigger
								Property="IsGrouping"
								Value="true">
								<Setter
									Property="ScrollViewer.CanContentScroll"
									Value="false" />
							</Trigger>
							<Trigger
								SourceName="Popup"
								Property="Popup.AllowsTransparency"
								Value="true">
								<Setter
									TargetName="DropDownBorder"
									Property="CornerRadius"
									Value="0" />
								<Setter
									TargetName="DropDownBorder"
									Property="Margin"
									Value="0,2,0,0" />
							</Trigger>
							<Trigger
								Property="IsEditable"
								Value="true">
								<Setter
									Property="IsTabStop"
									Value="false" />
								<Setter
									TargetName="PART_EditableTextBox"
									Property="Visibility"
									Value="Visible" />
								<Setter
									TargetName="ContentSite"
									Property="Visibility"
									Value="Hidden" />
							</Trigger>
						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		
		<Style
			x:Key="{x:Type ComboBoxItem}"
			TargetType="{x:Type ComboBoxItem}">
			<Setter
				Property="SnapsToDevicePixels"
				Value="true" />
			<Setter
				Property="Foreground"
				Value="#AAF2D1" />
			<Setter
				Property="OverridesDefaultStyle"
				Value="true" />
			<Setter
				Property="FontSize"
				Value="15" />
			<Setter
				Property="Template">
				<Setter.Value>
					<ControlTemplate
						TargetType="{x:Type ComboBoxItem}">
						<Border
							Name="Border"
							Padding="2"
							SnapsToDevicePixels="true">
							<ContentPresenter />
						</Border>
						<ControlTemplate.Triggers>
							<Trigger
								Property="IsHighlighted"
								Value="true">
								<Setter
									TargetName="Border"
									Property="Background"
									Value="#5A3BD7" />
								<Setter
									TargetName="Border"
									Property="Opacity"
									Value="0.7" />
								<Setter
									Property="Foreground"
									Value="#fcba03" />
								<Setter
									Property="FontSize"
									Value="16" />
								<Setter
									Property="FontWeight"
									Value="DemiBold" />
							</Trigger>
							<Trigger
								Property="IsEnabled"
								Value="false">
								<Setter
									Property="Foreground"
									Value="#888888" />
							</Trigger>
						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</Window.Resources>
	<Border
		CornerRadius="5"
		Background="#181735"
		BorderBrush="Gray"
		BorderThickness="0.3">
		<StackPanel>
			<Grid>
				<Grid.ColumnDefinitions>
					<ColumnDefinition
						Width="Auto" />
					<ColumnDefinition
						Width="*" />
				</Grid.ColumnDefinitions>
				<ComboBox
					Name="cmb"
					Grid.Column="0"
					HorizontalAlignment="Left"
					VerticalAlignment="Top"
					FontFamily="Segoe UI"
					FontStyle="Normal"
					FontSize="16"
					Margin="10 10 10 0"
					Height="35"
					MaxHeight="40"
					Width="350"
					MaxWidth="450" />
				<Button
					Grid.Column="1"
					Content="Quit"
					Margin="10"
					Background="Transparent"
					FontWeight="DemiBold"
					Foreground="Wheat"
					Height="35"
					Width="55"
					x:Name="button1"
					Click="button1_Click" />
			</Grid>
		</StackPanel>
	</Border>
</Window>

This code generates a blueish-purple type background on the highlighted item of combo box but I want to make it more transparent not fully transparent more like a blueish-purple glass sort of effect. How can do that?

Posted 28-Jan-22 5:36am

Member 12692000

Updated 29-Jan-22 1:53am

v2

Add a Solution

Comments

[no name] 28-Jan-22 12:59pm

You can vary transparency by varying .Opacity (0 - 1.0).

Member 12692000 29-Jan-22 7:58am

Where in my code do I that & how. In my code I've done <Setter TargetName="Border" Property="Opacity" Value="0.4" /> inside the <ControlTemplate.Triggers> <Trigger Property="IsHighlighted" Value="true"> tag ... But it's not giving me the desired effect.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

#realJSOP · Answer 1 · 2022-01-29T01:53:00

"Glass" is a theme in the OS, and affects all applications. I've found that making an application control its own transparency without specific relevance to the application itself is annoying to many users. I personally find no use for glass effects in my OS, and always turn it off.

However, if you want to make a control transparent, you can use the Opacity attribute. The value is a double, and 1.0 is fully opaque, and 0 = fully transparent. You can use any valid double value to set the opacity, so 0.7 is valid, while 0.712543 is also valid (while being somewhat pointless).