RepeatButtons not loosing focus and remains highlighted forever

Question

I ma working on my Up Down control and it works fine, but today I noticed a strange problem with repeat buttons in control. Once I click on the +/- repeat buttons they get highlighted with blue border(thats fine) but the problem is that they remain highlighted even if I click on other buttons or controls on page.

Here is the screenshot -

and here is the xaml I am using -

<!--  RepeatButton styles  -->

<Style
    x:Key="RepeatButtonPathStyle"
    TargetType="Path">
    <Setter
        Property="Width"
        Value="3" />
    <Setter
        Property="Height"
        Value="3" />
    <Setter
        Property="MinWidth"
        Value="3" />
    <Setter
        Property="MinHeight"
        Value="3" />
    <Setter
        Property="HorizontalAlignment"
        Value="Center" />
    <Setter
        Property="VerticalAlignment"
        Value="Center" />
    <Setter
        Property="Stretch"
        Value="None" />
    <Setter
        Property="StrokeThickness"
        Value="1" />
    <Setter
        Property="Stroke"
        Value="{Binding RelativeSource={RelativeSource AncestorType=RepeatButton},
Path=Foreground}" />
</Style>

<DataTemplate
    x:Key="IncreaseGlyph">
    <Path
        Data="M0,1.5 H3 M1.5,0 V3"
        Style="{StaticResource RepeatButtonPathStyle}" />
</DataTemplate>

<DataTemplate
    x:Key="DecreaseGlyph">
    <Path
        Data="M0,1.5 H3"
        Style="{StaticResource RepeatButtonPathStyle}" />
</DataTemplate>

and

<Grid
    Grid.Column="1">
    <Grid.RowDefinitions>
        <RowDefinition
            Height="*" />
        <RowDefinition
            Height="*" />
    </Grid.RowDefinitions>
    <Button
        Grid.Row="0"
        Grid.RowSpan="2"
        IsHitTestVisible="True"
        IsTabStop="False">
        <Button.Template>
            <ControlTemplate
                TargetType="Button">
                <Grid
                    Background="Transparent" />
            </ControlTemplate>
        </Button.Template>
    </Button>
    <RepeatButton
        Grid.Row="0"
        HorizontalContentAlignment="Center"
        Command="{Binding RelativeSource={RelativeSource TemplatedParent}, 
            Path=IncreaseCommand}"
        ContentTemplate="{StaticResource IncreaseGlyph}"
        ToolTip="{Binding RelativeSource={RelativeSource TemplatedParent}, 
            Path=IncreaseButtonToolTip}"
        ToolTipService.BetweenShowDelay="1000"
        ToolTipService.InitialShowDelay="1000"
        ToolTipService.IsEnabled="{Binding RelativeSource={RelativeSource TemplatedParent}, 
            Path=ShowUpDownButtonToolTip}">
    </RepeatButton>
    <RepeatButton
        Grid.Row="1"
        HorizontalContentAlignment="Center"
        Command="{Binding RelativeSource={RelativeSource TemplatedParent}, 
            Path=DecreaseCommand}"
        ContentTemplate="{StaticResource DecreaseGlyph}"
        ToolTip="{Binding RelativeSource={RelativeSource TemplatedParent}, 
            Path=DecreaseButtonToolTip}"
        ToolTipService.BetweenShowDelay="1000"
        ToolTipService.InitialShowDelay="1000"
        ToolTipService.IsEnabled="{Binding RelativeSource={RelativeSource TemplatedParent}, 
            Path=ShowUpDownButtonToolTip}">
    </RepeatButton>
</Grid>

Any pointers?

Answer 1

Only solution I have found to solve this issue is to set Focusable="False" on RepeatButton.

Answer 2

I think you should replace this setter:

<Setter Property="Stroke" Value="{Binding RelativeSource=
{RelativeSource AncestorType=RepeatButton},Path=Foreground}" />

with a trigger instead:

<Style.Triggers>
  <Trigger Property="IsMouseOver" Value="true">
    <Setter Property="Stroke" 
            Value="{Binding RelativeSource={RelativeSource AncestorType=RepeatButton},
                      Path=Foreground}" />
  </Trigger>
</Style.Triggers>

This way it will set the stroke back to its default value when your trigger condition is false (mouse is out, in this case).