UWP Foreground mouseover

Question

If we want to change color of any button of ContentDialog then this code will help
https://social.msdn.microsoft.com/Forums/en-US/606787dc-6d68-4286-9b3b-af9662c24e87/uwpxamlcontentdialog-how-to-change-buttons-style

It works fine, but when mouse over I would like to change the color. Any help will be very much appreciated.

Answer 1

Hello,

Welcome to Microsoft Q&A!

It works fine, but when mouse over I would like to change the color.

Based on the code of FEC-4RP from the MSDN link, if you want to change the background color of the button, what you need is to add more changes to the Button style.

I made a simple style here and you could check it. What I have done is to create a default Button Style, then change the background color value to Yellow in the PointerOver VisualState in the VisualStateManager. You could also change other values if you want to change other button behaviors.

        <Style x:Key="primaryButtonStyle" TargetType="Button">  
            <Setter Property="Background" Value="Red"/>  
            <Setter Property="BackgroundSizing" Value="OuterBorderEdge"/>  
            <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}"/>  
            <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}"/>  
            <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>  
            <Setter Property="Padding" Value="{StaticResource ButtonPadding}"/>  
            <Setter Property="HorizontalAlignment" Value="Left"/>  
            <Setter Property="VerticalAlignment" Value="Center"/>  
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>  
            <Setter Property="FontWeight" Value="Normal"/>  
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>  
            <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>  
            <Setter Property="FocusVisualMargin" Value="-3"/>  
            <Setter Property="Template">  
                <Setter.Value>  
                    <ControlTemplate TargetType="Button">  
                        <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BackgroundSizing="{TemplateBinding BackgroundSizing}" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" CornerRadius="{TemplateBinding CornerRadius}" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">  
                            <VisualStateManager.VisualStateGroups>  
                                <VisualStateGroup x:Name="CommonStates">  
                                    <VisualState x:Name="Normal">  
                                        <Storyboard>  
                                            <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter"/>  
                                        </Storyboard>  
                                    </VisualState>  
                                    <VisualState x:Name="PointerOver">  
                                        <Storyboard>  
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">  
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Yellow"/>  
                                            </ObjectAnimationUsingKeyFrames>  
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">  
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPointerOver}"/>  
                                            </ObjectAnimationUsingKeyFrames>  
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">  
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPointerOver}"/>  
                                            </ObjectAnimationUsingKeyFrames>  
                                            <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter"/>  
                                        </Storyboard>  
                                    </VisualState>  
                                    <VisualState x:Name="Pressed">  
                                        <Storyboard>  
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">  
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPressed}"/>  
                                            </ObjectAnimationUsingKeyFrames>  
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">  
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPressed}"/>  
                                            </ObjectAnimationUsingKeyFrames>  
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">  
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPressed}"/>  
                                            </ObjectAnimationUsingKeyFrames>  
                                            <PointerDownThemeAnimation Storyboard.TargetName="ContentPresenter"/>  
                                        </Storyboard>  
                                    </VisualState>  
                                    <VisualState x:Name="Disabled">  
                                        <Storyboard>  
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Background">  
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundDisabled}"/>  
                                            </ObjectAnimationUsingKeyFrames>  
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush">  
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushDisabled}"/>  
                                            </ObjectAnimationUsingKeyFrames>  
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">  
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundDisabled}"/>  
                                            </ObjectAnimationUsingKeyFrames>  
                                        </Storyboard>  
                                    </VisualState>  
                                </VisualStateGroup>  
                            </VisualStateManager.VisualStateGroups>  
                        </ContentPresenter>  
                    </ControlTemplate>  
                </Setter.Value>  
            </Setter>  
        </Style>  

Thank you.

---

If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

The best of the best answer.

Answer 3

Very nice. This is just what I've been looking for to have control over button coloration in a WinUI3 app.

Thanks very much!