Question

I’ve been trying and searching for this one quit a long time now.

Windows added a black (or transparant) border around a button component. The reason for this is that the touch area for the button is a bit larger and thus it’s easier to tap a button.

In my application, I really need to remove that area. I tried a lot but it seems that it’s impossibe. I also tried it in Expression Blend but no luck.

    <Style x:Key="ButtonStyleCalendar" TargetType="Button">
        <Setter Property="Background" Value="{StaticResource PhoneAccentBrush}"/>
        <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeSmall}"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Margin" Value="0" />
        <Setter Property="VerticalContentAlignment" Value="Top" />
    </Style>

That is the style that I applied to the button. I tought it would be the margin or padding but that’s not it.

Does anyone has an answer for this? I searched stackoverflow but nobody came up with a solution.

Thanks in advance!

Answer 1

You need to override the ControlTemplate of the Button and remove the Margin="{StaticResource PhoneTouchTargetOverhang}". Here is the resulting style:

<Style x:Key="ButtonStyleCalendar" TargetType="Button">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
    <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
    <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
    <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
    <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>
    <Setter Property="Padding" Value="10,3,10,5"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid Background="Transparent">
                    <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" >
                        <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>