I can't find any documentation on how to size the dropdown portion of the combobox. I have two columns and 4 or 5 rows. I want all columns and rows to be visible when the use expands their selections. Right now it's only as wide as the combo and it's showing less than one row.
Thank you.
Mike
Hi Mike,
I've been looking into your requirements and I believe I have the right sample for you. This sample demonstrates how to change the dropdown width. The sample also automatically sizes the dropdown width to show all the columns.
In the sample I handle the dropdown opening event and inside this event I traverse the visual tree of the combo editor to get the Popup that is used for the dropdown. From the Popup it's possible to change the width and height of the dropdown.
Let me know if you have any questions on this.
Rob, this is really great. I actually saw the project in another answer and started working with it this morning.
I can see in your example that the two string columns are sized correctly, however in my situation I have an image column and a string column. For some reason in the popup_Opened event around line 53, I only have one control in the itemsPanel. In your example, both of your columns show up, but in mine, only the first one will show up.
My xaml code is as follows:
<ig:XamMultiColumnComboEditor x:Name="cbInternalSecretion" Width="93" VerticalAlignment="Bottom" AllowMultipleSelection="False" DisplayMemberPath="PickListItem" AutoGenerateColumns="False" SelectedItemsResetButtonVisibility="Collapsed" ItemsSource="{Binding DataContext.InternalSecretion, ElementName=LayoutRoot, Mode=OneWay}" SelectedItem="{Binding DataContext.InternalSecretionSelectedItem, ElementName=LayoutRoot, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" SelectionChanged="cbInternalSecretion_SelectionChanged" Loaded="cbInternalSecretion_Loaded" Panel.ZIndex="0"> <ig:XamMultiColumnComboEditor.Resources> <Style TargetType="{x:Type ig:ComboHeaderCellControl}"> <Style.Triggers> <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Content}" Value="{x:Null}"> <Setter Property="Visibility" Value="Collapsed" /> </DataTrigger> </Style.Triggers> </Style> <Style TargetType="{x:Type ig:ComboCellControl}"> <Style.Triggers> <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=HasContent}" Value="False"> <Setter Property="Visibility" Value="Collapsed" /> </DataTrigger> </Style.Triggers> </Style> </ig:XamMultiColumnComboEditor.Resources> <ig:XamMultiColumnComboEditor.Columns> <ig:TextComboColumn Key="PickListItem" HeaderText="Infection Classification" /> <ig:ImageComboColumn Key="Thumbnail" HeaderText="Thumbnail Photo" /> </ig:XamMultiColumnComboEditor.Columns> </ig:XamMultiColumnComboEditor>
My code behind is almost exactly what is in your sample except for a check on the child count which I added to prevent a zero value exception.
private void cbInternalSecretion_Loaded( object sender, RoutedEventArgs e ) { try { if( VisualTreeHelper.GetChildrenCount( sender as XamMultiColumnComboEditor ) > 0 ) { Grid grid = VisualTreeHelper.GetChild( sender as XamMultiColumnComboEditor, 0 ) as Grid; Popup popup = ( ( grid.Children[ 0 ] as Border ).Child as Grid ).Children[ 0 ] as Popup; // This will change the white space to gray, you really can't get rid of the space though unless the dropdown size // is restricted. ( ( popup.Child as Grid ).Children[ 0 ] as Border ).Background = new SolidColorBrush( Colors.Gray ); // Handle the popup opened event. The grid rows will exist by the time this event is fired. popup.Opened += new EventHandler( popup_Opened ); } } catch( Exception ) { throw; } } void popup_Opened( object sender, EventArgs e ) { Popup popup = sender as Popup; DependencyObject itemsPanel = FindFirstRow( popup.Child ); if( itemsPanel != null && VisualTreeHelper.GetChildrenCount( itemsPanel ) > 0 ) { double width = 0; for( int i = 0; i < VisualTreeHelper.GetChildrenCount( itemsPanel ); i++ ) { ComboCellControl control = VisualTreeHelper.GetChild( itemsPanel, i ) as ComboCellControl; width += control.ActualWidth; } ( ( popup.Child as System.Windows.Controls.Grid ).Children[ 0 ] as Border ).Width = width + 3; popup.MaxWidth = width + 3; } } /// <summary> /// Helper method used to find the first grid row in the visual tree. /// </summary> /// <param name="root"></param> /// <returns></returns> private DependencyObject FindFirstRow( DependencyObject root ) { for( int i = 0; i < VisualTreeHelper.GetChildrenCount( root ); i++ ) { DependencyObject dObj = VisualTreeHelper.GetChild( root, i ); if( dObj.GetType() == typeof( ComboCellsPanel ) ) { return dObj; } dObj = FindFirstRow( dObj ); if( dObj != null ) { return dObj; } } return null; }
Any thoughts?
Thanks,