如何在Xaml中控制按钮布局

Question

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?

My code is as follows:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="80"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>

    <StackPanel Grid.Row="0"></StackPanel>

    <Pivot Grid.Row="1">
        <Pivot.Title>
            <StackPanel Orientation="Horizontal" Margin="-15,-3,0,0" Background="red" Width="480">
                <Button Background="Blue" x:Name="btnStudies" Click="btnMenuItem_Click" Width="20">
                    <TextBlock Text="Title" Foreground="White"></TextBlock>
                </Button>

                <Button Background="Green">
                    <TextBlock Text="Title" Foreground="White"></TextBlock>
                </Button>

                <Button Background="Blue" Click="btnMenuItem_Click">
                    <TextBlock Text="Title" Foreground="White"></TextBlock>
                </Button>

                <Button Background="Blue" Click="btnMenuItem_Click">
                    <TextBlock Text="Title" Foreground="White"></TextBlock>
                </Button>

                <Button Background="Blue" Click="btnMenuItem_Click">
                    <TextBlock Text="Title" Foreground="White"></TextBlock>
                </Button>
            </StackPanel>

        </Pivot.Title>
    </Pivot>
</Grid>

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.

*****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.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="400" />
    </Grid.ColumnDefinitions>

    <StackPanel Width="300" Background="Red" HorizontalAlignment="Left">
        <Button Background="Blue" HorizontalAlignment="Left" Width="100" Margin="0" Padding="0">
            <TextBlock Text="Title" Width="Auto" HorizontalAlignment="Left" />
        </Button>
    </StackPanel>
</Grid>

Answer 1

The type and size of the parent panel containing the control affects the size/layout of the child controls.

In your case, you have a Grid as your parent panel, and a Grid defaults to taking up all available space. In addition, children placed inside the grid default to taking up all available space as well unless you specify otherwise.

So your <Pivot> is being assigned a width equal to Grid.Width , and Pivot.Title sounds like it's being assigned a width equal to Pivot.Width , and StackPanel is being assigned a width equal to Pivot.Title.Width ... you get the picture.

To specify that a control should not take up all available space, specify a HorizontalAlignment or VerticalAlignment property to tell it what side of the parent panel to dock the item on.

For example

<Pivot Grid.Row="1" HorizontalAlignment="Left">

or

<StackPanel OWidth="480" HorizontalAlignment="Left" ...>

If you're new to WPF's layout system, I would recommend reading through the codeproject article WPF Layouts: A Quick Visual Start to quickly learn what the main layout panels are for WPF.