Can't change border color when mouse hover button

Question

I'm trying to change the default border color when mouse is over a button but I can't get it to work. I've thought this would work fine but apparently it doesn't:

<Button>
    <Button.Resources>
        <Color x:Key="ControlMouseOverColor">somecolor</Color>
     </Button.Resources>
</Button>

Is there any way to do this?

Answer 1

This is one of the cases where you need to do something slightly complicated to accomplish something simple in WPF :). You actually need to override the ControlTemplate for the Button control, as the border color when the mouse is over the button is determined by the default ControlTemplate. The below is a button with a default CotrolTemplate, minus the IsMouseOver setter set to red:

    <Button>
        <Button.Template>
            <ControlTemplate TargetType="{x:Type ButtonBase}">
                <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                    <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="Button.IsDefaulted" Value="True">
                        <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" TargetName="border" Value="#FFBEE6FD"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="Red"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" TargetName="border" Value="#FFC4E5F6"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="#FF2C628B"/>
                    </Trigger>
                    <Trigger Property="ToggleButton.IsChecked" Value="True">
                        <Setter Property="Background" TargetName="border" Value="#FFBCDDEE"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="#FF245A83"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Background" TargetName="border" Value="#FFF4F4F4"/>
                        <Setter Property="BorderBrush" TargetName="border" Value="#FFADB2B5"/>
                        <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="#FF838383"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Button.Template>
        Click
    </Button>

Answer 2

The normal solution to this in WPF is a property trigger:

<Button>
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Setter Property="BorderBrush" Value="Black"></Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="BorderBrush" Value="Red"></Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

Property triggers are designed to react when a condition becomes true, but resume their previous state when that condition becomes false. So here we are saying: When the IsMouseOver Property becomes true set the boarder brush of the button defined to red. When the condition becomes false it will change back to black (I'm not sure what the default colour is for a border brush, so you could delete the 4th line)