How to style my combobox as the Office 2016 Telerik version? - wpf

Question

I have this combo box xaml code:
<ComboBox
Width="250"
Height="25"
Foreground="#545454"
ItemsSource="{StaticResource ParametersArray}">
<Style TargetType="{x:Type ComboBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter
Property="Background"
Value="Blue" />
</Trigger>
<Trigger Property="IsMouseOver" Value="false">
<Setter
Property="Background"
Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ComboBox.ItemContainerStyle>
<Style TargetType="{x:Type ComboBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border x:Name="Bd"
SnapsToDevicePixels="true"
Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}">
<ContentPresenter
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted" Value="true">
<Setter
Property="Background"
Value="#C5C5C5" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ComboBox.ItemContainerStyle>
</ComboBox>
It breaks the app with the error:
System.Windows.Markup.XamlParseException
HResult=0x80131501
Message='Add value to collection of type 'System.Windows.Controls.ItemCollection' threw an exception.' Line number '40' and line position '19'.
Source=PresentationFramework
StackTrace:
at System.Windows.Markup.WpfXamlLoader.Load(XamlReader xamlReader, IXamlObjectWriterFactory writerFactory, Boolean skipJournaledProperties, Object rootObject, XamlObjectWriterSettings settings, Uri baseUri)
at System.Windows.Markup.WpfXamlLoader.LoadBaml(XamlReader xamlReader, Boolean skipJournaledProperties, Object rootObject, XamlAccessLevel accessLevel, Uri baseUri)
at System.Windows.Markup.XamlReader.LoadBaml(Stream stream, ParserContext parserContext, Object parent, Boolean closeStream)
at System.Windows.Application.LoadComponent(Object component, Uri resourceLocator)
at WPFBlendTestProject.MainWindow.InitializeComponent() in C:\Users\username\Documents\Visual Studio 2019\Projects\WPFBlendTestProject\WPFBlendTestProject\MainWindow.xaml:line 1
This exception was originally thrown at this call stack:
[External Code]
Inner Exception 1:
InvalidOperationException: Operation is not valid while ItemsSource is in use. Access and modify elements with ItemsControl.ItemsSource instead.
This is what I want to achieve:
I managed to get the items look as in the picture, but I don't know how to do it about the combo box itself.
How to set that color on mouse over and bring it back once mouse is not over the combo box?
Also how do i achieve that triagonal handle on the right?

Answer 1

You are getting the error because you are adding your Style to the Items property of the ComboBox.
You should set the Style property to it by adding a <ComboBox.Style element:
<ComboBox
Width="250"
Height="25"
Foreground="#545454"
ItemsSource="{StaticResource ParametersArray}">
<ComboBox.Style>
<Style TargetType="{x:Type ComboBox}">
<Setter Property="Template">
...
</Setter>
</Style>
</ComboBox.Style>
<ComboBox.ItemContainerStyle>
<Style TargetType="{x:Type ComboBoxItem}">
...
</Style>
</ComboBox.ItemContainerStyle>
</ComboBox>