WPF: Expander Dropdown

Do you ever get sick of hunting through a dropdown that has hundreds of items in no particular order.  I do!!  I’ve seen far too many LOB apps that feel the need to have hundreds items in a dropdown.  So this week, I created the expander dropdown to at least provide some organization to those massive dropdowns … I have some spare time since it doesn’t look like I’m going to find an XBOX 360 until next summer [:)].  I saw some of Namita’s samples and that really sparked the idea, so thanks to her.

Here is the unexpanded view:

And the expanded view:

And, for all of you still with the Sept CTP like me … I’ll try embedding the sample as a web browser application. Let me know how this works.

I removed the inline web browser app — MD

And of course, the source:


Comments (8)

  1. abanker says:

    nice control!

    another cool wpf widget might a hybrid combobox that does realtime filtering as you type (think of the search bar in itunes).

  2. mattdotson says:

    Yeah, you could do that … I’ve never used iTunes, but I think I get what you are saying. I’ll post a sample soon.

  3. Could you post an updated version of the code, one that runs in the release version of the framework?



  4. mattdotson says:

    I’m working on an RTM version.  Should be available soon.

  5. Rupali says:

    Please suggest how to place dropdown controls in expander control


  6. faye says:

    I am hosting a expander control in my WinForm appliction, thus all make-up things are done by code, not in .xaml file.

    Can you suggest how to move the expander arrow from its initial left side to the right side of the window?

  7. angel says:

    why error on this

    Error 5 The tag ‘Application’ does not exist in XML namespace ‘http://schemas.microsoft.com/winfx/avalon/2005‘. Line 1 Position 14. C:Documents and SettingsalainlyeDesktopc# downloaddropdownWpfBlogSamplesWpfBlogSamplesMyApp.xaml 1 14 WpfBlogSamples


    Error 6 The tag ‘Page’ does not exist in XML namespace ‘http://schemas.microsoft.com/winfx/avalon/2005‘. Line 4 Position 7. C:Documents and SettingsalainlyeDesktopc# downloaddropdownWpfBlogSamplesWpfBlogSamplesPage1.xaml 4 7 WpfBlogSamples

  8. F£ö says:

    For those interested by an update for VS2008, here is the code of Page1.xaml :

    <Page x:Class="WpfBlogSamples.Page1"





       Title="WPF Samples – Expander Dropdown"




    <!– Container Style for 1st level of grouping –>

    <Style x:Key="containerStyle"  TargetType="{x:Type GroupItem}">

    <Setter Property="Template">


    <ControlTemplate TargetType="{x:Type GroupItem}">

    <Expander IsExpanded="False" Header="{TemplateBinding Content}"

    HeaderTemplate="{TemplateBinding ContentTemplate}">

    <ItemsPresenter />






    <CollectionViewSource x:Key="GroupedData">


                   <PropertyGroupDescription PropertyName="Continent"/>



                   <scm:SortDescription PropertyName="Continent" Direction="Ascending"/>

                   <scm:SortDescription PropertyName="Country" Direction="Ascending"/>



    <DataTemplate x:Key="GroupHeader">

    <TextBlock Text="{Binding Path=Name}" FontFamily="Myriad Pro" FontSize="20" Margin="20,5,5,5" Foreground="#989791"   />


    <DataTemplate x:Key="CountryTemplate">

               <TextBlock Text="{Binding Path=Country}" Width="{Binding RelativeSource={RelativeSource Findancestor, AncestorType={x:Type ItemsControl}}, Path=Width}" FontFamily="Myriad Pro" FontSize="16" Margin="0,0,0,0" />


    <DataTemplate x:Key="SelectedCountryTemplate">

    <TextBlock Text="{Binding Path=Country}" FontFamily="Myriad Pro" FontSize="16" Margin="0,0,0,0" />



    <StackPanel Margin="40">

    <ComboBox Width="200" DataContext="{StaticResource GroupedData}" ItemsSource="{Binding}" ItemTemplate="{StaticResource CountryTemplate}">


    <GroupStyle ContainerStyle="{StaticResource containerStyle}" HeaderTemplate="{StaticResource GroupHeader}"/>