Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
375
Modify the appearance of the ‘mouse over item’ in a XamComboEditor dropdown list
posted

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>

  • 54937
    Suggested Answer
    Offline posted

    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.

        <Style TargetType="ComboBoxItem" x:Key="alternatingItem">
            <Setter Property="Background" 
                Value="{Binding RelativeSource={RelativeSource Self},
                Path=(ItemsControl.AlternationIndex),
                Converter={StaticResource alternationIndexToBackground}}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ComboBoxItem">
                        <Border BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="{TemplateBinding Background}"
                                Padding="{TemplateBinding Padding}"
                                SnapsToDevicePixels="True">
                            <ContentPresenter 
                                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsHighlighted" Value="True">
                    <Setter Property="Background" Value="Green" />
                </Trigger>
            </Style.Triggers>
        </Style>

    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.

        <Style TargetType="ComboBoxItem" x:Key="alternatingItem">
            <Style.Resources>
                <SolidColorBrush Color="Green" x:Key="{x:Static SystemColors.HighlightBrushKey}" />
            </Style.Resources>
            <Setter Property="Background" 
                Value="{Binding RelativeSource={RelativeSource Self},
                Path=(ItemsControl.AlternationIndex),
                Converter={StaticResource alternationIndexToBackground}}"/>
        </Style>