Bind Images in ComboBox using DataTemplate

Question

I am working on an existing code. This thing has got a ComboBox with a few ComboBoxItems. Each items has got a StackPanel withing which there is an Image control and a TextBlock.

Now the source property of the Image control is set to different vector images stored in XAML files whereas the Text property of the TextBlock is set to a localized string.

I want to implement this not by having separate ComboBoxItems but by using DataTemplate. I can create a List of the strings for the TextBlock but I am not able to figure out as to how can I bind the images to the respective Image Controls.

I am open to any other better possible solution. Also, if you think that the right way to do it is the existing one, please let me know.

This might be a duplicate question but I couldn't find one that caters to my issue. If it is, a link to the other question would suffice.

EDIT: Code Added

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

What I think I can do is create a class with 2 objects, one of type string and the other as Image. And then create a list and bind it with the combobox, but the issue is that I am nto sure how to use the vector image as an object.

Thanks.

@mathieu - Posted the code for your reference. – Shakti Prakash Singh Feb 28 '13 at 11:48 — Shakti Prakash Singh, Feb 28 '13 at 11:48

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

I think you need to bind a list of objects with at least two properties instead of just a list of strings. One property would contain the string for the text block, the other property would be a urisource for the image.

Refer to this link for examples of urisource definitions Wpf - relative image source path

edited May 23 '17 at 11:57

Community

1
1

answered Feb 28 '13 at 11:22

failedprogramming

2,532
18
21

This sounds like it should work, but if you see the code that I posted, the images are binding to StaticResource. Would this still work? – Shakti Prakash Singh Feb 28 '13 at 11:36
I didn't notice how you define your static resource, but if they are in your project, you can look at this link to see how to set urisource from code http://stackoverflow.com/questions/4524066/absolute-urisource-of-a-resource-image – failedprogramming Feb 28 '13 at 11:43
OK I just saw your comment about factor image. I think you can access static resources from code using find resource but I've never tried. If there are rules for when to show which image, you can achieve this using data triggers. You could possibly have a third property in your object which determines which image to bind, and use a data trigger to change the binding. Here's an example on data trigger http://stackoverflow.com/questions/1786477/change-image-using-trigger-wpf-mvvm. Point to note, you would bind the value to your static resource instead of urisource in the example – failedprogramming Feb 28 '13 at 11:58

score 1 · Answer 2 · answered Feb 28 '13 at 12:03

Bind the ItemsSource of your ComboBox to a collection of objects that has properties representing the text and the image. Then you need to create a IValueConverter and specify an instance of it on the binding of your image that can convert the value of the property on your object to a image source.

Here is one example: http://www.codewrecks.com/blog/index.php/2010/07/23/bind-an-image-to-a-property-in-wpf/

Bind Images in ComboBox using DataTemplate

2 Answers2