Hello,
I have successfully applied a xamMultiColumComboEditor to my WPF application. I have applied the Office2013 theme styling and most everything works, except for the change in border color on mouseover. Blue coloring gets applied to the dropdown button, but not to the border around the box itself. The style gets applied correctly to the XamComboEditor boxes that we are using, but I can't seem to replicate the behavior.
Is there a way to achieve this? I have played with the VisualStateGroup settings in the Office2013.xamMultiColumnCombo.xaml file, but haven't had any success. Any help would be greatly appreciated.
That did it, thank you Andrew!
Hello nwnerd,
In order to highlight the drop-down button as well as the border of your XamMultiColumnComboEditor, I would recommend going into the Styles.Shared.xaml file, which is a dependency of the Office2013.xamMultiColumnCombo.xaml file, and locate a Style with a key of "ComboBoxToggleButtonStyle." This is the style used for the XamMultiColumnComboEditor's drop-down button.
The highlight that you are seeing is caused by a VisualState in which a Rectangle named "hover" in this ToggleButton's ControlTemplate has its opacity changed from 0 to 1 on mouse over of the ToggleButton. I would recommend that you add a DataTrigger to this ControlTemplate's Triggers collection, which uses a RelativeSource binding to bind up to the XamMultiColumnComboEditor and its IsMouseOver property. Doing this, you can write a Setter that targets the "hover" Rectangle's Opacity property and change it to 1.
I have attached a modified version of the original sample project I had sent you to demonstrate. I hope this helps.
Please let me know if you have any other questions or concerns on this matter.
Sincerely,AndrewAssociate Developer
One more question. When I hover on the box, it highlights the box but not the dropdown arrow/button. Is it possible to have it highlight that as well as the border?
Thanks Andrew, that did the trick. I was hung up on thinking that I needed to use a visual state, but this is simpler & effective.
In order to apply a blue border around the XamMultiColumnComboEditor on mouse-over, I would recommend including the Office2013.xamMultiColumnCombo.xaml file in your project, along with any other dependencies it may have. By merging this file, you will essentially be applying the Office2013 theme in the scope of the XamMultiColumnComboEditor, and as such, you can write a Style for XamMultiColumnComboEditor that uses the BasedOn tag to "base" off of the Office2013 theme.
By doing this, you can write a Trigger that checks for IsMouseOver on the XamMultiColumnComboEditor. If this property is true, you can set the BorderBrush property of the editor, which should place a colored border around your editor on mouse over.
I have attached a sample project to demonstrate the above.