WPF Discussion Boards

Re: Wpf System.Windows.Media.ImageSourcesConverter cannot be applied

6hrs 57mins ago

The error message refers to the System.Windows.Media.ImageSourcesConverter class. Even if your custom ImageSourceConverter was in that namespace, the name doesn't match - ImageSources is not the same as ImageSource (without the "s").

Unless that's a typo in your question, then either the error message is referring to something other than the code you've posted, or the code you've posted is not the code that's running.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

StealthRT2hrs 7mins ago

StealthRT

2hrs 7mins ago

Problem being is that

Copy Code

ImageSourcesConverter.cs

does not exists. I only have:

https://i.stack.imgur.com/bP0Vo.png[^]

Re: Wpf System.Windows.Media.ImageSourcesConverter cannot be applied

Richard Deeming2hrs 2mins ago

(beginner) There must be a better way (TextBlock properties)

2hrs 2mins ago

So as I said, either there's a typo in your question, or the code you've shown isn't the code that's generating that error.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Maximilien26-Jan-22 6:08

Maximilien

26-Jan-22 6:08

I have a TextBlock in a WPF page that will be displayed after an action, it can be a "green" message or a "red" message if an action is successful or not.

Currently, I have binding for the color (I also have a property for the text content and the visibility). : (simplified)

Copy Code

public string MessageColor
  {
      get
      {
          if ( someBooleanValue )
              return "green";
          else
              return "red";
      }
  }

public string Message
  {
      get
      {
          if ( someBooleanValue )
              return "Success Message";
          else
              return "Failure Message";
      }
  }

This seems awkward or clumsy.

Would it be better to have 2 TextBlock in the XAML with their specific styles and toggle the visibility ?

CI/CD = Continuous Impediment/Continuous Despair

Re: (beginner) There must be a better way (TextBlock properties)

Richard Deeming26-Jan-22 6:33

Trigger, DataTrigger & EventTrigger - The complete WPF tutorial[^]

26-Jan-22 6:33

You could use a style with triggers to change the TextBlock properties when the view-model property changes:

Copy Code

// Make sure you raise the "PropertyChanged" event when the value changes:
public bool SomeBooleanValue
{
    get { return _someBooleanValue; }
    private set { SetProperty(ref _someBooleanValue, value); }
}

XAML

Copy Code

<TextBlock>
    <TextBlock.Style>
        <Style TargetType="TextBlock">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Path=SomeBooleanValue}" Value="True">
                    <Setter Property="Foreground" Value="Green" />
                    <Setter Property="Text" Value="Success Message" />
                </DataTrigger>
                <DataTrigger Binding="{Binding Path=SomeBooleanValue}" Value="False">
                    <Setter Property="Foreground" Value="Red" />
                    <Setter Property="Text" Value="Failure Message" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </TextBlock.Style>
</TextBlock>

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: (beginner) There must be a better way (TextBlock properties)

Maximilien26-Jan-22 10:10

Maximilien

26-Jan-22 10:10

Thanks, looking at it.

~~What is the "SetProperty" ? is this something I have to implement ?~~

Scratch that, it's working.

Thanks. Rose | [Rose]

CI/CD = Continuous Impediment/Continuous Despair

modified 26-Jan-22 15:39pm.

Converting a byte[] to a ImageSource means huge memory leak

Starwer24-Jan-22 12:42

Re: Converting a byte[] to a ImageSource means huge memory leak

24-Jan-22 12:42

Hi Geeks !

I bang my head on what looked to be a ridiculously trivial problem...

In a sentence: I need to display a image which is in a form of byte[] (array of byte) in a WPF ItemsControl.

'Sounds simple enough right ? I could find tens of solutions on the web, all similarly making use of a

Copy Code

MemoryStream

assigned to an BitmapImage. See snippet bellow in C# 10:

Copy Code

