WPF带有图像的ComboBox

Question

WPF带有图像的ComboBox

10

我想用图片填充下拉框（Combo）。它的定义如下：

<ComboBox SelectedItem="{Binding SelectedLangComboItem}"
          ItemsSource="{Binding Languages}">
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Image Source="{Binding Image}" />
                <TextBlock Text="{Binding Label}" />
            </StackPanel>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

其中项是LanguageItem类：

public class LanguageItem
{
  public System.Drawing.Bitmap Image { get; set; }
  public string Label { get; set; }
  public string Culture { get; set; }

  public LanguageItem(System.Drawing.Bitmap image, string label, string culture)
  {
    Image = image;
    Label = label;
    Culture = culture;
  }
}

现在，在我的ViewModel构造函数中，我这样做：

  _Languages = new ObservableCollection<LanguageItem>();

  System.Reflection.Assembly app = System.Reflection.Assembly.GetExecutingAssembly();
  System.IO.Stream file;
  file = app.GetManifestResourceStream("MyNamespace.Images.FLAG1.gif");
  _Languages.Add(new LanguageItem(new Bitmap(file), "ITALIAN", "it-IT"));
  file = app.GetManifestResourceStream("MyNamespace.Images.FLAG2.gif");
  _Languages.Add(new LanguageItem(new Bitmap(file), "ENGLISH", "en-EN"));

  this.SelectedLangItem = _Languages[0];

这些图片是嵌入式资源。我有两个问题：

图片没有显示出来；
项目未被选择，SelectedLangItem为：

public LanguageItem SelectedLangItem { get { return _SelectedLangItem; } set { if (_SelectedLangItem == value) return;
```
    _SelectedLangItem = value;
    this.RaisePropertyChanged("SelectedLangItem");
  }
}
```

- Barzo

3个回答

5

使用

new BitmapImage(new Uri("MyNamespace.Images.FLAG1.gif", UriKind.Relative));

需要实现ImageSource接口。

至于未选择的问题：属性名称为"SelectedLangItem"，而在xaml中应该是SelectedLangComboItem，如果没有打错的话。

代码：

this.RaisePropertyChanged("SelectedLangItem");

XAML：

<ComboBox SelectedItem="{Binding SelectedLangComboItem}"

- vitaliy zadorozhnyy

感谢@vitaliy-zadorozhnyy，关于属性绑定的建议，你是对的！这只是一个复制粘贴错误！ - Barzo

使用以下路径："/MyNamespace;component/Images/FLAG1.gif" - Barzo

2

尝试以下XAML代码，将图像列表绑定到ComboBox中...

<Window.Resources>
        <DataTemplate x:Key="cmbTemplate">
            <WrapPanel Margin="0 5 0 5" Height="80">
                <Image Width="65" Height="65" Stretch="Fill" Source="{Binding Photo}" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,0,15,0"/>
                <Label Content="{Binding Name}" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="20"/>
            </WrapPanel>
        </DataTemplate>
    </Window.Resources>

    <StackPanel HorizontalAlignment="Center">
        <Label Content="Dropdown list with Image" HorizontalAlignment="Center" FontSize="30" Margin="20"/>
        <ComboBox x:Name="lstwithimg" HorizontalAlignment="Center" VerticalAlignment="Top" ItemTemplate="{StaticResource cmbTemplate}" Height="80" Width="400"/>
    </StackPanel>

请查看下面的内容，以更好地理解实时示例：

http://www.codescratcher.com/wpf/wpf-combobox-with-image/

- Code Scratcher

1

那其实是最好的答案。可惜它没有解释，并且包含了太多的无用信息。 - marsh-wiggle

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sheridan · Accepted Answer

你的问题在于试图将一个Image绑定到Image.Source属性，该属性的类型为ImageSource。

最简单的解决方案是将实际的图像文件添加到文件夹中，并将类中的Image属性更改为一个字符串，该字符串保存了该格式中图像的文件路径：

/ApplicationName;component/ImageFolderName/ImageName.png

然后，您可以正确绑定此字符串（框架将其转换为“ ImageSource”对象）到您的“ DataTemplate”中的“ Image.Source”属性。