Create a mouse hover effect in buttons using XAML

Question

I am making a Windows 8 store app, and I want a HyperlinkButton that changes its color whenever it is clicked or mouse is hovered over it. Please provide me with its whole coding. I have looked everywhere, but none are working for my project. I am using Visual Studio Ultimate 2012.

Answer 1

Okay, right out of the box, here's the full implementation (Windows 8.1):

<Button Style="{StaticResource TextBlockButtonStyle}">Hello World</Button>

First, I recommend that you do not attempt to customize the colors. This helps ensure a level of visual alignment with your app and the rest of the ecosystem. So, you might tweak the look and feel by changing the theme like this:

<Button RequestedTheme="Dark"
    Style="{StaticResource TextBlockButtonStyle}">Hello World</Button>
<Button RequestedTheme="Light"
    Style="{StaticResource TextBlockButtonStyle}">Hello World</Button>

However, sometimes you must customize more. I get that. So, if you want to customize those colors, you will need to override the theme. Like this (in app.xaml):

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Dark">
                <!-- normal -->
                <SolidColorBrush x:Key="ButtonForegroundThemeBrush" Color="Blue" />
                <SolidColorBrush x:Key="ButtonBackgroundThemeBrush" Color="Transparent" />
                <!-- hover -->
                <SolidColorBrush x:Key="ButtonPointerOverForegroundThemeBrush" Color="Red" />
                <SolidColorBrush x:Key="ButtonPointerOverBackgroundThemeBrush" Color="Transparent" />
                <!-- pressed -->
                <SolidColorBrush x:Key="ButtonPressedForegroundThemeBrush" Color="White" />
                <SolidColorBrush x:Key="ButtonPressedBackgroundThemeBrush" Color="Red" />
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Application.Resources>

Runny enough, I asked a similar question a while back Simple hover effect in XAML?

Best of luck!

Answer 2

You have two choice. Either you can customize the default style of HyperlinkButton or you can change the value of required default system brush (This will create effect to all HyperlinkButton).

System brush of HyperlinkButton.

<SolidColorBrush x:Key="HyperlinkButtonBackgroundThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="HyperlinkButtonBorderThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="HyperlinkDisabledThemeBrush" Color="#66FFFFFF" />
<SolidColorBrush x:Key="HyperlinkForegroundThemeBrush" Color="#FF9C72FF" />
<SolidColorBrush x:Key="HyperlinkPointerOverForegroundThemeBrush" Color="#CC9C72FF" />
<SolidColorBrush x:Key="HyperlinkPressedForegroundThemeBrush" Color="#999C72FF" />

Default Style

<Style TargetType="HyperlinkButton">
    <Setter Property="Foreground" Value="{StaticResource HyperlinkForegroundThemeBrush}" />
    <Setter Property="Background" Value="{StaticResource HyperlinkButtonBackgroundThemeBrush}" />
    <Setter Property="BorderBrush" Value="{StaticResource HyperlinkButtonBorderThemeBrush}" />
    <Setter Property="BorderThickness" Value="{StaticResource HyperlinkButtonBorderThemeThickness}" />
    <Setter Property="Padding" Value="12,4,12,5" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="VerticalAlignment" Value="Center" />
    <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}" />
    <Setter Property="FontWeight" Value="SemiBold" />
    <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="HyperlinkButton">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                   Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HyperlinkPointerOverForegroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                   Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HyperlinkPressedForegroundThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                   Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource HyperlinkDisabledThemeBrush}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused">
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="FocusVisualWhite"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1"
                                                     Duration="0" />
                                    <DoubleAnimation Storyboard.TargetName="FocusVisualBlack"
                                                     Storyboard.TargetProperty="Opacity"
                                                     To="1"
                                                     Duration="0" />
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unfocused" />
                            <VisualState x:Name="PointerFocused" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="Border"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Margin="3">
                        <ContentPresenter x:Name="ContentPresenter"
                                          Content="{TemplateBinding Content}"
                                          ContentTransitions="{TemplateBinding ContentTransitions}"
                                          ContentTemplate="{TemplateBinding ContentTemplate}"
                                          Margin="{TemplateBinding Padding}"
                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                    </Border>
                    <Rectangle x:Name="FocusVisualWhite"
                               IsHitTestVisible="False"
                               Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}"
                               StrokeEndLineCap="Square"
                               StrokeDashArray="1,1"
                               Opacity="0"
                               StrokeDashOffset="1.5" />
                    <Rectangle x:Name="FocusVisualBlack"
                               IsHitTestVisible="False"
                               Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}"
                               StrokeEndLineCap="Square"
                               StrokeDashArray="1,1"
                               Opacity="0"
                               StrokeDashOffset="0.5" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

HyperlinkButton styles and templates