How do I bind an Image Source?

Question

Here is what I have so far:

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

<Button Content"Text" ImageSource="path/image.png" />

I know something isn't right here. I guess I can't see where ImageSource is defined.

I have several of these buttons and just want to have a unique image for each one. I have a button template that I am using and it works great for the text.

<Label Content="TemplateBinding Content" />

Thanks for all your help!

Answer 1

In your case, it can be very easy!

Add the images as resources to your project, then in XAML use something like the following:

<Button HorizontalAlignment="Left" Margin="20,0,0,20" VerticalAlignment="Bottom" Width="50" Height="25">
    <Image Source="image.png" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0">
    </Image>
</Button>

Or, the more complicated way:

If you use the MVVM Pattern, you can do the following

In your XAML:

<Button Focusable="False" Command="{Binding CmdClick}" Margin="0">
    <Image Source="{Binding ButtonImage}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0">
    </Image>
</Button>

In your ViewModel:

private Image buttonImage;

public Image ButtonImage 
{
    get
    {
       return buttonImage;
    }
}

And somewhere in the constructor of your ViewModel or the initialisation of it:

BitmapImage src = new BitmapImage();
src.BeginInit();
src.UriSource = new Uri("image.png", UriKind.Relative);
src.CacheOption = BitmapCacheOption.OnLoad;
src.EndInit();

buttonImage = new Image();
buttonImage.Source = src;

Answer 2

In your XAML:

 <Button Focusable="False" Command="{Binding CmdClick}" Margin="0">
     <Image Source="{Binding ImageSource,UpdateSourceTrigger=PropertyChanged} HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0">
     </Image>
 </Button>

In your ViewModel:

 private BitmapImage _ImageSource;
 public BitmapImage ImageSource
 {
     get { return this._ImageSource; }
     set { this._ImageSource = value; this.OnPropertyChanged("ImageSource"); }
 }

 private void OnPropertyChanged(string v)
 {
     // throw new NotImplementedException();
     if (PropertyChanged != null)
         PropertyChanged(this, new PropertyChangedEventArgs(v));
 }
 public event PropertyChangedEventHandler PropertyChanged;

And somewhere in the constructor of your ViewModel or the initialisation of it:

 string str = System.Environment.CurrentDirectory;
 string imagePath = str + "\\Images\\something.png";
 this.ImageSource = new BitmapImage(new Uri(imagePath, UriKind.Absolute));

OR：

 string imagePath = "\\Images\\something.png";
 this.ImageSource = new BitmapImage(new Uri(imagePath, UriKind.Relative));