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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:l="clr-namespace:LivePreviewComboBox">
 
    <StackPanel>
        <TextBlock Text="Preview Value:" />
        <TextBlock Text="{Binding LivePreviewItem, ElementName=liveBox}" />
        <l:LivePreviewComboBox x:Name="liveBox"/>
    </StackPanel>
 
</Window>
 
 

Download the LivePreviewCombo Control

 Comments on this article

Ganesh	Commented on 4.June 2010 Its so nice.
Don	Commented on 27.December 2010 Nice! But i think, OnDropDownOpenChanged - Method is useless ? If i comment it out, nothing changes
Zakia...	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? Thank's,,,
Rita	Commented on 8.June 2011 To Good
pradeep	Commented on 13.June 2011 jb
Fonyuy	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 ?