如何向combobox itemssource数组添加不同的图像

时间:2015-06-06 15:16:50

标签: wpf mvvm

我想在组合框项目源中的每个项目旁边添加不同的图像。这就是我现在所拥有的。

<ComboBox x:Name="cmb" HorizontalAlignment="Left" Width="135" Height="22"
          SelectedItem="{Binding myViewMode}" Margin="5,0,0,0">
          <ComboBox.ItemsSource>
               <x:Array Type="sys:String" xmlns:sys="clr-namespace:System;assembly=mscorlib">                                                                
                  <sys:String>Oranges</sys:String>
                  <sys:String>Mangoes</sys:String>
               </x:Array>
          </ComboBox.ItemsSource>                                                        
</ComboBox>

如何使用itemtemplate添加两个不同的图像。感谢

编辑一个

这是我尝试使用itemtemplate

    <ComboBox.ItemTemplate>
          <DataTemplate>
               <StackPanel Orientation="Horizontal">
                    <Image Source="{Binding OrangesImage}" Height="100"/> 
<Image Source="{Binding MangoesImage}" />
                        </StackPanel>
                    </DataTemplate>
        </ComboBox.ItemTemplate>

在这里我真的被卡住了。

2 个答案:

答案 0 :(得分:2)

目前,您的项目模板仅包含两个图片,因此您将显示两个图片,而且每个项目都没有文字!

我建议您将ItemsSource更改为后面的代码,以便您可以拥有文本和图像属性。

首先制作一个简单的Fruit类:

public class Fruit
{
    public string FruitName { get; set; }
    public string FruitImage { get; set; }
}

然后创建这些水果的列表,并将组合框的ItemsSource设置为此列表:

var fruits = new List<Fruit>();

fruits.Add(new Fruit() { FruitName = "Mangos", FruitImage = @"C:\mangoimage.jpg" });
fruits.Add(new Fruit() { FruitName = "Oranges", FruitImage = @"C:\mangoimage.jpg" });

cmb.ItemsSource = fruits;

然后简化你的XAML:

<ComboBox x:Name="cmb" HorizontalAlignment="Left" Width="135" Height="22" SelectedItem="{Binding myViewMode}" Margin="5,0,0,0">    
    <ComboBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding FruitName}"/>
                <Image Source="{Binding FruitImage}" Height="100"/>                        
            </StackPanel>
        </DataTemplate>
    </ComboBox.ItemTemplate>
</ComboBox>

答案 1 :(得分:1)

在你的ItemSource中你的图像应该是包含BitMapImage类的Uri路径,然后只在ComboBox的ItemTemplate中接受图像

Xaml Code

<ComboBox x:Name="cmb" HorizontalAlignment="Left" Width="135" Height="22"
      SelectedItem="{Binding myViewMode}" Margin="5,0,0,0">
   <ComboBox.ItemTemplate>
           <DataTemplate>
        <StackPanel Orientation="Horizontal">
            <Image Width="25" Height="25" Source="{Binding FruitName}"/>              
        </StackPanel>
    </DataTemplate>
   </ComboBox.ItemTemplate>
 </ComboBox>

您的模型类

public class Fruit
{
public string FruitName { get; set; }   
}

您的ItemSource应包含为:

fruitCollection.Add(new Fruit() {FruitName= new BitmapImage(new Uri("C:\mangoimage.jpg", UriKind.Relative))});