wpfxamlbindingiconsfluent-ribbon

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


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.

Exibit 1

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>

Solution

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

    enter image description here

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