Wpf: How to bind an image?

Question

I want to simply scroll images that taken from a collection. I have this code:

public class RadioStation
{
    private int id;
    public BitmapImage bitmap;
    private Uri link;


    public RadioStation(int id, BitmapImage bitmap, Uri link)
    {
        this.id = id;
        this.bitmap = bitmap;
        this.link = link;
    }

    public int getId()
    {
        return this.id;
    }

    public Uri getLink()
    {
        return this.link;
    }


    public BitmapImage getBitmap()
    {
        return this.bitmap;
    }

}

public class RadioStations : ObservableCollection<RadioStation>
{
    public RadioStations() : base()
    {
        for (int i = 1; i <= 5; i++)
        {
            BitmapImage bitmap = new BitmapImage();
            bitmap.BeginInit();
            bitmap.UriSource = new Uri(@"Resources\RadioStations\Images\" + i + ".jpg", UriKind.Relative);
            bitmap.EndInit();
            Add(new RadioStation(i, bitmap, null));
        }
    }
}

and

<Window x:Class="DataTemplatingSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="clr-namespace:DataTemplatingSample"
      SizeToContent="WidthAndHeight" 
      Title="Introduction to Data Templating Sample">

<Window.Resources>
<local:RadioStations x:Key="radioStationsList"/>

<ObjectDataProvider ObjectType="{x:Type local:RadioStation}" x:Key="MyClass" />
<ObjectDataProvider ObjectInstance="{StaticResource MyClass}" MethodName="getBitmap" x:Key="MyImage" />

<DataTemplate x:Key="radioStationTemplate">
    <Border Name="border" BorderBrush="Aqua" BorderThickness="1" Padding="5" Margin="5">
        <Image Source="{Binding Source={StaticResource MyImage}}" Width="60" Height="60" VerticalAlignment="Center" HorizontalAlignment="Center"/>
    </Border>

</DataTemplate>

</Window.Resources>


<StackPanel Orientation="Horizontal" CanHorizontallyScroll="True" ScrollViewer.VerticalScrollBarVisibility="Disabled" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.CanContentScroll="True">
<ListBox x:Name="list" Width="400" Margin="10"
         ItemsSource="{StaticResource radioStationsList}"
         ItemTemplate="{StaticResource radioStationTemplate}">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel IsItemsHost="True" Orientation="Horizontal" ScrollViewer.CanContentScroll="True"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

  </StackPanel>
</Window>

From some reason the images won't appear, only the borders. What am I doing wrong? (A simple Image control works with the bitmap)

Thanks!!

Answer 1

Maket BitmapImage as property

public BitmapImage Image
{
    get 
    {
        return this.bitmap;
    }
}

And change Binding to

<Image Source="{Binding Image}" .../>

Answer 2

try this

RaisePropertyChanged When u Update the Image so UI get Notified , So UI understands the change

Change this to public BitmapImage bitmap

like this private BitmapImage _bitmap; public BitmapImage Bitmap { get { return _bitmap; } set { _bitmap= value; RaisePropertyChanged("Bitmap");} }

Brief Example of Image Bindiing

XAML

<Grid>
<Image Stretch="UniformToFill" Source="{Binding Photo}" Margin="0,0,10,10" />
</Grid>

ViewModel

 private Uri _photo;
    public Uri Photo
    {
        get { return _photo; }
        set
        {
            _photo = value;
            RaisePropertyChanged("Photo");
        }
    }