使用 DataTemplate 在 ComboBox 中绑定图像答案

【问题标题】：Bind Images in ComboBox using DataTemplate使用 DataTemplate 在 ComboBox 中绑定图像
【发布时间】：2013-02-14 12:45:11
【问题描述】：

我正在处理现有代码。这个东西有一个带有几个 ComboBoxItems 的 ComboBox。每个项目都有一个 StackPanel，其中有一个 Image 控件和一个 TextBlock。

现在 Image 控件的 source 属性设置为存储在 XAML 文件中的不同矢量图像，而 TextBlock 的 Text 属性设置为本地化字符串。

我不想通过单独的 ComboBoxItems 而是通过使用 DataTemplate 来实现这一点。我可以为 TextBlock 创建一个字符串列表，但我无法弄清楚如何将图像绑定到相应的图像控件。

我愿意接受任何其他更好的解决方案。另外，如果您认为正确的方法是现有的方法，请告诉我。

这可能是一个重复的问题，但我找不到适合我的问题的问题。如果是这样，指向另一个问题的链接就足够了。

编辑：添加代码

<ComboBox x:Name="imageInfoLevelsComboBox" SelectedIndex="1" 
          Style="{DynamicResource ComboBoxToolBarStyle}" 
          Margin="6,6,6,0" Width="50" 
          ToolTip="{x:Static Viewing:ViewingTexts.ImageInformationLevels}" 
          SelectionChanged="OnImageInfoLevelsComboBoxSelectionChanged" >
    <ComboBoxItem x:Name="showAllComboBoxItem" 
                  Style="{DynamicResource ComboBoxItemToolBarStyle}">
        <StackPanel Orientation="Horizontal">
            <Image x:Name="ImageInfoAllImage" 
                   Source="{StaticResource ImageInfoFullIcon}" 
                   Margin="0,0,4,0" 
                   Width="24" Height="24"/>
            <TextBlock 
                Text="{x:Static Viewing:ViewingTexts.ImageInformationFull}"
                Margin="10,0,0,0" 
                VerticalAlignment="Center"/>
        </StackPanel>
    </ComboBoxItem>
    <ComboBoxItem x:Name="showImportantComboBoxItem" 
        Style="{DynamicResource ComboBoxItemToolBarStyle}">
        <StackPanel Orientation="Horizontal">
            <Image x:Name="ImageInfoImportantImage" 
                   Source="{StaticResource ImageInfoLimitedIcon}" 
                   Margin="0,0,4,0" 
                   Width="24" Height="24"/>
            <TextBlock 
                Text="{x:Static Viewing:ViewingTexts.ImageInformationIntermediate}"
                       Margin="10,0,0,0" 
                       VerticalAlignment="Center"/>
        </StackPanel>
    </ComboBoxItem>
    <ComboBoxItem x:Name="showNotificationsComboBoxItem" 
        Style="{DynamicResource ComboBoxItemToolBarStyle}">
        <StackPanel Orientation="Horizontal">
            <Image x:Name="ImageInfoNotificationsImage" 
                Source="{StaticResource ImageInfoNoneIcon}" 
                Margin="0,0,4,0" Width="24" Height="24"/>
            <TextBlock Text="{x:Static Viewing:ViewingTexts.ImageInformationNone}"
                       Margin="10,0,0,0" VerticalAlignment="Center"/>
        </StackPanel>
    </ComboBoxItem>
</ComboBox>

我想我能做的是创建一个包含 2 个对象的类，一个是字符串类型，另一个是 Image。然后创建一个列表并将其与组合框绑定，但问题是我不确定如何将矢量图像用作对象。

谢谢。

【问题讨论】：

请显示现有的 xaml
@mathieu - 发布代码供您参考。

标签： wpf xaml .net-4.0 combobox datatemplate

【解决方案1】：

我认为您需要绑定具有至少两个属性的对象列表，而不仅仅是字符串列表。一个属性将包含文本块的字符串，另一个属性将是图像的 urisource。

有关 urisource 定义的示例，请参阅此链接Wpf - relative image source path

【讨论】：

这听起来应该可以，但是如果您看到我发布的代码，则图像绑定到 StaticResource。这还能用吗？
我没有注意到你是如何定义你的静态资源的，但是如果它们在你的项目中，你可以看看这个链接看看如何从代码stackoverflow.com/questions/4524066/…设置urisource
好的，我刚刚看到您关于因子图像的评论。我认为您可以使用 find resource 从代码中访问静态资源，但我从未尝试过。如果有关于何时显示哪个图像的规则，您可以使用数据触发器来实现这一点。您可能在对象中有第三个属性，它确定要绑定的图像，并使用数据触发器来更改绑定。这是数据触发器stackoverflow.com/questions/1786477/… 的示例。请注意，在示例中，您会将值绑定到静态资源而不是 urisource

【解决方案2】：

将 ComboBox 的 ItemsSource 绑定到具有表示文本和图像的属性的对象集合。然后您需要创建一个 IValueConverter 并在您的图像绑定上指定它的一个实例，该实例可以将您对象上的属性值转换为图像源。

这是一个例子： http://www.codewrecks.com/blog/index.php/2010/07/23/bind-an-image-to-a-property-in-wpf/

【讨论】：