Adding an Image to ListView in WPF like this ...?

Question

I'm gonna create a ListView in WPF like the below image


_{(source: picfront.org)}

http://www.picfront.org/d/7xuv

I mean I wanna add an image beside of Gravatar label within Name column.
Would it be OK if you guided me ?

Edit: The image is output of a method. The method makes the image from a base-64 string.

Solution

As long as you're already familiar with how to data bind a ListView then it's pretty simple really. In your cell template you would just need a StackPanel with an Image and a TextBlock side by side.

<ListView>
  <ListView.View>
    <GridView>
      <GridViewColumn>
        <GridViewColumn.CellTemplate>
          <DataTemplate>
            <StackPanel Orientation="Horizontal">
              <Image Width="16" Height="16" Source="{Binding IconUri}"/>
              <TextBlock Text="{Binding Name}"/>
            </StackPanel>
          </DataTemplate>
        </GridViewColumn.CellTemplate>
      </GridViewColumn>
      <GridViewColumn ... />
      <GridViewColumn ... />
    </GridView>
  </ListView.View>
</ListView>

Comments

[Ricardo Sampaio]

@Josh: Thanks Josh. But as I said I don't have the Source of the image and the image is output of a method.

[Josh]

Well you still need to bind the source to the image. You can wrap up the logic for obtaining the image into a value converter (a class that implements IValueConverter) and specify that on the Binding.Converter