public static ImageSource? BitmapFromRaw(byte[]? imageData)
{
    if (imageData == null) return null;
    var image = new BitmapImage();
    var mem = new MemoryStream(imageData);
    //mem.Position = 0;
    image.BeginInit();
    //image.CreateOptions = BitmapCreateOptions.PreservePixelFormat;
    //image.CacheOption = BitmapCacheOption.None;
    //image.UriSource = null;
    image.StreamSource = mem;
    image.EndInit();
    //mem.Close();
    //mem.Dispose();
    image.Freeze();

    return image;
}

At first it looks like it works fine. The images converted this way could be displayed in an Image WPF control. BUT: this leads to a big memory leak. Looking at the memory usage in Visual Studio it shows that neither the BitmapImage nor the MemoryStream get freed from memory. From the lines commented out, you could see I've already tried to tweak this with different options... no success.

Here is the smallest code I could make to reproduce the problem:

MainWindow.xaml

Copy Code

<Window x:Class="Toy.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:Toy"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <StackPanel>
            <Button Content="Collect Garbage" Click="gcButton_Click"/>
            <Button x:Name="wxButton" Click="wxButton_Click"/>
            <ItemsControl x:Name="wxToy" ItemsSource="{Binding}" HorizontalAlignment="Center">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <WrapPanel/>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Border BorderBrush="Bisque" Width="100" Height="100" BorderThickness="2">
                            <Image Source="{Binding Data}"/>
                        </Border>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>
    </Grid>
</Window>

MainWindow.xaml.cs

Copy Code

using System;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.IO;
using System.Runtime.CompilerServices;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Imaging;

namespace Toy
{


	internal class ToyItem : INotifyPropertyChanged
    {
        #region Boilerplate INotifyPropertyChanged

        protected void OnPropertyChanged(PropertyChangedEventArgs e)
        {
            PropertyChanged?.Invoke(this, e);
        }

        public void OnPropertyChanged([CallerMemberName] string propertyName = "")
        {
            OnPropertyChanged(new PropertyChangedEventArgs(propertyName));
        }
        public event PropertyChangedEventHandler? PropertyChanged;

		#endregion

        /// <summary>
		/// Build an image from Picture bytes
		/// </summary>
		/// <param name="imageData">Picture as array of bytes</param>
		/// <returns>Pictures as BitmapImage</returns>
		public static ImageSource? BitmapFromRaw(byte[]? imageData)
		{
			if (imageData == null) return null;
			var image = new BitmapImage();
            var mem = new MemoryStream(imageData);
			//mem.Position = 0;
			image.BeginInit();
			//image.CreateOptions = BitmapCreateOptions.PreservePixelFormat;
			//image.CacheOption = BitmapCacheOption.None;
			//image.UriSource = null;
			image.StreamSource = mem;
			image.EndInit();
            //mem.Close();
            //mem.Dispose();
            image.Freeze();
 
            return image;
		}

		public ImageSource? Data
        {
            get { return _Data; }
            set
            {
                if (value != _Data)
                {
                    _Data = value;
                    OnPropertyChanged();
                }
            }
        }
        private ImageSource? _Data;
        
        public ToyItem ()
        {
            Data = BitmapFromRaw(Properties.Resources.pexels_jonathan_faria_8581946);
        }

        ~ToyItem()
        {
            //if (Data == null) return;
            //var image = (BitmapImage)Data;
            //image.StreamSource.Close();
            //image.StreamSource.Dispose();
        }

    }

    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {

        ObservableCollection<ToyItem> ToyList = new ObservableCollection<ToyItem>();

        int Counter = 0;

        public MainWindow()
        {
            InitializeComponent();

            wxToy.DataContext = ToyList;
            wxButton.Content = Counter;
        }

        private void gcButton_Click(object sender, RoutedEventArgs e)
        {
            GC.Collect();
        }

        private void wxButton_Click(object sender, RoutedEventArgs e)
        {
            wxButton.Content = ++Counter;

            ToyList.Clear();

            for (int i = 0; i < 5; i++)
            {
                ToyList.Add(new ToyItem());
            }
        }
    }

}

You can download a ready-to-use solution of this here

This example uses a resource (Properties.Resources.pexels_jonathan_faria_8581946) to get an image in byte[]. This is only for simplifying the example, don't bother to explain how I could workaround the problem by using a jpg image and URI instead. In the real application, I have no choice but getting the images from byte[] arrays...

