XAML Windows 8 app blue border on button hover

Question

I can't seem to find an answer to this. Basically, I have created buttons containing an image. When you hover over the button - a blue border appears currently. I want to create my own hover state on the image, so I don't need the blue border - which is pushing out the spacing. Does anyone know how to remove it?

<Button Style="{StaticResource EventButton}">
    <Image Source="/Assets/EventIcons/Business/event-Fire.png" Stretch="Fill"/>
</Button>

My styles:

<Style x:Key="RiskButton" TargetType="Button">
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="Margin" Value="4,4,4,4"/>
    <Setter Property="Width" Value="120"/>
    <Setter Property="Height" Value="120"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="Padding" Value="0"/>
    <Setter Property="BorderThickness" Value="0"/>
</Style>

thanks for any help!

Answer 1

Open your project under Blend for visual studio (i recommend you to apply the visual studio 2012 update 2 before), select your button and right click -> edit the template -> edit a copy -> create a new local resource.

In the State panel you will see the different possible states of your button (normal, pressed, pointerover, focused...), select for example "PointerOver" and change the Background Brush to transparent (or just remove it).

PointerOver before:

<VisualState x:Name="PointerOver">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverBackgroundThemeBrush}" />
        </ObjectAnimationUsingKeyFrames>

        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"                                 Storyboard.TargetProperty="Foreground">
               <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverForegroundThemeBrush}" />
        </ObjectAnimationUsingKeyFrames>

    </Storyboard>
 </VisualState>

PointerOver after:

<VisualState x:Name="PointerOver">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Null}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
            Storyboard.TargetProperty="Foreground">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverForegroundThemeBrush}" />
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

Now the blue border is gone. To apply it to your other buttons, you can move this style in a dictionary loading in you App.xaml and use the Style property.

Full xaml example to test:

<Page
    x:Class="AppSandBox.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppSandBox"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.Resources>
        <Style x:Key="RiskButton" TargetType="Button">
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="Margin" Value="4,4,4,4"/>
            <Setter Property="Width" Value="120"/>
            <Setter Property="Height" Value="120"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="BorderThickness" Value="0"/>
        </Style>
        <ControlTemplate x:Key="ButtonControlTemplate1" TargetType="Button">
            <Grid>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal" />
                        <VisualState x:Name="PointerOver">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                    Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Null}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                    Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPointerOverForegroundThemeBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Pressed">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                    Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedBackgroundThemeBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                    Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedForegroundThemeBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                    Storyboard.TargetProperty="Background">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBackgroundThemeBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                    Storyboard.TargetProperty="BorderBrush">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledBorderThemeBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                    Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonDisabledForegroundThemeBrush}" />
                                </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>
    </Page.Resources>
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Button Style="{StaticResource RiskButton}" VerticalAlignment="Top" Template="{StaticResource ButtonControlTemplate1}">
            <Image Source="/Assets/Metro-icon.png" Stretch="Fill" Margin="10"/>
        </Button>

    </Grid>
</Page>

Answer 2

Each control in Windows Store XAML framework has default set of brushes and style. For example this is styles for Button: Button styles and templates. You always first can try to just change default brushes to something you want. If this will not give you effect which you want to see - you can change default control template on something you want.