|
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 MemoryStream assigned to an BitmapImage. See snippet bellow in C# 10:
public static ImageSource? BitmapFromRaw(byte[]? imageData)
{
if (imageData == null) return null;
var image = new BitmapImage();
var mem = new MemoryStream(imageData);
image.BeginInit();
image.StreamSource = mem;
image.EndInit();
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
<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
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
public static ImageSource? BitmapFromRaw(byte[]? imageData)
{
if (imageData == null) return null;
var image = new BitmapImage();
var mem = new MemoryStream(imageData);
image.BeginInit();
image.StreamSource = mem;
image.EndInit();
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()
{
}
}
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 ?!
EDIT: Problem has been solved
I eventually posted a bug report to the WPF GitHub: Displaying an Image from a byte[] in an ItemControl leads to huge memory leak.
They kindly indicated that this was a known problem referenced in Known issus: WPF Image memory leak when remove image from visual tree.
There is actually a workaround to that problem, but nothing you could do yet to solve this in a proper MVVM scheme.
In a few words, changing the code of wxButton_Click as below will fix the memory leak:
private void wxButton_Click(object sender, RoutedEventArgs e)
{
for (int i = 0; i < wxToy.Items.Count; i++)
{
var uiElement = (FrameworkElement)wxToy.ItemContainerGenerator.ContainerFromIndex(i);
uiElement.DataContext = null;
uiElement.UpdateLayout();
}
wxButton.Content = ++Counter;
ToyList.Clear();
for (int i = 0; i < 5; i++)
{
ToyList.Add(new ToyItem());
}
}
Full story is there: Displaying an Image from a byte[] in an ItemControl leads to huge memory leak.
Thanks to all the coders who replied to this post !
modified 10-Feb-22 1:42am.
|
|
|
|
|
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
|
|
|
|
|
Thanks for your reply Gerry!
In view of your suggestion, I've added the following lines just before the ToyList.Clear() call:
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...
|
|
|
|
|
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.
protected override void Dispose( bool disposing );
"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
|
|
|
|
|
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:
<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...
|
|
|
|
|
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 :
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:
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:
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
|
|
|
|
|
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:
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;
}
public static ImageSource? BitmapFromRaw(byte[]? imageData)
{
if (imageData == null) return null;
var image = new BitmapImage();
var mem = new MemoryStream(imageData, false);
image.BeginInit();
image.StreamSource = mem;
image.EndInit();
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);
}
}
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();
}
}
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;
ToyList.Clear();
for (int i = 0; i < 5; i++)
{
ToyList.Add(new ToyItem());
}
}
}
}
|
|
|
|
|
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.
"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
|
|
|
|
|
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).
|
|
|
|
|
While Dispose doesn't release the buffer of the MemoryStream, it is possible to do so as long as it is not closed - and you created it so it is expandable (even though you want to do the opposite).
stream.Length = 0;
stream.Capacity = 0;
This will clear the internal buffer and allow it to be garbage collected.
You can of course also make your own Stream implementation that wraps a MemoryStream - then you can clear the reference to the MemoryStream on dispose. A bit tedious with the many methods in a stream, but not exactly difficult.
|
|
|
|
|
Thanks for your answer.
I've tried the fllowing:
stream.Length = 0;
stream.Capacity = 0;
But I coudn't access those properties from a MemoryStream.
So I've actually followed your advice and developped my own Stream implementation. This allowed to track what was called at least. This unfortunately didn't solve the problem. I could only see that the Close() function was called, that I could clear the Buffer that was stored there. However the finalized never gets called, giving a hint that the parent ImageSource or Image never get freed either.
Moreover, using my own Stream prevents me from freezing the ImageSource (I don't know why).
Here follows the implementation of the Stream I used:
public class ManagedMemoryStream : Stream
{
private int Id;
private static int Index = 0;
private static int Counter = 0;
private byte[]? Buffer;
public override bool CanRead => true;
public override bool CanSeek => false;
public override bool CanWrite => false;
public override long Length => _Length;
private long _Length;
public override long Position { get; set; }
public override void Close()
{
System.Diagnostics.Debug.WriteLine($"ManagedMemoryStream: Close {Id} / {Counter}");
base.Close();
Dispose(true);
Buffer = null;
}
public ManagedMemoryStream(byte[] buffer)
{
Id = Index++;
System.Diagnostics.Debug.WriteLine($"ManagedMemoryStream: Construct {Id} / {++Counter}");
Buffer = buffer;
_Length = Buffer.Length;
}
~ManagedMemoryStream()
{
System.Diagnostics.Debug.WriteLine($"ManagedMemoryStream: Finalize {Id} / {--Counter}");
Dispose(false);
}
public override void Flush()
{
System.Diagnostics.Debug.WriteLine($"ManagedMemoryStream: Flush {Id} / {Counter}");
}
public override int Read(byte[] buffer, int offset, int count)
{
if (count == 0 || Buffer is null) return 0;
int remaining = (int)(Buffer.Length - Position);
if (count > remaining) count = remaining;
Array.Copy(Buffer, Position, buffer, offset, count);
Position += count;
_Length -= count;
return count;
}
public override long Seek(long offset, SeekOrigin origin)
{
throw new NotImplementedException();
}
public override void SetLength(long value)
{
throw new InvalidOperationException();
}
public override void Write(byte[] buffer, int offset, int count)
{
throw new InvalidOperationException();
}
}
|
|
|
|
|
Strange, I see Length and Capacity exposed here:
Reference Source[^]
and they are on the interface, so short of throwing NotSupportedException or similar they should not be able to stop you.
The finalizer not being called is expected - not as in "it should not be called", but as in "if it had been called the original code you had would not leak"
I have no idea why your stream stops the image freezing. There might have some "magic" detecting if it is an instance of MemoryStream - for example kicking it into synchronous initialization, but that is not something I have looked into for many years.
|
|
|
|
|
I have eventually found a "solution" to this problem.
Be prepared: that empirical solution makes no real sense, but this works...
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.
public static ImageSource? BitmapFromRawNoLeak(byte[]? imageData)
{
if (imageData == null) return null;
ImageSource? image = null;
TypeConverter tc = TypeDescriptor.GetConverter(typeof(Bitmap));
using (Bitmap? bmp = (Bitmap?)tc.ConvertFrom(imageData))
{
if (bmp == null) return null;
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;
}
|
|
|
|
|
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
"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
|
|
|
|
|
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.
|
|
|
|
|
Starwer wrote:
using (Bitmap source = new Bitmap(bmp.Width, bmp.Height))
{
if (source == null) return null; The result of new Bitmap(...) can never be null . If the constructor fails for some reason, you will get an exception, not a null object.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
HI yall,
I am using MahApp library for nice Office like top level windows.
For that one has to add MahApp resource dictionary in the App.xaml dictionary.
Also, to be fair, in a bout of excessibve enthusiasm I started reference MahApp brushed and color in a some of my control as well.
Now, I dont really like MahApp style on some control I havent used so far, like GroupBox and, yuk, TabControl.
Is there an easy way I can restore the original TabControl style, while also keeping the MapApp resource dictionaries in my App.xaml merge ditionaries?
|
|
|
|
|
|
I got a custom image loading markup extension, which I use like so:
<Image Source="{gxv:ImageResource Resources/Images/expand.svg}" Height="16" Width="16" />
And this works fine.
However, when viewing or editing the Xaml in Visual Studio I got designer warnings, like so:
Error XDG0062 Cannot locate resource 'resources/images/expand.svg'. D:\MyGIT\brpworld\RPGStoryboards.Extensions\Map\ImagePicker.xaml 105
How could I get rid of those warnings?
Or, even better, could I load those picture at design time?
|
|
|
|
|
I have a TextBox bound to a decimal. I'm using Clifford Nelson's [^] Number Only Behaviour for WPF.
I added a DP to toggle allowing decimals called AllowDecimals, but I've found a problem, andit's NOT with Clifford's code. And it only happens when BOUND to a property.
First, here's the OnTextInput
private static void OnTextInput(object sender, TextCompositionEventArgs e)
{
bool allowDecimals = GetAllowDecimals((Control)sender);
if (allowDecimals && e.Text.Any(c => c.Equals('.')))
{
}
else
{
if (e.Text.Any(c => !char.IsDigit(c)))
{
e.Handled = true;
}
}
}
As you can see by the comment, if I turn on AllowDecimals and type a '.', the code hits where it should, but I don't see it in the TextBox.
If I type some digits THEN arrow over in between two digits and type a '.', then it's accepted.
I beleive the problem is that the binding is trying to parse the value and somehow discards or swallows the decimal point.
The WPF ToolKit has a DecimalUpDown control. I don't really want to bring in that entire library just so I can enter a decimal point.
Anyone have a workaround or fix for this?
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
I assume there is a reason why you are not using the numericupdown control and removing the U/D arrows. I would think changing the style from decimal to integer should be possible.
Never underestimate the power of human stupidity -
RAH
I'm old. I know stuff - JSOP
|
|
|
|
|
I already stated why
If it's not broken, fix it until it is.
Everything makes sense in someone's mind.
Ya can't fix stupid.
|
|
|
|
|
WPFToolkit is like 1.5Mb
I too try to trim my application of dead weight...
It matters not much for business application, but end user application do benefit from small download files, I reckon...
|
|
|
|
|
Super Lloyd wrote: business application Yeah this is where I lived
Never underestimate the power of human stupidity -
RAH
I'm old. I know stuff - JSOP
|
|
|
|
|
As end users we download several Gb for Warcraft. 1.5 Mb was noticable in the dial up era; but these days your average webpage pulls in more.
Also, you're using a dot as a decimal-separator. The system may be set to use a comma.
Bastard Programmer from Hell
"If you just follow the bacon Eddy, wherever it leads you, then you won't have to think about politics." -- Some Bell.
|
|
|
|
|