Below are some styles I use to round the corners and set the alternating row colors of all of my XamComboEditors.
The next thing I want to do is change the ComboBoxItem’s mouse-over appearance in the dropdown list. However, I have not figured out how to reference the ComboBoxItems in the dropdown list using a control template. I’m wanting to make the mouse-over appearance similar to what we see in the XamDataGrid when using the Aero theme. I was hoping I could extend the style below to make this happen. Any good ideas?
Big thanks in advance!
<!-- CornerRadius size for all of my data entry controls --><CornerRadius x:Key="StandardControlCornderRadius">3</CornerRadius><SolidColorBrush x:Key="DataControlValidBorder" Color="#FF4F85B7"/>
<!-- Formating for the XamCombo style - Thanks to Andrew Smith !!! --><AlternationConverter x:Key="alternationIndexToBackground"> <SolidColorBrush Color="White" /> <SolidColorBrush Color="#FFF4F8F9" /></AlternationConverter>
<Style TargetType="ComboBoxItem" x:Key="alternatingItem"> <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Self}, Path=(ItemsControl.AlternationIndex), Converter={StaticResource alternationIndexToBackground}}"/></Style>
<Style TargetType="ComboBox" x:Key="alternatingCombo"> <Setter Property="ItemContainerStyle" Value="{StaticResource alternatingItem}" /> <Setter Property="AlternationCount" Value="2" /></Style>
<Style TargetType="{x:Type igEditors:XamComboEditor}"> <Setter Property="ComboBoxStyle" Value="{StaticResource alternatingCombo}" /> <Setter Property="EditTemplate"> <Setter.Value> <ControlTemplate TargetType="{x:Type igEditors:XamComboEditor}"> <Border x:Name="MainBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{DynamicResource StandardControlCornderRadius}"> <ComboBox Name="PART_FocusSite" Padding="{TemplateBinding Padding}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" IsReadOnly="{TemplateBinding ReadOnly}" Background="Transparent" BorderBrush="Transparent" BorderThickness="0,0,0,0" ContextMenu="{TemplateBinding ContextMenu}" IsDropDownOpen="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsDropDownOpen, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Style="{TemplateBinding ComboBoxStyle}" IsEditable="{TemplateBinding IsEditable}" SelectedValuePath="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ItemsProvider.ValuePath}" DisplayMemberPath="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ItemsProvider.DisplayMemberPath}" MaxDropDownHeight="{TemplateBinding MaxDropDownHeight}" igEditors:XamComboEditor.ComboEditor="{Binding RelativeSource={RelativeSource TemplatedParent},Path=.}" /> </Border> <ControlTemplate.Triggers> <Trigger Property="IsInEditMode" Value="True"> <Setter Property="IsTabStop" Value="False" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value></Setter></Style>
The best way to get started with these things is to look at the templates of the elements involved. In this case the ComboBoxItem is the element contained within the dropdown of the combobox. There are a few ways to look at the template - use Blend and have it extract the template, use a tool like XamlPadX, or Reflector using the BamlViewer addin. Once you do that you can find that the template for the comboboxitem changes the background based on the IsHighlighted property going to true. Knowing this you can create your own ComboBoxItem template that changes the color when highlighted/selected. e.g.
Or you could take advantage of the fact that they use a dynamic resource and just provide a different brush for that key. e.g.