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