40
XamComboEditor Styling
posted

Hello there,

I am facing some troubles trying to style the XamComboEditor. I may be approaching this the wrong way but after looking at the documentary and some help threads I still can't figure out how to style the XamComboEditor the way I want it or rather what properties to access.

As an example have a picture of what I currently achieved when I tried to style the control:

Example

To the left and right side of the XamComboEditor I have some CheckBoxes in the style I have them all over my app. Also you can see the 2 different shades of grey color I use for backgrounds. What I am trying to achieve is also having the parts which are still white/windows default color in my "color sheme".

This is the code I currently use for the XamComboEditor:

<igE:XamComboEditor Name="SelectedPCBox" IsEditable="False" AllowMultipleSelection="True"
ItemsSource="{Binding PerformanceComparisons}" DisplayMemberPath="Key"
CheckBoxVisibility="Visible" Width="150" VerticalAlignment="Center"
Margin="10 0">
<igE:XamComboEditor.ItemContainerStyle>
<Style TargetType="igE:ComboEditorItemControl">
<Setter Property="Background" Value="#2a2a2a"/>
<Setter Property="Foreground" Value="WhiteSmoke"/>
</Style>
</igE:XamComboEditor.ItemContainerStyle>
<igE:XamComboEditor.Style>
<Style TargetType="igE:XamComboEditor">
<Setter Property="Background" Value="#2a2a2a"/>
<Setter Property="EditAreaBackground" Value="#2a2a2a"/>
<Setter Property="Foreground" Value="WhiteSmoke"/>
</Style>
</igE:XamComboEditor.Style>



Now I do have a ResourceDictionary which contains styles for ComboBoxes, CheckBoxes and ScrollBars. It would be cool if there was a way to just apply those to the XamComboEditor to keep the appearance the same in the whole app but I would also be content with just having the colors align to my app and using the default XamComboEditor style.

Best regards

Henrik

Parents
No Data
Reply
  • 26500
    Verified Answer
    Offline posted

    Hello Henrik,

    From the code that you have provided, it appears that you are using the XamComboEditor that exists in the Infragistics.Controls.Editors assembly. This XamComboEditor does not use a ComboBox internally, and so while it appears from your screenshot that the CheckBoxes and ScrollBars in your XamComboEditor should take your Styles, the ComboBox styles that you have applied won't do anything.

    Many of the pieces that it appears you are looking to style are going to require a modification of the default style of the XamComboEditor and one of its dependencies. This default style can commonly be found in the generic.xaml file at the following directory:

    C:\Program Files (x86)\Infragistics\<your version here>\WPF\DefaultStyles\XamComboEditor

    Once you include the default style for the XamComboEditor and its dependencies, I would recommend that you take a look at the ToggleButton Style that it is dependent on. Inside, you will find a bunch of Border elements named BackgroundGradient, BackgroundGradient2, BackgroundOverlay, BackgroundOverlay2, and BackgroundOverlay3. These are the parts of the XamComboEditor that, when in "IsEditable = false" mode, make up the default color and highlight colors. I would recommend that you change their Background and BorderBrush properties to your liking.

    If you do make these changes, it will be important to note that you should look at the VisualStates that exist for this ToggleButton style as well. Many of these VisualStates are expecting a LinearGradientBrush, and so if you wish to change your style to a SolidColorBrush, you should change the Storyboard.TargetProperty settings to "(Border.Background).(SolidColorBrush.Color)." Note, this is only if you wish to have highlighting in the XamComboEditor on mouse over and when the drop-down is open. If not, you can very likely just remove the corresponding VisualState elements for MouseOver, Pressed, and Checked from the style, along with some of the Border elements they target.

    There is still the matter of the bit of the XamComboEditor's drop-down that is used for resizing it. This is in the actual ControlTemplate for the XamComboEditor style. There is an element named a PopupResizer that, if you change the Background of it, will control this. There is also a Border element above it named "RootPopupElement" which I would also recommend you set the colors of, as this is the element that becomes visible when the XamComboEditor resizes past the vertical bounds of the XamComboEditor items.

    I have attached a sample project to demonstrate the above styling modifications. I hope this helps.

    Please let me know if you have any other questions or concerns on this matter.

    Sincerely,
    Andrew
    Associate Developer

    XamComboEditorStylingCase.zip
Children