If you run this code, you could hit a button to generate and show 5 images at a time in a MVVM scheme in an ItemsControl, just the way we are suppose to do it in WPF/C# I guess... Clicking the button several times will bring this deadly simple code to progressively eat Gigabytes of memory.

Please help me ! What am I doing wrong ?! D'Oh! | :doh:

Gerry Schmitz24-Jan-22 17:15

Re: Converting a byte[] to a ImageSource means huge memory leak

24-Jan-22 17:15

You're not doing any "disposing"; that's why you have a memory leak.

You need to keep a reference to the memory stream you create, then in the next go around, you check if that reference is not null; if it isn't, you dispose it before creating another stream and running with that.

Your other dispose attempts were (probably) premature.

"Before entering on an understanding, I have meditated for a long time, and have foreseen what might happen. It is not genius which reveals to me suddenly, secretly, what I have to say or to do in a circumstance unexpected by other people; it is reflection, it is meditation." - Napoleon I

Starwer24-Jan-22 20:58

Re: Converting a byte[] to a ImageSource means huge memory leak

24-Jan-22 20:58

Thanks for your reply Gerry!

In view of your suggestion, I've added the following lines just before the ToyList.Clear() call:

Copy Code

foreach (var item in ToyList)
 {
    if (item.Data is BitmapImage img)
    {
        img.StreamSource.Dispose();
    }
}

Unfortunatly, the problem remains: there is no freeing up of those MemoryStream...

Gerry Schmitz24-Jan-22 22:26

Re: Converting a byte[] to a ImageSource means huge memory leak

24-Jan-22 22:26

Well, your byte[] is a managed resource; so you might try .Dispose( true ); otherwise, I would use the debugger to follow the stream after the Dispose.

Copy Code

// Summary:
//     Releases the unmanaged resources used by the System.IO.MemoryStream class and
//     optionally releases the managed resources.
//
// Parameters:
//   disposing:
//     true to release both managed and unmanaged resources; false to release only unmanaged
//     resources.
protected override void Dispose( bool disposing );

Starwer25-Jan-22 8:56

Re: Converting a byte[] to a ImageSource means huge memory leak

25-Jan-22 8:56

As the Dispose(bool) is a protected method, I couldn't use it directly in this context. Moreover, the MemoryStream documentation indicates that calling Dispose() doesn't do anything and is not necessary...
Looks like it's going the wrong way...

Another test I did is using the Image without ItemsCollection, directly:

Copy Code

<Image Source="{Binding [0].Data}" Width="100" Height="100"/>

This show some errors on the output console, but the Image gets display and surprisingly the BitmapImage and MemoryStream objects get freed/disposed properly. So it really looks like the problem is dependent to the use of ItemsCollection...

Richard Deeming25-Jan-22 22:51

Re: Converting a byte[] to a ImageSource means huge memory leak

25-Jan-22 22:51

Remove the finalizer from the ToyItem class. That class doesn't hold any unmanaged resources, so the only effect of adding a finalizer is to prolong the lifetime of the instance until the GC's finalizer thread runs.

If you want to have the stream disposed of when the item is removed, have ToyItem implement IDisposable:

Copy Code

internal sealed class ToyItem : INotifyPropertyChanged, IDisposable
{
    ...
    
    public void Dispose()
    {
        if (Data is BitmapImage image)
        {
            image.StreamSource.Dispose();
        }
        
        Data = null;
    }
}

Unfortunately, the ObservableCollection<T> class doesn't dispose of items when they are removed. You can create a custom collection class to do that:

Copy Code

public class DisposableObservableCollection<T> 
    : ObservableCollection<T>, IDisposable 
    where T : IDisposable
{
    public DisposableObservableCollection(List<T> list) : base(list)
    {
    }
    
    public DisposableObservableCollection(IEnumerable<T> collection) : base(collection)
    {
    }
    
    public DisposableObservableCollection()
    {
    }
    
    protected override void SetItem(int index, T item)
    {
        T oldItem = this[index];
        base.SetItem(index, item);
        oldItem?.Dispose();
    }
    
    protected override void RemoveItem(int index)
    {
        T item = this[index];
        base.RemoveItem(index);
        item?.Dispose();
    }
    
    protected override void ClearItems()
    {
        List<T> itemsToDispose = Items.Where(i => i != null).ToList();
        base.ClearItems();
        foreach (T item in itemsToDispose)
        {
            item.Dispose();
        }
    }
}

