WPF BIND Dynamically Image by Bitmap Resources

Question

I want to bind an image from my Resources without using its path in my code... this line setGreen\Red work fine when I use

This full path

@"C:\Users\hed-b\source\repos\WpfApp4Test\WpfApp4Test\Resources\smile_green.png";

@"C:\Users\hed-b\source\repos\WpfApp4Test\WpfApp4Test\Resources\smile_red.png";

But its not work for using

"Resources/smile_green.png",   "Resources/smile_red.png"

or using Resources.smile_red, Resources.smile_green I have no idea what more I can do to make this happen...

My Pictures are sit in My Project Name/Resources/my Image

Thanks for help!

this is my ViewModel

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;
using WpfApp4Test.Properties;

namespace WpfApp4Test
{
    public class MainWindowVM : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public string DisplayedImagePath { get; set; }


        private ICommand _SetGreen;

        public ICommand StartGreen
        {
            get
            {
                if (_SetGreen == null)
                {
                    _SetGreen = new RelayCommand((param) => setGreen());
                }
                return _SetGreen;
            }
        }

        private ICommand _SetRed;

        public ICommand StartRed
        {
            get
            {
                 if (_SetRed == null)
                {
                    _SetRed = new RelayCommand((param) => setRed());
                }
                return _SetRed;
            }
        }


        private void setGreen() {
            //DisplayedImagePath= @"C:\Users\hed-b\source\repos\WpfApp4Test\WpfApp4Test\Resources\smile_green.png";
            DisplayedImagePath = "Resources/smile_green.png";

        }
        private void setRed()
        {
            //DisplayedImagePath = @"C:\Users\hed-b\source\repos\WpfApp4Test\WpfApp4Test\Resources\smile_red.png";
            DisplayedImagePath = "Resources/smile_red.png";


        }
    }
}

this is my View

<Window x:Class="WpfApp4Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp4Test"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <UniformGrid Rows="1" Columns="3">

            <Image Source="{Binding DisplayedImagePath ,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" />

            <Button Content="Start Green" Command="{Binding StartGreen}"/>

            <Button Content="Start Red" Command="{Binding StartRed}" />


        </UniformGrid>

    </Grid>
</Window>

or search up on how to get the path of the executing assembly and use that as your base path — jazb, Dec 11 '18 at 07:02
@JohnB If I am going to use this program as an installer? how can I use a local path for every pc? — , Dec 11 '18 at 07:04
you said `use this program as an installer` - so you are writing an installer now? — jazb, Dec 11 '18 at 07:06
@JohnB I mean that I want to put this software on client pc with clickone install.. — , Dec 11 '18 at 07:09
you said `how can I use a local path for every pc?` but where did I say to use a hard coded local path in my comments? — jazb, Dec 11 '18 at 07:10
As a note, setting `Mode=TwoWay` and `UpdateSourceTrigger=PropertyChanged` on the Image Source Binding is pointless. It has no effect. Besides that, your `DisplayedImagePath` property should fire the PropertyChanged event. Implementing INotifyPropertyChanged without actually firing the event is also pointless. — Clemens, Dec 11 '18 at 09:06

score -1 · Accepted Answer · edited Dec 11 '18 at 09:15

Set your images as Resource i.e. Set your Image Properties => Build Action = Resource and Copy to output directory = No
Set Image Binding resource path as Resource File Pack URI, i.e. pack://application:,,,/AssemblyName;component/Resources/smile_green.png, where the /AssemblyName;component is only required if image resources are loaded from a different, referenced assembly.
You may use a Binding Converter, which converts your string to ImageSource i.e. try following code

    public sealed class ImageConverter : IValueConverter
    {
        public object Convert(object value, Type targetType,
                              object parameter, CultureInfo culture)
        {
            try
            {
                return new BitmapImage(new Uri((string)value));
            }
            catch
            {
                return new BitmapImage();
            }
        }

        public object ConvertBack(object value, Type targetType,
                                  object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

Add convert to as resource to your userControl and consume it https://social.msdn.microsoft.com/Forums/en-US/f94cc770-8d86-4a9f-a5f9-2ee2ea146c1a/image-source-binding-with-a-relative-path?forum=wpf

A Binding Converter is not strictly needed. WPF has built-in automatic type conversion from `string`, `Uri` and `byte[]` to `ImageSource`. — Clemens, Dec 11 '18 at 09:01

WPF BIND Dynamically Image by Bitmap Resources

1 Answers1