ComboBox: a Foreground issue

Yesterday, while I was updating my apps, I realized that the Foreground property was behaving rather strangely on the ComboBox.

The SelectedItem no longer had the Foreground applied when the comboBox had more than six entries!

Here 's my code:

  <StackPanel Background="Pink"
                Orientation="Vertical">

        <ComboBox x:Name="cb"
                  Margin="4"
                  SelectedIndex="0"
                  Foreground="Blue">
            <ComboBoxItem>aa</ComboBoxItem>
            <ComboBoxItem>bb</ComboBoxItem>
            <ComboBoxItem>cc</ComboBoxItem>
            <ComboBoxItem>dd</ComboBoxItem>
            <ComboBoxItem>ee</ComboBoxItem>
        </ComboBox>


        <ComboBox x:Name="cb1"
                  Margin="4"
                  SelectedIndex="0"
                  Foreground="Blue">
            <ComboBoxItem>aa</ComboBoxItem>
            <ComboBoxItem>bb</ComboBoxItem>
            <ComboBoxItem>cc</ComboBoxItem>
            <ComboBoxItem>dd</ComboBoxItem>
            <ComboBoxItem>ee</ComboBoxItem>
            <ComboBoxItem>ff</ComboBoxItem>
        </ComboBox>
    </StackPanel>

And the result:

Original illustration unavailable: Combo

Why is the rendering different from 6 items?

It happens that when you have few items, when you open the combo, it's not in full screen.

Original illustration unavailable: ComboFirstRendered

However, from 6, the combo goes full screen and therefore uses another template to display its selected Item.

Original illustration unavailable: ComboSecondRendered

What is the solution?

Just change the ComboBox style to apply the Foreground to the FlyoutButton.

<Button x:Name="FlyoutButton"       
        Foreground="{TemplateBinding Foreground}"
        Padding="6.5,0,0,0" Grid.Row="1">

You can download the demo project with the bug and how to fix it here.