Unwanted margins in Button

Question

I am trying to make a simple grid of 5 columns and 11 rows of squares with regular spacing between them that will work on all the resolutions. As you can see in the image I get squares alright (in red) but there is space between the rows. When I click on this "empty" space a button gets selected. Which is strange, as if there was some invisible margins or paddings on top and bottom of the button.

            <ScrollViewer x:Name="myScrollViewer">
                <Grid x:Name="aGrid" Background="#FF8AC731" >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" x:Name="aColumn"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>
                        <RowDefinition MinHeight="50" x:Name="aRow" />
                        <RowDefinition MinHeight="{Binding ActualWidth, ElementName=aColumn}"/>
                        <RowDefinition MinHeight="{Binding ActualWidth, ElementName=aColumn}"/>
                        <RowDefinition MinHeight="{Binding ActualWidth, ElementName=aColumn}"/>
                        <RowDefinition MinHeight="{Binding ActualWidth, ElementName=aColumn}"/>
                        <RowDefinition MinHeight="{Binding ActualWidth, ElementName=aColumn}"/>
                        <RowDefinition MinHeight="{Binding ActualWidth, ElementName=aColumn}"/>
                        <RowDefinition MinHeight="{Binding ActualWidth, ElementName=aColumn}"/>
                        <RowDefinition MinHeight="{Binding ActualWidth, ElementName=aColumn}"/>
                        <RowDefinition MinHeight="{Binding ActualWidth, ElementName=aColumn}"/>
                        <RowDefinition MinHeight="{Binding ActualWidth, ElementName=aColumn}"/>
                    </Grid.RowDefinitions>
        <!-- **********First Column**************-->
                    <!-- a-->
                    <Button Grid.Row="0" Grid.Column="0" Background="#FFF32929" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MinWidth="50" Padding="0"  Margin="1" >
                        <Image Grid.Column="0" Grid.Row="0" Source="Assets/hiraganas/hiragana-bold-table_01 a.png" Canvas.ZIndex="100"/>
                    </Button>

...

Answer 1

Button comes default with 12px margin, here is the style template of the offending Margin

<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">

Margin="{StaticResource PhoneTouchTargetOverhang}

---

Full Style override

<Style x:Key="Chubs_Style" 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 PhoneFontSizeMedium}"/>
    <Setter Property="Padding" Value="10,5,10,6"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid Background="Transparent">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver"/>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="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>

Answer 2

Yes, there are indeed margins on the standard button.

You can apply a custom style to your buttons. The following button style has no margins, and works in WP7 (it might need tweaking for WP8.) Put it in your app.xaml and then set the style when you use the button with Style="{StaticResource CustomButtonStyle}"

<Application.Resources>
           <Style x:Key="CustomButtonStyle" 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="0"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid Background="Transparent">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="MouseOver"/>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneBackgroundBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneForegroundBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="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>


    </Application.Resources>

Answer 3

Could it be with Margin -10 up and down?

            <Button Grid.Row="0" Grid.Column="0" Background="#FFF32929" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MinWidth="50" Margin="1,-10" >
                <Image Grid.Column="0" Grid.Row="0" Source="Assets/hiraganas/hiragana-bold-table_01 a.png" Canvas.ZIndex="100"/>
            </Button>

As I know Buttons have margins by themselves