XAML / C＃中的按钮边框已被切断

Question

I'm designing a Windows Phone 8.1 app in XAML/C# with Visual Studio Community 2013, and I'm using a few buttons. For some reason, a few of the button borders are getting cut off when I deploy the app to my phone. Here's the relevant code:

    <Grid.ColumnDefinitions>
            <ColumnDefinition Width="11*"/>
            <ColumnDefinition Width="11*"/>
            <ColumnDefinition Width="11*"/>
            <ColumnDefinition Width="11*"/>
        </Grid.ColumnDefinitions>

<Button x:Name="MiddleButton" HorizontalAlignment="Stretch" Margin="10,0" VerticalAlignment="Bottom" Height="140" Background="#FF25A618" FontSize="22" ClickMode="Press" BorderBrush="#FF856767" Foreground="White" Content="2" FontFamily="Global User Interface" Grid.ColumnSpan="2" Grid.Column="1" Padding="0"/>
        <Button x:Name="RightButton" Content="3" HorizontalAlignment="Stretch" Margin="0" VerticalAlignment="Bottom" Height="140" Background="#FF0686A2" FontSize="22" ClickMode="Press" BorderBrush="#FF856767" FontFamily="Global User Interface" Grid.Column="3" Padding="0"/>
        <Button x:Name="LeftButton" Content="1" HorizontalAlignment="Stretch" Margin="0" VerticalAlignment="Bottom" Height="140" Background="#FFCB0B0B" FontSize="22" ClickMode="Press" BorderBrush="#FF856767" FontFamily="Global User Interface" Padding="0" UseLayoutRounding="True"/>

I've tried changing the HorizontalAlignment properties of the buttons, and changing the margins so there is more space in between the buttons and the sides of the screen, but at least one border of the LeftButton and the RightButton always gets cut off. With these alignment properties, the right border of each button is cut off. What is causing the borders to be cut off, and how do I fix this?

Answer 1

The Button has a MinWith defined in it's default Style:

<Setter Property="MinWidth" Value="{ThemeResource PhoneButtonMinWidth}"/>

That is defined as 109 and therefore bigger than the space in your Grid:

<x:Double x:Key="PhoneButtonMinWidth">109</x:Double>

Just set a new MinWidth for that matches your content.

<Button MinWidth="10" ... />