Placing WPF toolkit Color Picker inside toolbar

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.

XAML:

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