Question

The application ia a messenger in which I am using microsoft lync client for this purpose. In one of the context I am getting the contacts (which is an object of LyncClient having properties like name, image , Availability, etc) in a listview and loading them in a data template which is defined as follow:

<DataTemplate x:Key="ContactsTemplate">
        <Grid HorizontalAlignment="Left" Width="150" Height="150" Margin="10">
            <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}">
                <Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
            </Border>
            <StackPanel VerticalAlignment="Bottom" Background="{Binding Availability, Converter={StaticResource AvailabilityToPresenceColor}}" Opacity="0.75">
                <TextBlock Text="{Binding Name}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="20" Margin="15,0,15,15"/>
            </StackPanel>
        </Grid>
    </DataTemplate>

It has Grid container in which we have an image and textblock controls which show the image and name of the contact and as its shown below the background of stackpanel is binded to Availability property of lync Contact object with a converter which map the availibility status to a color so that for example the background of stackpanel will turn red when the contact availibility is busy.

I want to have similar effect for the image control as well.

I am new to binding so totaly lost in this bindig concept.

My idea was: there is a effect evend handler for image so i thought of using that for this purpose and use

and inside the converter under some condition I want to use some code in which i need to get the image source, but as we are getting the image source through binding

please suggest me your ideas.

---

Well as u can see in the code
<Image Source="{Binding Image}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title} effect="{Binding Availability, Converter={StaticResource AvailabilityToPresenceColor}}"/>
I am just binding source of image control with a property of Contact object. I want to send the Availability properties of a Contact object to Convert method of IValueConverter or I want to bind the image with the whole Contact Object if it is possible…or if some other way please let me know.

#####################comment attachment

var bitmap = new BitmapImage();
    bitmap.BeginInit();
    MemoreyStream ms=new MemoryStream(_image);
    bitmap.StreamSource = stream;
    bitmap.CacheOption = BitmapCacheOption.OnLoad;
    bitmap.EndInit();
 var grayBitmapSource = new FormatConvertedBitmap();
    grayBitmapSource.BeginInit();
    grayBitmapSource.Source = ms;
    grayBitmapSource.DestinationFormat = PixelFormats.Gray32Float;
    grayBitmapSource.EndInit();
.....

now the thing is i have grayBitmapSource which is of type FormatConvertedBitmap and i dont know how to convert it to Stream again.

Answer 1

I would suggest looking at this article about image processing in WPF: http://www.codeproject.com/Articles/237226/Image-Processing-is-done-using-WPF

Using the image processing logic, you create the different pictures for each availability status. You could use an IValueConverter, but that means you have to reprocess the image each time the availability status changes. Instead, you can simply change your Contact class so that when you change the Availability property, it automatically signals WPF to get the picture referenced by the Image property:

public class Contact : INotifyPropertyChanged
{
    // EDIT: INotifyPropertyChanged implementation.
    public event PropertyChangedEventHandler PropertyChanged;

    public void NotifyPropertyChanged(String propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
    // EDIT: INotifyPropertyChanged implementation.

    private ContactAvailability _Availability;

    public ContactAvailability Availability
    {
        get { return _Availability; }
        set
        {
            _Availability = value;
            NotifyPropertyChanged("Availability");
            NotifyPropertyChanged("Image");
        }
    }

    public BitmapImage _AvailablePicture;
    public BitmapImage _BusyPicture;

    public BitmapImage Image
    {
        get
        {
            switch (this.Availability)
            {
                case ContactAvailability.Available:
                    return this._AvailablePicture;
                case ContactAvailability.Busy:
                    return this._BusyPicture;
                default:
                    throw new NotImplementedException();
            }
        }
    }
}

EDIT (too long for comment):

I added the code to implement the INotifyPropertyChanged interface. This is very common in WPF so I thought you were familiar with this approach already.

In your example, Image.Source is a DepencyProperty. When a class implements INotifyPropertyChanged, you can tell WPF that one of its properties has changed. You simply raise the NotifyPropertyChanged event with the name of the property that changed. This signals WPF to update all DepencyPropertys that bind to the given property.

how is this different with binding in term of image processing. I mean every time the availibility changes then in this way also the image processing code should be execute as well. am I right or not @bouvierr?

No. In this case, we would only execute the image processing a fixed number of times to create the picture for each availability status (2 times for each contact in my example). For example, we could create all pictures during application startup (3 contact x 2 status = 6 pictures) and store them in each contact’s _AvailablePicture and _BusyPicture fields.

Here is the IMPORTANT part: when we SET the Availability property, we also call NotifyPropertyChanged("Image"). This will force WPF to update the Image.Source DepencyProperty because it binds to Contact.Image. This will return a different picture, because the Availability has changed.

In my example, I decided to store the pictures. This might not be the best solution for you. It consumes more memory, but saves processing time. If you prefer to re-process images each time the Availability status changes, you should change the Contact.Image property to something like:

    public BitmapImage Image
    {
        get
        {
            switch (this.Availability)
            {
                case ContactAvailability.Available:
                    return this._AvailablePicture;
                case ContactAvailability.Busy:
                    return GetImageWithColorFilter(this._AvailablePicture, Colors.Red);
                default:
                    throw new NotImplementedException();
            }
        }
    }