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:
="1.0"="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?