Click here to Skip to main content
15,358,440 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
Gerry Schmitz 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).
   
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