Click here to Skip to main content
15,884,298 members
Please Sign up or sign in to vote.
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
Updated 29-Jan-22 1:53am
v2
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

"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).
 
Share this answer
 
Comments
Member 12692000 29-Jan-22 8:02am    
How & where do I do this ? If you check my code I've already added a <Setter TargetName="Border" Property="Opacity" Value="0.4" /> inside <ControlTemplate.Triggers> <Trigger Property="IsHighlighted" Value="true">.

Thanks
#realJSOP 30-Jan-22 4:19am    
Try triggering on IsFocused.
Member 12692000 30-Jan-22 6:09am    
Nothing changed :(

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900