如何将按钮图标绑定到下拉列表的选定项？答案

【问题标题】：How to bind a button icon to the selected item of a drop-down list?如何将按钮图标绑定到下拉列表的选定项？
【发布时间】：2013-09-20 21:22:37
【问题描述】：

在 WPF 应用程序中并使用 Fluent Ribbon Control Suite，我有一个 DropDownButton，它打开一个画廊，让用户选择一种颜色。

这是创建按钮的 XAML：

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

图库的 SelectedItem 返回颜色的名称。我想让按钮的图标显示选择的实际颜色。这可以纯粹用 XAML 完成吗？我一直在尝试在网上找到的各种东西，但到目前为止，除了颜色名称之外，我无法让颜色名称出现在我想要颜色矩形所在的位置。寻找“这里发生了什么？”在上面的 XAML 中。

感谢任何有用的建议。感谢阅读！

更新：

我尝试了下面给出的答案，但它仍然不起作用。我一定有什么问题。这是此按钮的所有 XAML 代码的更新列表。查看 Gallery 本身的 XAML 和 SolidColorBrush 的绑定，如果您发现我做错了什么，请告诉我。

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

【问题讨论】：

标签： wpf xaml binding icons fluent-ribbon

【解决方案1】：

在演练的第 17 页上，您有一个示例说明您要实现的目标。

你可以在这里下载：http://fluent.codeplex.com/documentation

取自演练：

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

更新

我在您的代码中没有发现任何问题，我已将其粘贴并成功运行，这是从我的工作测试中再次粘贴的。

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

【讨论】：

谢谢。我试过了。如果我使用 ColorGallery，它可以工作，但我想使用我自己的显示所有 System.Windows.Media.Color 的画廊。这是我的画笔 XAML，但它不会更改按钮图标的颜色：。当我 MessageBox galCommentColor.SelectedValue.ToString 时，我得到颜色名称（例如 DeepPink）。
更新了我的答案，你的代码对我来说很好。不知道有什么建议，你有来自 Nuget 的最新 Fluent 包版本吗？
我使用的是预发布版本 2.1.0。我会尝试稳定版本，看看是否有所作为。感谢您帮助我保持理智 :) 我使用按钮的 DropDownClosed 事件并在代码中设置图标颜色使其工作......但如果可以的话，我想保留所有 XAML。再次感谢。标记为已接受的答案。
有一点需要注意。我创建了一个转换器并将转换器属性添加到 SolidColorBrush 元素：Converter={StaticResource ColorNameToSolidColorBrushConverter}。我将 Debug.WriteLine 添加到转换器代码中，当我选择颜色时，我没有看到任何写入 Debug 的内容。所以我什至不确定它是否会在选择更改时触发。
当然，除非您需要转换器，否则您应该只能使用 XAML。如果您愿意，请在某处上传一个（小）压缩项目，并将您的问题发布并发布链接，我会看看它。

【解决方案2】：

感谢 Aybe 确认不是我。通过在 DropDownButton 的 LargeIcon 属性上使用转换器，我确实得到了我想要的结果。

这是 XAML：

<Fluent:DropDownButton Name="btnCommentColor" Header="Comments" HasTriangle="False" LargeIcon="{Binding ElementName=galCommentColor, Path=SelectedValue, Converter={StaticResource ColorNameToBorderConverter_Key}}">
    <Fluent:Gallery x:Name="galCommentColor" ItemsSource="{Binding Source={StaticResource colorPropertiesOdp}}" SelectedValuePath="Name" MaxItemsInRow="12" SelectedIndex="51">
        <Fluent:Gallery.ItemTemplate>
            <DataTemplate>
                <Border ToolTip="{Binding Name}" BorderThickness="1" CornerRadius="2" BorderBrush="Black" Width="25" Height="25" VerticalAlignment="Stretch" Background="{Binding Name}" /> 
            </DataTemplate>
        </Fluent:Gallery.ItemTemplate>
    </Fluent:Gallery>
</Fluent:DropDownButton>

还有代码：

Public Class ColorNameToBorderConverter
    Implements IValueConverter

    Public Function Convert(value As Object, targetType As Type, parameter As Object, culture As Globalization.CultureInfo) As Object Implements IValueConverter.Convert
        If ApplicationIsInDesignMode Then value = "Black"

        If TypeOf value Is String Then
            Return New Border With {
                .Height = 32,
                .BorderThickness = New Thickness(1),
                .BorderBrush = New SolidColorBrush(System.Windows.Media.Colors.Black),
                .CornerRadius = New CornerRadius(2, 2, 2, 2),
                .VerticalAlignment = VerticalAlignment.Bottom,
                .Background = New SolidColorBrush(ColorConverter.ConvertFromString(value))
            }
        Else
            Throw New InvalidOperationException("Unsupported type [" & value.GetType.ToString & "]")
        End If
    End Function

    Public Function ConvertBack(value As Object, targetType As Type, parameter As Object, culture As Globalization.CultureInfo) As Object Implements IValueConverter.ConvertBack
        Throw New NotImplementedException
    End Function

    Private Shared ReadOnly Property ApplicationIsInDesignMode() As Boolean
        Get
            Return CBool(DesignerProperties.IsInDesignModeProperty.GetMetadata(GetType(DependencyObject)).DefaultValue)
        End Get
    End Property
End Class

【讨论】：