UserControl cropped when used in MainWindow - wpf

Question

Hello Stackoverflowers !
I'm creating a list with a searchbar in XAML, and when i tried to use my new UserControl in MainWindow.xaml, the Button in the UserControl is cropped in the designer instead of being resized to fit, why is that ?
Here is the MainWindow.xaml body :
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="8*" />
</Grid.ColumnDefinitions>
<controls:SearchBox Grid.Column="0"/>
</Grid>
And here is the body of the custom control :
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="8*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBox
Grid.Row="0"
VerticalAlignment="Center"
Text="Search"
TextBlock.FontStyle="Italic"
TextBlock.TextAlignment="Left"
/>
<!-- Content="{StaticResource FilterLogo}" -->
<Button
Grid.Column="1"
Content="Filter"
VerticalAlignment="Center"
HorizontalAlignment="Stretch">
</Button>
<ListBox
Grid.Row="1"
Grid.ColumnSpan="2"
ItemsSource="{Binding DataContext}"
SelectedItem="{Binding DataContext}"
ScrollViewer.VerticalScrollBarVisibility="Visible">
</ListBox>
I don't really know why my control is cropped to be honest. Any lead please ?

Answer 1

Short answer: it doesn't fit.
You have two columns in your main window. Since you have not specified which column to place the UserControl, it defaults to the first column. But your Width definitions force that column to be one fourth the size of the second column.
Your SearchBox simply doesn't fit in the space you have allotted to it.
If you remove the star (*) from this line:
<ColumnDefinition Width="8*" />
...it will fit without being cropped. (Alternatively, you could place the user control in the second column, or expand the main window, or shrink the width of your UserControl.)

Answer 2

When using stars in the column and row definitions, use them like percentages. Like this:
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".1*" /> <!-- 10% -->
<ColumnDefinition Width=".9*" /> <!-- 90% -->
</Grid.ColumnDefinitions>
This is what the XAML reader interpreted from your usage:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8*" /> <!-- 800% -->
<ColumnDefinition Width="*" /> <!-- 100% -->
</Grid.ColumnDefinitions>
This will have undesired results.