Toolbar isn't showing overflow when hosted in UserControl

Question

Hosted in a Window, I have a main UserControl composed of other UserControls.

One of these contains a ToolBar with a few Buttons on it. I place this at the top of my main UserControl by setting it's Grid.Row property to 0. However, when making the Window smaller, the Buttons just disappear and no overflow is shown. I've messed with the overflow properties a bit but no luck.

Here's the UserControl containing the ToolBar.

<UserControl x:Class="TestProj.Views.ToolBarView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         mc:Ignorable="d" 
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="706"/>
            <ColumnDefinition Width="319"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition Height="30"/>
        </Grid.RowDefinitions>
        <ToolBar Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
            <Button Content="Button1" />
            <Button Content="Button2" />
            <Button Content="Button3" />
            <Button Content="Button4" />
            <Button Content="Button5" />
            <Button Content="Button6" />
        </ToolBar>
    </Grid>
</UserControl>

Here's my main UserControl which is hosted inside of a Window, and hosts the ToolBar UserControl:

<UserControl x:Class="TestProj.MainControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:views="clr-TestProj.Views"
             mc:Ignorable="d" d:DesignHeight="737.239" d:DesignWidth="1026"
             VerticalAlignment="Stretch"
             HorizontalAlignment="Stretch">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="256*"/>
            <ColumnDefinition Width="256*"/>
            <ColumnDefinition Width="256*"/>
            <ColumnDefinition Width="430*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto">
            </RowDefinition>
            <RowDefinition Height="608*"/>
            <RowDefinition Height="Auto">
            </RowDefinition>
        </Grid.RowDefinitions>
        <views:ToolBarView HorizontalAlignment="Left" x:Name="OnyxToolBar" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" />
    </Grid>
</UserControl>

And here's an example .gif of me resizing the Window, just the top where the UserControl containing the ToolBar is:

Answer 1

The problem is your fixed sized columns in your UserControl aka ToolBarView

you can not give to some control (does not matter if it is a ToolBar or not) a fixed size value and expect to have "dynamic size"

in your situation you could do something like this

change this

<Grid.ColumnDefinitions>
     <ColumnDefinition Width="706"/>
     <ColumnDefinition Width="319"/>
</Grid.ColumnDefinitions>

to this (for example)

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