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

10/23/2008 at 3:48 PM

sorry, my previous post was not complete... I trie...
by glondi

Read more...

9/22/2008 at 10:03 AM

Good one!!!Could you please post source code for t...
by Nisa

Read more...

9/10/2008 at 5:53 PM

I didn't even realize people were aware of the WPF...
by Mike Brown

Read more...

9/8/2008 at 1:22 AM

Marco,How are you handling scenarios where you nee...
by ctodd

Read more...

9/3/2008 at 1:00 AM

@ctodd: Hi,basically for the reasons I described a...
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 !
Gravatar
# Breast photos.
Posted by Breast. on 1/24/2009 4:10 PM
Breast. Inflamatory breast cancer.
Gravatar
# Can doxycycline be used fors trep throat.
Posted by Doxycycline eye bacteria. on 5/21/2009 6:22 AM
Doxycycline side effects. Doxycycline.
Gravatar
# Cialis.
Posted by Cialis. on 5/30/2009 4:37 AM
Cialis daily use. Buy cialis. Cheapest cialis. Buy viagra online uk cialis levitra. Cialis. Viagra vs. cialis.
Gravatar
# Viagra.
Posted by Discount viagra. on 6/1/2009 5:25 AM
Viagra. Viagra for women. Natural viagra. How does viagra work.
Gravatar
# Usaa insurance company.
Posted by Farmers insurance. on 6/2/2009 6:11 AM
Dental insurance. Liberty mutual insurance. Auto insurance. Farmers insurance. Term life insurance. Progressive auto insurance. Affordable health insurance.
Gravatar
# Levitra 25mg preguntas.
Posted by Buy levitra cheap levitra online get back to life. on 6/3/2009 10:58 AM
Why would he have levitra.. Levitra. Long condition how last levitra does.
Gravatar
# Percocet high blood pressure.
Posted by Percocet and greece. on 7/8/2009 11:08 PM
Percocet picture. Percocet 7.5 generic. Percocet. How do you snort percocet.
Gravatar
# Soma addiction and lying.
Posted by Soma online next day. on 7/12/2009 11:14 PM
Soma. Best online pricing for soma.
Gravatar
# Tramadol.
Posted by Tramadol. on 7/20/2009 1:36 AM
Tramadol 180 cod.
Gravatar
# Phentermine.
Posted by Phentermine yellow. on 7/29/2009 12:15 AM
Phentermine 37.5mg. Phentermine.
Gravatar
# Cheapest soma.
Posted by Start soma. on 7/30/2009 12:21 AM
Soma side effects. Soma without prescription. Soma-fitness. Effects of soma. Soma. Drug soma.
Gravatar
# Phentermine.
Posted by Buy phentermine. on 7/31/2009 12:10 AM
Adipex phentermine vs. Phentermine. Discount phentermine. Phentermine ingredient. Phentermine hcl.
Gravatar
# Phentermine information.
Posted by Order phentermine online. on 8/1/2009 12:09 AM
Phentermine. Danger of phentermine. Phentermine review.
Gravatar
# Ambien.
Posted by Ambien cr. on 8/2/2009 12:06 AM
Is there a good sleeping beside ambien 10 mg. Ambien manufacturer. Ambien verses temacetam. Ambien. Cheaper ambien prescription. Buy ambien 10.
Gravatar
# Buy percocet.
Posted by Effects of long term percocet use. on 8/3/2009 1:03 AM
Compare brand name and generic percocet. Percocet addiction. Will percocet show up in a drug test. Percocet.
Gravatar
# Ambien side effects.
Posted by Ambien and brain injuries. on 8/3/2009 11:57 PM
Does ambien interrupt the menstrual cycle. Buy ambien online no prescription. Ambien and pregnancy. Ambien. Ambien empty stomach. Long term ambien.
Gravatar
# Cheap xanax.
Posted by Xanax while pregnant. on 8/5/2009 12:28 AM
Buy xanax. Buy xanax online. Can you buy xanax without a prescription. Xanax. Lethal dosage xanax.
Comments have been closed on this topic.