Then you can use that collection in your viewmodel:

Copy Code

ObservableCollection<ToyItem> ToyList = new DisposableObservableCollection<ToyItem>();

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Starwer26-Jan-22 10:10

Re: Converting a byte[] to a ImageSource means huge memory leak

26-Jan-22 10:10

Hi Richard,

Thanks a lot for this very complete answer.

I've removed the finalizer and implemented the IDisposable as you suggested. I like the DisposableObservableCollection proposal. It looks very neat this way.

Unfortunatly this doesn't solve the problem. The leak is just as bad as before, with Image/BitmapImage and MemoryStream never being freed. It has probabably something to do with the fact that the MemoryStream.Dispose() doesn't do anything like explain on this page.

In the end the code looked like this:

Copy Code

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.IO;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Imaging;

namespace Toy
{


	internal class ToyItem : INotifyPropertyChanged, IDisposable
    {
        #region Boilerplate INotifyPropertyChanged

        protected void OnPropertyChanged(PropertyChangedEventArgs e)
        {
            PropertyChanged?.Invoke(this, e);
        }

        public void OnPropertyChanged([CallerMemberName] string propertyName = "")
        {
            OnPropertyChanged(new PropertyChangedEventArgs(propertyName));
        }
        public event PropertyChangedEventHandler? PropertyChanged;

        #endregion

        public void Dispose()
        {
            if (Data is BitmapImage image)
            {
                image.StreamSource.Dispose();
            }

            Data = null;
        }

        /// <summary>
		/// Build an image from Picture bytes
		/// </summary>
		/// <param name="imageData">Picture as array of bytes</param>
		/// <returns>Pictures as BitmapImage</returns>
		public static ImageSource? BitmapFromRaw(byte[]? imageData)
		{
			if (imageData == null) return null;
			var image = new BitmapImage();
            var mem = new MemoryStream(imageData, false);
			//mem.Position = 0;
			image.BeginInit();
			//image.CreateOptions = BitmapCreateOptions.PreservePixelFormat;
			//image.CacheOption = BitmapCacheOption.None;
			//image.UriSource = null;
			image.StreamSource = mem;
			image.EndInit();
            //mem.Close();
            //mem.Dispose();
            image.Freeze();
 
            return image;
		}

		public ImageSource? Data
        {
            get { return _Data; }
            set
            {
                if (value != _Data)
                {
                    _Data = value;
                    OnPropertyChanged();
                }
            }
        }
        private ImageSource? _Data;
        
        public ToyItem ()
        {
            Data = BitmapFromRaw(Properties.Resources.pexels_jonathan_faria_8581946);
            //Data = new BitmapImage(new Uri(@"E:\Downloads\pexels-jonathan-faria-8581946.jpg"));
        }

    }


    public class DisposableObservableCollection<T> : ObservableCollection<T>, IDisposable
    where T : IDisposable
    {
        public DisposableObservableCollection(List<T> list) : base(list)
        {
        }

        public DisposableObservableCollection(IEnumerable<T> collection) : base(collection)
        {
        }

        public DisposableObservableCollection() : base ()
        {
        }

        protected override void SetItem(int index, T item)
        {
            T oldItem = this[index];
            base.SetItem(index, item);
            oldItem?.Dispose();
        }

        protected override void RemoveItem(int index)
        {
            T item = this[index];
            base.RemoveItem(index);
            item?.Dispose();
        }

        protected override void ClearItems()
        {
            List<T> itemsToDispose = Items.Where(i => i != null).ToList();
            base.ClearItems();
            foreach (T item in itemsToDispose)
            {
                item.Dispose();
            }
        }


        public void Dispose()
        {
            ClearItems();
        }

    }

    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {

        DisposableObservableCollection<ToyItem> ToyList = new DisposableObservableCollection<ToyItem>();

        int Counter = 0;

        public MainWindow()
        {
            InitializeComponent();

            wxToy.DataContext = ToyList;
            wxButton.Content = Counter;
        }

        private void gcButton_Click(object sender, RoutedEventArgs e)
        {
            GC.Collect();
        }

        private void wxButton_Click(object sender, RoutedEventArgs e)
        {
            wxButton.Content = ++Counter;

            //foreach (var item in ToyList)
            //{
            //    item.Data = null;
            //}

            ToyList.Clear();

            for (int i = 0; i < 5; i++)
            {
                ToyList.Add(new ToyItem());
            }
        }
    }

}

