Bookmark and Share Share...    Subscribe to this feed Feed   About Christian Moser  

ComboBox with Live Preview

The Live Preview Pattern

If you are using Microsoft Office 2007 or later, you are familiar with the "live preview" concept. They are using it for all kind of selections like color, fonttype or fontsize. The idea behind this pattern is to give the user an immediate feedback, how the object would look like, if he does the selection, without actually doing it. So he can leave the combo and nothing has changed.

How to use the LivePreviewComboBox Control

I encapsulated this functionality into a custom control called LivePreviewComboBox that provides an additional dependency property LivePreviewItem where you can bind to. The following code snipped explains how to use it:

<Window xmlns=""
        <TextBlock Text="Preview Value:" />
        <TextBlock Text="{Binding LivePreviewItem, ElementName=liveBox}" />
        <l:LivePreviewComboBox x:Name="liveBox"/>

Download the LivePreviewCombo Control

Last modified: 2010-01-13 13:26:02
Copyright (c) by Christian Moser, 2011.

 Comments on this article

Show all comments
Commented on 4.June 2010
Its so nice.
Commented on 27.December 2010
But i think, OnDropDownOpenChanged - Method is useless ?
If i comment it out, nothing changes
Commented on 7.June 2011
So good,,,
Can you help me?

I make my application by using the comboBox, but I want the items in the comboBox I get from richTextBox, roughly, how?
Commented on 8.June 2011
To Good
Commented on 13.June 2011
Commented on 19.August 2011
Nice article. I noticed though, that if you set the IsEditable = true, then ComboBox selected value changes along as you select drop down items with the up/down arrow. Is there a way to have the behavior this implementation currently have, while setting IsEditable = true ?

E-Mail (optional)