logo标签列表

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

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

Exibit 1

这是创建按钮的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代码的更新列表。查看选项卡库本身的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>
2个回答
3
在演示文稿的第17页中，有一个您正在尝试实现的示例。
您可以在此处下载它：http://fluent.codeplex.com/documentation 从演示文稿中获取： 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>

更新

我认为你的代码没有问题，我已经复制并成功运行了它，以下是我从我的测试中再次复制的代码。

<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>
我正在使用预发布版本2.1.0。我将尝试稳定版本，看看是否有所不同。感谢您帮助我保持理智 :) 我使用按钮的DropDownClosed事件并在代码中设置图标颜色使其正常工作...但如果可能的话，我想保持全部XAML。再次感谢。标记为已接受的答案。 - tolsen64
需要注意的一点是，我创建了一个转换器，并将转换器属性添加到SolidColorBrush元素中：Converter={StaticResource ColorNameToSolidColorBrushConverter}。我在转换器代码中添加了Debug.WriteLine，并且在选择颜色时没有看到任何写入Debug的内容。因此，我甚至不确定它是否在选择更改时触发。 - tolsen64
你肯定可以只使用XAML，除非你需要一个转换器。如果你想的话，上传一个（小）压缩项目到某个地方并发布链接，我会看一下它。 - aybe
我进行了另一个测试，发现LargeIcon似乎有问题，因为使用Icon时它可以正常工作。在你的代码中尝试将DropDownButton.LargeIcon替换为Icon，然后设置DropDownButton.SizeDefinition="Middle"，你会发现它可以正常工作（使用你发送的代码）。请在他们的网站上报告这个错误！ - aybe
让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/37969/discussion-between-tolsen64-and-aybe - tolsen64
显示剩余4条评论
0
感谢 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
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接