Essential WPF

You have created a view-model for your ToolBar control, and you have a collection of commands exposed by the view-model as a property (Commands). Now you want to bind your ToolBar.ItemsSource with that property, so you have something like this:

<ToolBar ItemsSource="{Binding Commands}" Height="64" />

Of course, you want to have each command as a button, so you’ve created a DataTemplate:

<DataTemplate DataType="{x:Type local:CommandModel}">
    <Button Command="{Binding Command}">
        <StackPanel>
            <Image Source="{Binding Icon}" Width="32" Height="32" />
            <TextBlock Text="{Binding Title}" VerticalAlignment="Center" />
        </StackPanel>
    </Button>
</DataTemplate>

Gluing all together you end up like this:

Now you’re asking yourself, why does the toolbar buttons looks totally different comparing to toolbar without binding?

The answer to this question, like other weirdo things in WPF, hidden inside the control’s code.

Looking with Reflector at ToolBar.PrepareContainerForItemOverride, you find this:

What happens here is that the toolbar picks a well known style-key based on the element type (the container) and not the item type (our CommandModel). For example, if the item added to the toolbar is of type Button, the toolbar picks the ButtonStyleKey, and set the button default-style-key with that key. This is how a button added directly to the toolbar gets a special style.

Using data binding, we are not adding Buttons… we are actually adding CommandModel instances, so the toolbar ignores it, ‘name’ stays null and nothings special is really happens, so our DataTemplate’s button stays with its normal style.

To overcome this issue, we simply set our button style explicitly with the ToolBar’s ready-made button style like this:

<DataTemplate DataType="{x:Type local:CommandModel}">
    <Button Command="{Binding Command}"
            Style="{DynamicResource ResourceKey={x:Static ToolBar.ButtonStyleKey}}">
        <StackPanel>
            <Image Source="{Binding Icon}" Width="32" Height="32" />
            <TextBlock Text="{Binding Title}" VerticalAlignment="Center" />
        </StackPanel>
    </Button>
</DataTemplate>

That's it, now our data-bound toolbar works as expected.

Download the code from here.