Change Button Foreground and Background on MouseOver #16658
-
I have a basic question, I been trying to use xaml to style to a button to change button foreground and/or background on mouse over My latest attempt looks like
My button come up with Blue Test on a Red Background However, nothing happens if I move the mouse over a button II have found all sorts of suggestions on the net but nothing works Is there a simple example of how to style a button to change the foreground and background when a a trigger occurs (MouseOver, IsPressed> Also, where can I find a list of Trigger.Properties for a button |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 3 replies
-
Please check this: https://platform.uno/docs/articles/external/uno.toolkit.ui/doc/lightweight-styling.html cc @kazo0 |
Beta Was this translation helpful? Give feedback.
-
Hi @HowardPWeiss, good question! You are able to achieve this using Lightweight Styling. You can refer to the general documentation for how you can do this with a default styled Uno app. If you are using Uno Material, supplement that documentation with the specific Lightweight Styling docs for Uno Material. Specifically for Buttons in Uno Material, we have a list of available lightweight style-able resources Now, if you want to override resources for specific visual states and wrap that all up in a reusable style, refer to the ResourceExtensions from Uno Toolkit. There should be a good amount of examples and videos from those documents but let me know if you need more guidance for your specific scenario! |
Beta Was this translation helpful? Give feedback.
-
Hi @HowardPWeiss
Lastly, for additional details on the various Themes that Uno Platform offers to enhance your UI design options, feel free to explore Uno.Themes and Lightweight Styling in Uno.Themes. |
Beta Was this translation helpful? Give feedback.
Hi @HowardPWeiss
So basically you have different options here:
You can redefine the style of the
Button
control like you tried to do. But for that, you will need to update the "PointerOver"VisualState
in the VisualStateGroup in the ControlTemplate of the Button.Here is an example of the available
VisualState
s forButton
:https://learn.microsoft.com/en-us/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.visualstate?view=windows-app-sdk-1.5#examples
Here is a stripped-down version of what you wanted to achieve: