Friday, May 25, 2018

A ListView column with an image in its data template is not visible

Leave a Comment

I have the following three data templates:

<HierarchicalDataTemplate DataType="{x:Type models:DirOrFileItem}" ItemsSource="{Binding Children}">     <StackPanel Orientation="Horizontal">         <Image Source="../Images/Folder.png"  Stretch="Uniform" Height="20"></Image>         <TextBlock Text="{Binding Name}" ToolTip="{Binding RelativePath}"></TextBlock>     </StackPanel> </HierarchicalDataTemplate>  <DataTemplate x:Key="SelectColTemplate">     <CheckBox IsChecked="{Binding Path=IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListViewItem}}}" /> </DataTemplate> <DataTemplate x:Key="IconTemplate">     <Image Source="{Binding ImageData}" Stretch="Uniform" Height="20" /> </DataTemplate> 

I set the ImageData property on the row viewmodel as follows:

item.ImageData = ImageHelper.LoadImage(AppConstants.FileRsourcePath); 

where LoadImage is:

public static BitmapImage LoadImage(string filename) {     return new BitmapImage(new Uri("pack://application:,,,/" + filename)); } 

I know it loads the image correctly because when I examine the ImageData property after setting it, it has properties that are correct for the image that was loaded.

The HierarchicalDataTemplate is for a TreeView, and the image folder.png appears as and where expected. Then I have the following ListView columns:

<GridViewColumn CellTemplate="{StaticResource SelectColTemplate}" Width="30" /> <GridViewColumn CellTemplate="{StaticResource IconTemplate}" Width="30" /> <GridViewColumn DisplayMemberBinding="{Binding Name}" Header="Name" Width="360" /> 

I am displaying a list of files and folders, and would like an image to highlight which is which.

The CheckBox appears where it should, in the first column, and the third column in the markup appears as the second column on screen, as if the column with the image template, IconTemplate, does not exist.

Both images are where they should be, in the same Images folder, so why is my "image column" not appearing as the second column as I expect?

BONUS QUESTION: If, as @Clemens suggests below in his comment, I set the Build Action of the images to Resource and and load them by Resource File Pack URIs, how would I do so in XAML?

2 Answers

Answers 1

Just set Build Action in your image properties to Resource and set full path to your image. It will appear. http://prntscr.com/jjw4z3

Answers 2

As long you don't need to destroy it....you don't have to load the image, just give the URI in the binding ==> ImageData = new Uri("pack://application:,,,/" + filename)); and the Image control will load it

btw, your viewmodel must not have GUI related element like bitmap image bye.

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment