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="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





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

 Comments on this article

Show all comments
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 ?

Name
E-Mail (optional)
Comment