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:

https://mattdot.members.winisp.net/Blog/ExpanderDropdown/WpfBlogSamples.zip

Comments

• Anonymous
  November 21, 2005
  nice control!
  
  another cool wpf widget might a hybrid combobox that does realtime filtering as you type (think of the search bar in itunes).
  
  

• Anonymous
  November 29, 2005
  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.

• Anonymous
  January 17, 2007
  Could you post an updated version of the code, one that runs in the release version of the framework? thanks, gabo

• Anonymous
  January 23, 2007
  I'm working on an RTM version.  Should be available soon.

• Anonymous
  August 23, 2007
  Please suggest how to place dropdown controls in expander control Thanks

• Anonymous
  September 20, 2007
  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?

• Anonymous
  December 09, 2007
  The comment has been removed

• Anonymous
  August 05, 2009
  For those interested by an update for VS2008, here is the code of Page1.xaml : <Page x:Class="WpfBlogSamples.Page1"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase" xmlns:local="clr-namespace:WpfBlogSamples"    Title="WPF Samples - Expander Dropdown" Loaded="PageLoaded"    > <Page.Resources> <!-- Container Style for 1st level of grouping --> <Style x:Key="containerStyle"  TargetType="{x:Type GroupItem}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type GroupItem}"> <Expander IsExpanded="False" Header="{TemplateBinding Content}" HeaderTemplate="{TemplateBinding ContentTemplate}"> <ItemsPresenter /> </Expander> </ControlTemplate> </Setter.Value> </Setter> </Style> <CollectionViewSource x:Key="GroupedData">            <CollectionViewSource.GroupDescriptions>                <PropertyGroupDescription PropertyName="Continent"/>            </CollectionViewSource.GroupDescriptions>            <CollectionViewSource.SortDescriptions>                <scm:SortDescription PropertyName="Continent" Direction="Ascending"/>                <scm:SortDescription PropertyName="Country" Direction="Ascending"/>            </CollectionViewSource.SortDescriptions>        </CollectionViewSource> <DataTemplate x:Key="GroupHeader"> <TextBlock Text="{Binding Path=Name}" FontFamily="Myriad Pro" FontSize="20" Margin="20,5,5,5" Foreground="#989791"   /> </DataTemplate> <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> <DataTemplate x:Key="SelectedCountryTemplate"> <TextBlock Text="{Binding Path=Country}" FontFamily="Myriad Pro" FontSize="16" Margin="0,0,0,0" /> </DataTemplate> </Page.Resources> <StackPanel Margin="40"> <ComboBox Width="200" DataContext="{StaticResource GroupedData}" ItemsSource="{Binding}" ItemTemplate="{StaticResource CountryTemplate}"> <ComboBox.GroupStyle> <GroupStyle ContainerStyle="{StaticResource containerStyle}" HeaderTemplate="{StaticResource GroupHeader}"/> </ComboBox.GroupStyle> </ComboBox> </StackPanel> </Page>