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:
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
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,AndrewAssociate Developer
Hey Andrew,
first of all thank you for the very fast and detailed aswer. It was very easy to understand and actually your demo already does 99% of what I wanted to achieve so it was very easy to implement into our project.
I do have one last question about the styling of the Items in the dropdown menu. How do I change the MouseOver and IsChecked highlighting for each item?
There are two elements in the template of the XamComboEditor which could be responsible for holding the items:
<igPrim:ItemsPanel x:Name="ItemsPanel" VerticalAlignment="Top"/>
and
<StackPanel x:Name="MultiSelectContentPanel" Orientation="Horizontal" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="Stretch"/>
I'm not sure if it is actually either of these, it was just that those two caught my eye when I tried to find an element responsible for the dropdown listitems.
As you can see in this image
It's hard to read what the text of a hovered or checked item is. I would like to either remove the highlighting completely or apply the same colors I use in the rest of the project which work well with the white font and dark background.
In order to style the hovered or checked XamComboEditor item colors, this will require another modification of a default style. This time, I would recommend including the default style for ComboEditorItemControl from the generic.xaml file mentioned above.
Inside the default ControlTemplate for ComboEditorItemControl, you will find three Rectangle elements named "mouseOverRectangle", "selectedRectangle", and "FocusVisualElement." If you change the Fill and Stroke properties of these, you can change the default colors for the hover and selected/checked states of the XamComboEditor items.
I have attached a modified sample project to the one I had originally sent you. I hope this helps.