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

6/26/2008 at 12:21 AM

I really hope you could help me out on this. Say I...
by Roy

Read more...

6/14/2008 at 4:14 PM

Yep, it happened to me too. It violates the princi...
by Gian Maria

Read more...

6/13/2008 at 5:32 AM

Thank you very much, your postinge.on the coattail...
by cindex

Read more...

6/12/2008 at 1:06 PM

Okay. Maybe sometime I'll try to make my own, inhe...
by Lyr

Read more...

6/11/2008 at 4:09 PM

Hello Lyr,ImageSourceConverter is a TypeConverter ...
by Marco De Sanctis

Read more...

Recent Posts

Unleash the power of VisualStateManager with custom states

6/30/2008 at 12:12 AM

Read more...

Blend 2.5 June CTP and custom controls templating

6/25/2008 at 10:18 AM

Read more...

TransactionScope timeout

6/14/2008 at 12:01 AM

Read more...

Custom controls and default template in Silverlight 2 Beta 2

6/11/2008 at 11:37 AM

Read more...

Silverlight 2 Beta 2 Documentation Available

6/6/2008 at 10:17 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 2 and 7 and type the answer here: