Question

I have the following xaml:

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

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" Grid.Column="1">
        <TextBox Width="120" Text="Search" Margin="10"/>
        <Button>Search</Button>
    </StackPanel>
</Grid>

In both the designer and the running application the right edge of the button is cut off, but only if the textbox has a margin on the right side. How do I create separation between the two without cutting off the buttton. Is this a bug?

Edit:
The StackPanel is in Column 1 not Column 0. Additionally, the button border reappears after the button has been clicked. Window size is 525 and the grid is the only thing in it.

Answer 1

Set your first ColumnDefintion’s Width to Auto

I’m guessing that since the width is not defined, it’s making them both *, which means they’ll be of an equal width. By setting the 1st to Auto you’re telling it to take up however much space it needs, then letting the 2nd column fill the remaining space.