How to bind a button icon to the selected item of a drop-down list?

Question

In a WPF application and using the Fluent Ribbon Control Suite, I have a DropDownButton that opens up a Gallery that lets the user select a color.

Here is the XAML that creates the button:

<Fluent:DropDownButton x:Name="btnCommentColor" Header="Comments">
<Fluent:DropDownButton.Icon>
    <!-- What goes here? -->
</Fluent:DropDownButton.Icon>
<Fluent:Gallery x:Name="galCommentColor" ItemsSource="{Binding Source={StaticResource colorPropertiesOdp}}" SelectedValuePath="Name" MaxItemsInRow="12">
    <Fluent:Gallery.ItemTemplate>
        <DataTemplate>
            <Border BorderThickness="1" CornerRadius="2" BorderBrush="Black" Width="25" Height="25" VerticalAlignment="Stretch" Background="{Binding Name}" /> 
        </DataTemplate>
    </Fluent:Gallery.ItemTemplate>
</Fluent:Gallery>
</Fluent:DropDownButton>

The SelectedItem of the Gallery returns the Name of the color. I want to make the Icon of the button display the actual color that was selected. Can this be done purely with XAML? I have been trying various things found online but so far have been unable to get anything other than the color name to appear where I want the color rectangle to go. Look for the "What Goes Here?" in the XAML above.

I appreciate any helpful suggestions. Thanks for reading!

UPDATE:

I tried the answer given below and it still doesn't work. I must have something wrong. Here's an updated listing of all the XAML code for this button. Take a look at the XAML for the Gallery itself and the binding for the SolidColorBrush and tell me if you see what i've done wrong.

<Window.Resources>
    <ObjectDataProvider MethodName="GetType" 
     ObjectType="{x:Type sys:Type}" x:Key="colorsTypeOdp">
        <ObjectDataProvider.MethodParameters>
            <sys:String>System.Windows.Media.Colors, PresentationCore,  
             Version=3.0.0.0, Culture=neutral,  
             PublicKeyToken=31bf3856ad364e35</sys:String>
        </ObjectDataProvider.MethodParameters>
    </ObjectDataProvider>

    <ObjectDataProvider ObjectInstance="{StaticResource colorsTypeOdp}" 
     MethodName="GetProperties" x:Key="colorPropertiesOdp">
    </ObjectDataProvider>
</Window.Resources>

<Fluent:DropDownButton Name="btnCommentColor" Header="Comments">
    <Fluent:DropDownButton.LargeIcon>
        <Grid Width="32" Height="32">
            <Image Source="Icons\BlueLarge.png" />
            <Border Height="32" VerticalAlignment="Bottom" BorderThickness="0" CornerRadius="2">
                <Border.Background>
                    <SolidColorBrush Color="{Binding ElementName=galCommentColor, Path=SelectedValue, FallbackValue=Green}" />
                </Border.Background> 
            </Border>
        </Grid>
    </Fluent:DropDownButton.LargeIcon>
    <Fluent:Gallery Name="galCommentColor" ItemsSource="{Binding Source={StaticResource colorPropertiesOdp}}" SelectedValuePath="Name" MaxItemsInRow="12">
        <Fluent:Gallery.ItemTemplate>
            <DataTemplate>
                <Border ToolTip="{Binding Path=Name}" BorderThickness="1" CornerRadius="2" BorderBrush="Black" Width="25" Height="25" VerticalAlignment="Stretch" Background="{Binding Name}" /> 
            </DataTemplate>
        </Fluent:Gallery.ItemTemplate>
    </Fluent:Gallery>
</Fluent:DropDownButton>

Answer 1

On the page 17 of the walkthrough you have an example of what you are trying to achieve.

You can download it here : http://fluent.codeplex.com/documentation

Taken from the walkthrough :

<fluent1:Ribbon>
    <fluent1:Ribbon.Menu>
        <fluent1:Backstage />
    </fluent1:Ribbon.Menu>
    <fluent1:RibbonTabItem Header="Home">
        <fluent1:RibbonGroupBox Header="Clipboard">
            <!--  The following code shows standard mode for color gallery  -->
            <fluent1:DropDownButton Header="Standard">
                <!--  It's possible to create custom icon to present selected color  -->
                <fluent1:DropDownButton.Icon>
                    <Grid Width="16" Height="16">
                        <Image Source="Images\FontColor.png" />
                        <Border Height="4"
                                VerticalAlignment="Bottom"
                                BorderThickness="0">
                            <Border.Background>
                                <SolidColorBrush
                                    Color="{Binding ElementName=ColorGalleryStandard, Path=SelectedColor, FallbackValue=Black}" />
                            </Border.Background>
                        </Border>
                    </Grid>
                </fluent1:DropDownButton.Icon>
                <fluent1:ColorGallery x:Name="ColorGalleryStandard"
                                        IsNoColorButtonVisible="False"
                                        SelectedColor="Red" />
                <fluent1:MenuItem Header="A Menu Item" Icon="Images\Pink.png" />
            </fluent1:DropDownButton>
        </fluent1:RibbonGroupBox>
    </fluent1:RibbonTabItem>
</fluent1:Ribbon>

UPDATE

I see nothing wrong in your code, I've pasted it and it ran successfully, here is it again pasted from my working test.

<Window x:Class="WpfApplication8.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:fluent1="clr-namespace:Fluent;assembly=Fluent"
        xmlns:system="clr-namespace:System;assembly=mscorlib"
        Title="MainWindow"
        Width="525"
        Height="350">
    <Window.Resources>
        <ObjectDataProvider x:Key="colorsTypeOdp"
                            MethodName="GetType"
                            ObjectType="{x:Type system:Type}">
            <ObjectDataProvider.MethodParameters>
                <system:String>
                    System.Windows.Media.Colors, PresentationCore,
                    Version=3.0.0.0, Culture=neutral,
                    PublicKeyToken=31bf3856ad364e35
                </system:String>
            </ObjectDataProvider.MethodParameters>
        </ObjectDataProvider>

        <ObjectDataProvider x:Key="colorPropertiesOdp"
                            MethodName="GetProperties"
                            ObjectInstance="{StaticResource colorsTypeOdp}" />
    </Window.Resources>
    <fluent1:DropDownButton Name="btnCommentColor" Header="Comments">
        <fluent1:DropDownButton.LargeIcon>
            <Grid Width="32" Height="32">
                <Image Source="Icons\BlueLarge.png" />
                <Border Height="32"
                        VerticalAlignment="Bottom"
                        BorderThickness="0"
                        CornerRadius="2">
                    <Border.Background>
                        <SolidColorBrush
                            Color="{Binding ElementName=galCommentColor, Path=SelectedValue, FallbackValue=Green}" />
                    </Border.Background>
                </Border>
            </Grid>
        </fluent1:DropDownButton.LargeIcon>
        <fluent1:Gallery Name="galCommentColor"
                         ItemsSource="{Binding Source={StaticResource colorPropertiesOdp}}"
                         MaxItemsInRow="12"
                         SelectedValuePath="Name">
            <fluent1:Gallery.ItemTemplate>
                <DataTemplate>
                    <Border Width="25"
                            Height="25"
                            VerticalAlignment="Stretch"
                            Background="{Binding Name}"
                            BorderBrush="Black"
                            BorderThickness="1"
                            CornerRadius="2"
                            ToolTip="{Binding Path=Name}" />
                </DataTemplate>
            </fluent1:Gallery.ItemTemplate>
        </fluent1:Gallery>
    </fluent1:DropDownButton>

</Window>