title: How to control button layout in Xaml
body: <p>Im having trouble controlling the exact layout of a button control with XAML.
  It seems that whatever i do the button is of a minimum width.
  I have a simple button with only a textblock inside the button. But the button has a lot of margin and padding that i cant seem to get rid of (i know of negative margins and padding).
  The things i want to know is:
  1. Why in the world was it designed this way.
  2. what are the groundrules for controlling the exact layout of a button?</p>
  
  <p>My code is as follows:</p>
  
  <pre><code>&lt;Grid&gt;
      &lt;Grid.RowDefinitions&gt;
          &lt;RowDefinition Height="80"&gt;&lt;/RowDefinition&gt;
          &lt;RowDefinition Height="*"&gt;&lt;/RowDefinition&gt;
      &lt;/Grid.RowDefinitions&gt;
  
      &lt;StackPanel Grid.Row="0"&gt;&lt;/StackPanel&gt;
  
      &lt;Pivot Grid.Row="1"&gt;
          &lt;Pivot.Title&gt;
              &lt;StackPanel Orientation="Horizontal" Margin="-15,-3,0,0" Background="red" Width="480"&gt;
                  &lt;Button Background="Blue" x:Name="btnStudies" Click="btnMenuItem_Click" Width="20"&gt;
                      &lt;TextBlock Text="Title" Foreground="White"&gt;&lt;/TextBlock&gt;
                  &lt;/Button&gt;
  
                  &lt;Button Background="Green"&gt;
                      &lt;TextBlock Text="Title" Foreground="White"&gt;&lt;/TextBlock&gt;
                  &lt;/Button&gt;
  
                  &lt;Button Background="Blue" Click="btnMenuItem_Click"&gt;
                      &lt;TextBlock Text="Title" Foreground="White"&gt;&lt;/TextBlock&gt;
                  &lt;/Button&gt;
  
                  &lt;Button Background="Blue" Click="btnMenuItem_Click"&gt;
                      &lt;TextBlock Text="Title" Foreground="White"&gt;&lt;/TextBlock&gt;
                  &lt;/Button&gt;
  
                  &lt;Button Background="Blue" Click="btnMenuItem_Click"&gt;
                      &lt;TextBlock Text="Title" Foreground="White"&gt;&lt;/TextBlock&gt;
                  &lt;/Button&gt;
              &lt;/StackPanel&gt;
  
          &lt;/Pivot.Title&gt;
      &lt;/Pivot&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>I want five buttons in a row but these are already too wide for the screen (windows phone). Changing the width doesnt seem to have any effect (why is it there).
  The textBlock control within the button the button is as wide as the text on it, but i dont seem to have any control on the width of the button. In HTML you only have padding or margin when you define it but in xaml it just seems to be there and for me its unclear how to undo that.</p>
  
  <p>*****EDIT*****
  After reading Rachel's reply i decided to start from the ground up.
  Using the code below i still have no control over how wide the button is because it uses a certain amount of padding that i cant seem to remove. The button has a width of about 110 when i define a width lower than that it doesnt change. Margins and paddings of 0 have no effect at all (dont want to use negative values just yet because that doesnt seem very intuitive). So the code below is very simple but still the button takes up an amount of space that i dont have any control over. I cant imagine a reason why it was designed this way.</p>
  
  <pre><code>&lt;Grid&gt;
      &lt;Grid.ColumnDefinitions&gt;
          &lt;ColumnDefinition Width="400" /&gt;
      &lt;/Grid.ColumnDefinitions&gt;
  
      &lt;StackPanel Width="300" Background="Red" HorizontalAlignment="Left"&gt;
          &lt;Button Background="Blue" HorizontalAlignment="Left" Width="100" Margin="0" Padding="0"&gt;
              &lt;TextBlock Text="Title" Width="Auto" HorizontalAlignment="Left" /&gt;
          &lt;/Button&gt;
      &lt;/StackPanel&gt;
  &lt;/Grid&gt;
  </code></pre>