Gerry Schmitz27-Jan-22 7:33

Re: Converting a byte[] to a ImageSource means huge memory leak

27-Jan-22 7:33

I do a lot of image manipulation in UWP; but create an image from my "pixel buffer" instead of holding unto streams when I display it. I think you said you didn't want to use an image / jpg.

Starwer27-Jan-22 21:29

Re: Converting a byte[] to a ImageSource means huge memory leak

27-Jan-22 21:29

Indeed, my application is a desktop application and a pixel buffer is not really what fits in here... I do get images from TagLib# or ZeroFormatter as a byte[] (or any other chunk of raw data type you may convert it to).

Starwer30-Jan-22 6:04

Re: Converting a byte[] to a ImageSource means huge memory leak

30-Jan-22 6:04

I have eventually found a "solution" to this problem.
Be prepared: that empirical solution makes no real sense, but this works... OMG | :OMG:

Solution was to go through the following convertions:
- byte[] to Bitmap using GetConverter;
- Bitmap redrawn to a new Bitmap using GDI+ Graphics
- Bitmap to byte[] again using ImageConverter
- byte[] to ImageSource using the previously mentioned BitmapFromRaw Method.

Any attempt to simplify this code lead to the memory leak to come back.
No clue how this could be the way to get the GC do its job. Like in relativity, the shortest path is not always the straight one...

Here is the the extra code that works for me. It makes my eyes bleed and I'm not proud of it. So again, if anyone could get something cleaner working, please propose.

Copy Code

public static ImageSource? BitmapFromRawNoLeak(byte[]? imageData)
{
    if (imageData == null) return null;
    ImageSource? image = null;

    // byte[] to Bitmap
    TypeConverter tc = TypeDescriptor.GetConverter(typeof(Bitmap));
    using (Bitmap? bmp = (Bitmap?)tc.ConvertFrom(imageData))
    {
        if (bmp == null) return null;

        // Force DPI to normal (96 DPI = no rescale) to avoid ugly rescaling in WPF when image comes from format with DPI
        bmp.SetResolution(96, 96);

        using (Bitmap source = new Bitmap(bmp.Width, bmp.Height))
        {
            if (source == null) return null;
            using (Graphics g = Graphics.FromImage(source))
            {
                g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
                g.DrawImage(bmp, 0, 0, bmp.Width, bmp.Height);

            }

            ImageConverter converter = new ImageConverter();
            var vect = (byte[])converter.ConvertTo(source, typeof(byte[]));
            image = BitmapFromRaw(vect);
            image?.Freeze();
        }
    }

    return image;
}

Gerry Schmitz30-Jan-22 6:23

Re: Converting a byte[] to a ImageSource means huge memory leak

30-Jan-22 6:23

I use WriteableBitmap (the UWP version) without any issues.

Maybe it can help you (the other version).

WriteableBitmap Class (System.Windows.Media.Imaging) | Microsoft Docs

Starwer30-Jan-22 8:45

Re: Converting a byte[] to a ImageSource means huge memory leak

30-Jan-22 8:45

Thanks Gerry.

I've tried to apply your tip, but to be honest, I couldn't find the way to make this WriteableImage from a byte[] array. This byte[] doesn't contain raster bitmap, but a jpeg-formatted data.

Richard Deeming30-Jan-22 22:52