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

0

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:

enter image description here

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?

wpf
xaml
combobox
asked on Stack Overflow May 3, 2020 by Vlad

1 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>
answered on Stack Overflow May 4, 2020 by mm8

User contributions licensed under CC BY-SA 3.0