Change Button Foreground and Background on MouseOver

[HowardPWeiss]

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

   <Style TargetType ="Button">
            <Setter Property="Background" Value="Red" />
            <Setter Property="Foreground" Value="Blue" />
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="true">
                    <Setter Property="Foreground" Value ="Green" />
                </Trigger>
                </Style.Triggers>
        </Style>

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

[francoistanguay]

Please check this: https://platform.uno/docs/articles/external/uno.toolkit.ui/doc/lightweight-styling.html

cc @kazo0

[kazo0]

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!

[agneszitte]

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 VisualStates for Button:
  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:

   <Style TargetType ="Button">
       <Setter Property="Background" Value="Red" />
       <Setter Property="Foreground" Value="Blue" />
       <Setter Property="Template">
           <Setter.Value>
               <ControlTemplate TargetType="Button">
                   <Border x:Name="RootElement">
                       <VisualStateManager.VisualStateGroups>
                           <VisualStateGroup x:Name="CommonStates">
                           
                               <VisualState x:Name="Normal" />
   
                               <VisualState x:Name="PointerOver">
                                   <VisualState.Setters>
                                       <Setter Target="ContentPresenter.Foreground" Value="Green" />
                                   </VisualState.Setters>
                               </VisualState>
   
                               <VisualState x:Name="Pressed" />
   
                               <VisualState x:Name="Disabled"/>
                               
                               <VisualState x:Name="Focused"/>
   
                               <VisualState x:Name="PointerFocused"/>
   
                           </VisualStateGroup>
                       </VisualStateManager.VisualStateGroups>
   
                       <ContentPresenter x:Name="ContentPresenter"
                           Margin="{TemplateBinding Padding}"
                           Content="{TemplateBinding Content}"
                           ContentTemplate="{TemplateBinding ContentTemplate}"
                           ContentTransitions="{TemplateBinding ContentTransitions}"
                           FontFamily="{TemplateBinding FontFamily}"
                           FontSize="{TemplateBinding FontSize}"
                           FontWeight="{TemplateBinding FontWeight}"
                           Foreground="{TemplateBinding Foreground}"
                           Background="{TemplateBinding Background}"
                           CharacterSpacing="{TemplateBinding CharacterSpacing}"
                           HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                           VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
                   </Border>	
               </ControlTemplate>
           </Setter.Value>
       </Setter>
   </Style>
  

• For a more simple solution, you can use Lightweight Styling without the need to redefine the entire style of the control just for the "PointerOver" VisualState here for example. For general information about lightweight styling.

  We have some live examples on https://gallery.platform.uno/ with the associated XAML markup.
  

  Here is an example of what you wanted to achieve:

   <Button Content="Overridden Button Style example">
      <Button.Resources>
         <SolidColorBrush x:Key="ButtonForeground"
                          Color="Blue" />
         <SolidColorBrush x:Key="ButtonBackground"
                          Color="Red" />
         <SolidColorBrush x:Key="ButtonForegroundPointerOver"
                          Color="Green" />
      </Button.Resources>
   </Button>
  

• And like @kazo0 mentioned, if you want to override resources for specific visual states and wrap that all up in a reusable style, you can refer to the ResourceExtensions from Uno Toolkit.

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.

[HowardPWeiss]

Agnes

Thank you very much. I fixed your example by adding appropriate end elements (see below).

When I use this to style my buttons, I observe the following:

• Buttons appear with Blue Foreground and Black Background
• When I move the mouse over a button, the Foreground Color changes to Green but the Background color remains blank'
• It would appear that is ignored

Thank you for the suggesting to look into lightweight styling
Howard Weiss

<Style TargetType ="Button">
    <Setter Property="Background" Value="Red" />
    <Setter Property="Foreground" Value="Blue" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border x:Name="RootElement">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                        
                            <VisualState x:Name="Normal" />

                            <VisualState x:Name="PointerOver">
                                <VisualState.Setters>
                                    <Setter Target="ContentPresenter.Foreground" Value="Green" />
                                </VisualState.Setters>
                            </VisualState>

                            <VisualState x:Name="Pressed" />

                            <VisualState x:Name="Disabled"/>
                            
                            <VisualState x:Name="Focused"/>

                            <VisualState x:Name="PointerFocused"/>

                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <ContentPresenter x:Name="ContentPresenter"
                        Margin="{TemplateBinding Padding}"
                        Content="{TemplateBinding Content}"
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        ContentTransitions="{TemplateBinding ContentTransitions}"
                        FontFamily="{TemplateBinding FontFamily}"
                        FontSize="{TemplateBinding FontSize}"
                        FontWeight="{TemplateBinding FontWeight}"
                        Foreground="{TemplateBinding Foreground}"
                        CharacterSpacing="{TemplateBinding CharacterSpacing}"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
                </Border>	
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

[HowardPWeiss]

I do not know why my previous response was truncated

If I add Background="{TemplateBinding Background}" to the Content Presenter than I see a red background

<Style TargetType ="Button"> </Style>

[agneszitte]

@HowardPWeiss I'm glad we could assist you!

Yes, I just noticed Background="{TemplateBinding Background}" was missing on my quick code snippet above, I adjusted it.

My piece of advice for you depending on what you are trying to achieve is that if you don't want to change anything else for the control except the colors here then LightWeight Styling is the way to go as it will be so much easier for you to do the proper adjustments and less code as well. But if you want to adjust other things inside the control template then you will need to rewrite the entire style like in the first option I mentioned.

Something to note is that when sharing a snippet of code on GitHub you will need to add ``` before and after the code so we can visualize it properly. I adjusted your discussion description and one of your comments above so you can see the difference.
You can also select your entire code snippet and use the code button:

Here is the related GitHub documentation for quoting code.