Syndicate

News

My name's Marco De Sanctis and I'm an IT professional from Italy. This is my technical blog, about .NET and related application development and design technologies.

Download my Resume (.doc)

Recent Comments

7/28/2008 at 2:46 PM

Hi...What kind of problem are you experiencing?...
by Marco De Sanctis

Read more...

7/28/2008 at 12:59 PM

Very nice concept and can i expect for list box? ,...
by Sudhir Malireddy

Read more...

7/28/2008 at 9:58 AM

In aggregates the rula is: who is the rool element...
by Tommaso Caldarola

Read more...

7/22/2008 at 7:49 PM

Been there too in a past project! I remember this ...
by Mathias

Read more...

7/14/2008 at 11:50 PM

Sure I am... but if you got batches that last for ...
by Marco De Sanctis

Read more...

Recent Posts

Crunch mode is a pure waste of time, energy and money

7/31/2008 at 5:41 PM

Read more...

Double Click on the .sln file doesn't open Visual Studio on Vista

7/27/2008 at 9:02 AM

Read more...

Domain Model & Aggregates: when do master-detail associations happen?

7/22/2008 at 4:08 PM

Read more...

How I Got Started in Software Development

7/14/2008 at 12:16 AM

Read more...

Unleash the power of VisualStateManager with custom states

6/30/2008 at 12:12 AM

Read more...

Create a WPF skinnable ImageUploader control

posted on Thursday, May 15, 2008 1:12 AM | Filed Under [ WPF ]

In a previous post, I showed how you can directly bind a Binary LINQ type to a WPF Image control implementing an ad-hoc type converter, not so much useful unless you don't have your images already stored on your database. What we need is something that is capable to achieve a two way binding, both displaying images and allowing users to upload their own; what about a brand new, completely skinnable, WPF custom control? So, let's create a new WPF project and add a new CustomControl called ImageUploader and take care of its logic first. As I wrote elsewhere, it's a good practice to design control's behavior (and implement it) without references to any UI element.

First of all, we need a property where to store an ImageSource object; we want it to be two-way bindable, so we are going to build a dependency property instead of a plain CLR one with appropriate FrameworkPropertyMetadataOptions:

image

Next, we need a couple of commands:

  1. a Clear command (we want the user being able to remove the current image)
  2. a Browse command to upload a new picture

If you've read some posts of mine, lately, you should perfectly know how to create custom commands and bind them to handlers smile_regular

image

The ClearImageCommand handler is pretty straightforward:

image

Same for the BrowseCommand handler, although it deserves one little note: we could obviously use the BitmapImage constructor with a URI as argument to directly reference the file; however this approach leaves the file locked for the whole BitampImage lifetime (which unfortunately ends only when GC wants to). Therefore what we do is manually handling its loading, setting the CacheOption property to load the entire image data during its init stage and caching it in a MemoryStream:

 image

Now that our control's logic is completely defined (and, again, without references to any UI element), we can move to creating a default layout on the generic.xaml file; a very simple one could be the following

image

that is not so bad if we add a bit of animation...

Anyway, doing something fancier is only a matter of Blend skills (and mine are awful).

One last note: the BinaryToImageConverter I showed you here is still one-way only. To get it work in both directions, we must implement the ConvertBack method:

image

image Here's the complete source code, obviously released under the "Works on my machine" license smile_wink

Enjoy!

kick it on DotNetKicks.com

Comments

Gravatar
# re: Create a WPF skinnable ImageUploader control
Posted by alkampfer on 5/15/2008 1:37 PM
Really interesting, but I did not know already the "Work on my machine" license :D :D

Alk.
Gravatar
# re: Create a WPF skinnable ImageUploader control
Posted by Lyr on 6/11/2008 3:53 PM
Nice work. I'm wondering if your "BinaryToImageConverter" isn't already in .Net under the name "ImageSourceConverter". But I can't find any working exemple of this one :S
Gravatar
# re: Create a WPF skinnable ImageUploader control
Posted by Marco De Sanctis on 6/11/2008 4:09 PM
Hello Lyr,

ImageSourceConverter is a TypeConverter and not a ValueConverter and it has a different purpose: it's what allows you to write a URI in XAML, for example, and translate that URI in an ImageSource property.

Actually, it can translate a byte array in an ImageSource. However it can't be used as a Binding converter because it doesn't implement the IValueConverter interface.

Thanks for your feedback.

M.
Gravatar
# re: Create a WPF skinnable ImageUploader control
Posted by Lyr on 6/12/2008 1:06 PM
Okay. Maybe sometime I'll try to make my own, inheriting ImageSourceConverter and implementing IValueConverter.

For now, I lack of time so I'll use your (which work great on my machine too).

Gracie !
Post Comment
Title *
Name *
Email
Url
Comment *  
Please add 4 and 5 and type the answer here: