Search code examples
c#wpfxamllistviewdata-binding

Can't display picture in listview


I have problems displaying a picture in listview. I have an array of url's from which i have to download pictures but for the testing purposes I try to populate each row with the same picture from my local hard drive. I can bind the data but so far the only thing I could print to the picture column was the name of the object but not the picture itself (DisplayData.Image).

Here is my XAML and C# code:

XAML

   <Window x:Class="TestIT.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:TestIT"
    Title="MainWindow" Height="510.9" Width="723">
<Window.Resources>
    <local:InterfaceBinding x:Key="adjust" />
</Window.Resources>
<Grid>
    <Grid HorizontalAlignment="Stretch" Height="100" VerticalAlignment="Stretch" Width="517" Margin="98,10,100,370" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>


        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="100" />
        </Grid.RowDefinitions>

        <Label x:Name="labelNewsTop" Content="Top News" Grid.Row="0" HorizontalAlignment="Center" Margin="0,0,0,0" VerticalAlignment="Center" Grid.Column="0" MouseLeftButtonUp="labelNewsTop_MouseLeftButtonUp" />
        <Label x:Name="labelNewsBusiness" Content="Business" Grid.Row="0" HorizontalAlignment="Center" Margin="0,0,0,0" VerticalAlignment="Center" Grid.Column="1" />
        <Label x:Name="labelNewsTechnology" Content="Technology" Grid.Row="0" HorizontalAlignment="Center" Margin="0,0,0,0" VerticalAlignment="Center" Grid.Column="2" />
        <Label x:Name="labelNewsEntertainment" Content="Entertainment" Grid.Row="0" HorizontalAlignment="Center" Margin="0,0,0,0" VerticalAlignment="Center" Grid.Column="3" />
        <Label x:Name="labelNewsScience" Content="Sport" Grid.Row="0" HorizontalAlignment="Center" Margin="0,0,0,0" VerticalAlignment="Center" Grid.Column="4" />
        <Label x:Name="labelNewsHealth" Content="Health" Grid.Row="0" HorizontalAlignment="Center" Margin="0,0,0,0" VerticalAlignment="Center" Grid.Column="5" />
        <Image x:Name="iamgetest" Grid.ColumnSpan="2" HorizontalAlignment="Left" Height="100" Margin="24,68,0,-68" VerticalAlignment="Top" Width="100" Grid.Column="4"/>

    </Grid>
    <ListView x:Name="testView" HorizontalAlignment="Left" Height="304" Margin="0,105,0,0" VerticalAlignment="Top" Width="715">
        <ListView.View>
            <GridView>
                <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Path=Name}"/>
                <GridViewColumn Header="Value" DisplayMemberBinding="{Binding Path=Value}"/>
                <GridViewColumn Header="Lele" >
                    <GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <Image  Height="50" Width="50" Stretch="Fill" Source="{Binding Path=Image}"></Image>

                        </DataTemplate>
                    </GridViewColumn.CellTemplate>
                </GridViewColumn>
            </GridView>
        </ListView.View>
    </ListView>

</Grid>
</Window>

C#

        GNews gnews = new GNews();
        List<NewsModel> bla = gnews.getTopNews();
      

        for (int i = 0; i < bla.Count - 1; i++)
        {
         

            DisplayData data = new DisplayData();
            data.Name = bla[i].title;
            data.Value = bla[i].url;
            ImageSource mySource = new BitmapImage(new Uri("D:\\New folder\\New folder\\other\\Wall\\010.jpg"));
            data.Image = new Image();
            data.Image.Source = mySource;
           
            this.testView.Items.Add(data);
           
        }
    }
}

public class DisplayData
{
    public string Name { get; set; }
    public string Value { get; set; }

    public Image Image { get; set; }

}


Solution

  • You should be binding the Uri not an Image.

    public class DisplayData
    {
       public string Name { get; set; }
       public string Value { get; set; }
    
       public Uri Image { get; set; }
    }
    

    Your loop would then look like

    for (int i = 0; i < bla.Count - 1; i++)
        {
    
    
            DisplayData data = new DisplayData();
            data.Name = bla[i].title;
            data.Value = bla[i].url;
    
            data.Image = new Uri("D:\\New folder\\New folder\\other\\Wall\\010.jpg");
    
    
            this.testView.Items.Add(data);
    
        }