Re: How to load only needed images? - WPF Discussion Boards

12-Mar-09 7:35

Hi everybody! I'm a kind of newbie in WPF and I have an app, that shows in a ListBox images from some directory. I'm using recycling option and a converter to minimize images to 100 width. This realy decrease memory usage, but the case is that app's start takes some time (up to 2 minutes on 2000 5mp images). And this time depends on quantity of images linearly.. I think, that's because of app has to load all images in cash, and i want to perform quick start and then to load images needed. Also, when app starts memory goes up to 250 Mb on ~300 5mp images, and on loaded memory decreases to 70-80 Mb and stays steady. Any ideas?

Eslam Afifi12-Mar-09 12:27

12-Mar-09 12:27

I have not done any serious WPF yet so I didn't run into such situations. But I think this may solve your problem.

<ListBox VirtualizingStackPanel.IsVirtualizing="True" />

Please tell me if it works.

Eslam Afifi

S.a.n.4.e.s12-Mar-09 19:18

Re: How to load only needed images? [modified]

12-Mar-09 19:18

It set to true all the time, but unfortunatly it doesn't solve the problem.

Eslam Afifi13-Mar-09 2:53

13-Mar-09 2:53

I've just got online and read Luc Pattyn's replies. I'd like to add to his/her advice using the MVVM pattern and store the thumbnails in the Model-View, or maybe in the Model itself. Make the converter checks if the thumbnail exists or not so you use the cached thumbnail or create and store it. You can keep the thumbnails in memory or on disk, whatever is best for your situation. All that while keeping the ListBox virtualizing.

Eslam Afifi

modified on Saturday, March 14, 2009 8:08 AM

Luc Pattyn12-Mar-09 13:29

Luc Pattyn

12-Mar-09 13:29

Hi,

this problem is not specific to WPF. There generally are two remedies:
1. only load what is really necessary; having controls that support a "virtual" mode makes that easier.
2. compute "thumbnails" once, and store them on disk, together with the actual images. Don't worry about disk space, they could well be 100 times smaller than the originals.

Smile | :)

Luc Pattyn [Forum Guidelines] [My Articles]

- before you ask a question here, search CodeProject, then Google
- the quality and detail of your question reflects on the effectiveness of the help you are likely to get
- use the code block button (PRE tags) to preserve formatting when showing multi-line code snippets

S.a.n.4.e.s12-Mar-09 20:30

12-Mar-09 20:30

I'm using controls, that support "virtual" mode, and i think it work on scrolling, but i interest in faster startup. I don't know why it starts so long, and i assume that all the images are cached on load. Maybe i'm wrong, but i don't know another reason. That's why i need help. If it matter's, i can show code.

Luc Pattyn13-Mar-09 2:14

Luc Pattyn

13-Mar-09 2:14

Hi,

improving the performance is similar to debugging, so gather the facts, analyze, formulate an hypothesis, verify, fix, and iterate.

These are the first steps I would take:
- install logging code, basically a "public static void log(string)" method that saves a string to a log file;
- set up a StopWatch, so each log message automatically gets prefixed with the elapsed time with millisecond resolution
- sprinkle log statements in the relevant parts of the app.
- now have a trial run: startup, stop, look at the log file; any time gap exceeding say 100 msec needs either more log statements, and if that is not possible, is a hotspot in need of fixing. It might be a Thread.Sleep() you forgot to remove, a first database access (move to another thread?), a first network access, etc.

Smile | :)

Luc Pattyn [Forum Guidelines] [My Articles]

Re: How to load only needed images? [modified]

Luc Pattyn13-Mar-09 2:19

Luc Pattyn

13-Mar-09 2:19

S.a.n.4.e.s wrote:
i assume that all the images are cached on load

not sure what you mean.

S.a.n.4.e.s wrote:
If it matter's, i can show code

it might be useful, *after* you tried to localize and fix the slow parts.

Smile | :)

Luc Pattyn [Forum Guidelines] [My Articles]

S.a.n.4.e.s14-Mar-09 0:10

Storing Signature in sql server database

14-Mar-09 0:10

<blockquote class="FQ"><div class="FQA">Luc Pattyn wrote:</div> S.a.n.4.e.s wrote:
i assume that all the images are cached on load

not sure what you mean.</blockquote>

