Display issue with WPF toolkit Color Picker inside

Question

Following XAML in WPF is displaying the dropdown button of the WPF Toolkit's Color Picker outside the toolbar as shown in the screenshot below.

Question: How can I make the dropdown button display inside the toolbar (something similar to what we have in MS WORD toolbar's color picker)? Obviously, I'm missing something in the XAML below.

Screenshot of the Toolbar with Color Picker:

<DockPanel Margin="0,0,660,0">
<ToolBarTray>
    <ToolBar>
        <Button Command="New" Content="New" />
        <Button Command="Open" Content="Open" />
        <ToggleButton x:Name="tb" Content="Color" />
        <Popup IsOpen="{Binding IsChecked, ElementName=tb}"
                       PlacementTarget="{Binding ElementName=tb}"
                       Placement="Bottom"
                       StaysOpen="False">
            <xctk:ColorPicker Name="ColorPicker1" 
                              AdvancedButtonHeader="Advanced"
                              DisplayColorAndName="True" />
        </Popup>
    </ToolBar>
</ToolBarTray>
</DockPanel>

EDIT: Added DockPanel tag in the XAML - in case that is making any difference