I mean, that all the collection of images, binded to ListView, are loading on startup. I use a single thread, don't use network or database, i simple get *.jpg files from some directory on one of my disks.

There's my code.
XAML:
<pre>
<usercontrol.resources>
<objectdataprovider x:name="PhotosODP" x:key="MyPhotos" objecttype="{x:Type l:PhotoList}" xmlns:x="#unknown" />
<l:uritoimageconverter x:key="LocalUriToImageConverter" xmlns:x="#unknown" xmlns:l="#unknown" />
<DataTemplate DataType="{x:Type l:Photo}">
<Grid VirtualizingStackPanel.IsVirtualizing="True" VirtualizingStackPanel.VirtualizationMode="Recycling">
<Border Background="#FF562100" Padding="4" BorderThickness="1">
<StackPanel Width="{Binding ElementName=Zoomer, Path=Value}" Margin="5" VirtualizingStackPanel.IsVirtualizing="True" VirtualizingStackPanel.VirtualizationMode="Recycling">
<Image Source="{Binding Source, Converter={StaticResource LocalUriToImageConverter}}" VirtualizingStackPanel.IsVirtualizing="True" VirtualizingStackPanel.VirtualizationMode="Recycling"/>
<Label Foreground="White" Content="{Binding FileName}" />
</StackPanel>
</Border>
</Grid>
</DataTemplate>
</usercontrol.resources>
</pre>

And C# class, that makes a collection:
<pre>
using System;
using System.Collections.Generic;
using System.Text;
using System.IO;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Drawing;
using System.Windows.Media.Imaging;

namespace Components
{
public class Photo
{
public Photo(string path)
{
_source = path;
_name = path.Substring(path.LastIndexOf("\\") + 1);
}

public override string ToString()
{
return Source;
}

private string _source;
public string Source { get { return _source; } }
//my
private string _name;
public string FileName { get { return _name; } }
//

}

public class PhotoList : ObservableCollection<photo>
{
public PhotoList() { }

public PhotoList(string path) : this(new DirectoryInfo(path)) { }

public PhotoList(DirectoryInfo directory)
{
_directory = directory;
Update();
}

public string Path
{
set
{
_directory = new DirectoryInfo(value);
Update();
}
get { return _directory.FullName; }
}

public DirectoryInfo Directory
{
set
{
_directory = value;
Update();
}
get { return _directory; }
}

private void Update()
{
foreach (FileInfo f in _directory.GetFiles("*.jpg"))
{
Add(new Photo(f.FullName));
}
}

DirectoryInfo _directory;
}

}
</photo></pre>
And an event of an app, on which load of images starts:
<pre>
private void UserControl_Initialized(object sender, EventArgs e)
{
photos = (PhotoList)(this.Resources["MyPhotos"] as ObjectDataProvider).Data;
photos.Path = path;
}
</pre>

modified on Saturday, March 14, 2009 6:57 AM

vsaratkar12-Mar-09 5:45

vsaratkar

12-Mar-09 5:45

Hi,

I am using InkCanvas control for signature. Can anyone tell me how to store these signatures in sql server DB?

Vsaratkar

Eslam Afifi12-Mar-09 13:00

12-Mar-09 13:00

Save the strokes to a memory stream

var memoryStream = new System.IO.MemoryStream();
inkCanvas.Strokes.Save(memoryStream); // you may want to add a second parameter = true
to compress the data

then store the data of the memory stream in your database as an appropriate binary type.

to load the data to an InkCanvans from a memory stream

inkCanvas1.Strokes = new StrokeCollection(memoryStream); // make sure that the position of
memoryStream = 0

Eslam Afifi

vsaratkar13-Mar-09 2:13

vsaratkar

13-Mar-09 2:13

Thanks Eslam!!!!!

Eslam Afifi13-Mar-09 2:58

13-Mar-09 2:58

Glad to help Smile | :)

Eslam Afifi

AndyTexas22-Jun-09 6:08

AndyTexas

22-Jun-09 6:08

I see how to store the strokes DB. We've been successful at this in storing signatures from a tablet application. I now want to be able to present our signatures via a web report. I want to be able to convert my strokes directly to a png or bitmap and display using SS Reporting Services image control. So, I need to convert the strokes collection, stored in the database, to to bitmap byte[], as we're unable to use the inkcavas control in SSRS. Does anyone know how to do this?

-Andy

Eslam Afifi22-Jun-09 12:24