How can I create a WPF combo box with the width of the widest element in XAML?

Question

I know how to do this in code, but can this be done in XAML?

Window1.xaml:

<Window x:Class="WpfApplication1.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300"> <Grid> <ComboBox Name="ComboBox1" HorizontalAlignment="Left" VerticalAlignment="Top"> <ComboBoxItem>ComboBoxItem1</ComboBoxItem> <ComboBoxItem>ComboBoxItem2</ComboBoxItem> </ComboBox> </Grid> </Window> 

Window1.xaml.cs:

 using System.Windows; using System.Windows.Controls; namespace WpfApplication1 { public partial class Window1 : Window { public Window1() { InitializeComponent(); double width = 0; foreach (ComboBoxItem item in ComboBox1.Items) { item.Measure(new Size( double.PositiveInfinity, double.PositiveInfinity)); if (item.DesiredSize.Width > width) width = item.DesiredSize.Width; } ComboBox1.Measure(new Size( double.PositiveInfinity, double.PositiveInfinity)); ComboBox1.Width = ComboBox1.DesiredSize.Width + width; } } } 

Answer 1

This cannot be in XAML without:

• Creating covert control (Alan Hannford's answer)
• Abrupt change in the ControlTemplate parameter. Even so, you might need to create a hidden version of ItemsPresenter.

The reason for this is that, by default, the ComboBox ControlTemplates I came across (Aero, Luna, etc.) all nest in ItemsPresenter in a popup window. This means that the location of these elements is delayed until they actually become visible.

An easy way to test is to change the standard ControlTemplate to bind the MinWidth of the outermost container (this is the grid for Aero and Luna) to ActualWidth from PART_Popup. You can automatically synchronize it with ComboBox when you click "Cancel", but not earlier.

Therefore, if you cannot force a measurement operation in a layout system (which you can do by adding a second control), I don’t think it can be done.

As always, I am open to a short, elegant solution, but in this case, the only solutions I have seen are transitions with code or double control / ControlTemplate.

Answer 2

You cannot do this directly in Xaml, but you can use this Attached Behavior. (The width will be visible in the Designer)

 <ComboBox behaviors:ComboBoxWidthFromItemsBehavior.ComboBoxWidthFromItems="True"> <ComboBoxItem Content="Short"/> <ComboBoxItem Content="Medium Long"/> <ComboBoxItem Content="Min"/> </ComboBox> 

Attached Behavior ComboBoxWidthFromItemsProperty

 public static class ComboBoxWidthFromItemsBehavior { public static readonly DependencyProperty ComboBoxWidthFromItemsProperty = DependencyProperty.RegisterAttached ( "ComboBoxWidthFromItems", typeof(bool), typeof(ComboBoxWidthFromItemsBehavior), new UIPropertyMetadata(false, OnComboBoxWidthFromItemsPropertyChanged) ); public static bool GetComboBoxWidthFromItems(DependencyObject obj) { return (bool)obj.GetValue(ComboBoxWidthFromItemsProperty); } public static void SetComboBoxWidthFromItems(DependencyObject obj, bool value) { obj.SetValue(ComboBoxWidthFromItemsProperty, value); } private static void OnComboBoxWidthFromItemsPropertyChanged(DependencyObject dpo, DependencyPropertyChangedEventArgs e) { ComboBox comboBox = dpo as ComboBox; if (comboBox != null) { if ((bool)e.NewValue == true) { comboBox.Loaded += OnComboBoxLoaded; } else { comboBox.Loaded -= OnComboBoxLoaded; } } } private static void OnComboBoxLoaded(object sender, RoutedEventArgs e) { ComboBox comboBox = sender as ComboBox; Action action = () => { comboBox.SetWidthFromItems(); }; comboBox.Dispatcher.BeginInvoke(action, DispatcherPriority.ContextIdle); } } 

What he does is that he calls the extension method for the ComboBox, called SetWidthFromItems, which (invisibly) expands and collapses itself, and then calculates the width based on the generated ComboBoxItems. (IExpandCollapseProvider requires a link to UIAutomationProvider.dll)

Then the extension method SetWidthFromItems

 public static class ComboBoxExtensionMethods { public static void SetWidthFromItems(this ComboBox comboBox) { double comboBoxWidth = 19;// comboBox.DesiredSize.Width; // Create the peer and provider to expand the comboBox in code behind. ComboBoxAutomationPeer peer = new ComboBoxAutomationPeer(comboBox); IExpandCollapseProvider provider = (IExpandCollapseProvider)peer.GetPattern(PatternInterface.ExpandCollapse); EventHandler eventHandler = null; eventHandler = new EventHandler(delegate { if (comboBox.IsDropDownOpen && comboBox.ItemContainerGenerator.Status == GeneratorStatus.ContainersGenerated) { double width = 0; foreach (var item in comboBox.Items) { ComboBoxItem comboBoxItem = comboBox.ItemContainerGenerator.ContainerFromItem(item) as ComboBoxItem; comboBoxItem.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity)); if (comboBoxItem.DesiredSize.Width > width) { width = comboBoxItem.DesiredSize.Width; } } comboBox.Width = comboBoxWidth + width; // Remove the event handler. comboBox.ItemContainerGenerator.StatusChanged -= eventHandler; comboBox.DropDownOpened -= eventHandler; provider.Collapse(); } }); comboBox.ItemContainerGenerator.StatusChanged += eventHandler; comboBox.DropDownOpened += eventHandler; // Expand the comboBox to generate all its ComboBoxItem's. provider.Expand(); } } 

This extension method also provides the ability to call

 comboBox.SetWidthFromItems(); 

in the code behind (for example, in the ComboBox.Loaded event)

Answer 3

Yes, this is a bit unpleasant.

What I did in the past is to add a hidden list to the ControlTemplate (with its container contents set to the grid) showing each element at the same time, but with hidden visibility.

I would be happy to hear about any best ideas that don't rely on awful code or your opinion to understand that it needs to use another control to provide width to support visual effects (yuck!).

Answer 4

Based on the other answers above, here is my version:

 <Grid HorizontalAlignment="Left"> <ItemsControl ItemsSource="{Binding EnumValues}" Height="0" Margin="15,0"/> <ComboBox ItemsSource="{Binding EnumValues}" /> </Grid> 

HorizontalAlignment = "Left" stops controls using the full width of the containing control. Height = "0" hides the control.
Margin = "15.0" allows extra chrome around list items (I'm not afraid that chrome is agnostic).

Answer 5

I ended up with a “good enough” solution to this problem, which was to make the combo box never shrink below the largest size it held, like the old WinForms AutoSizeMode = GrowOnly.

The way I did this was with a custom value converter:

 public class GrowConverter : IValueConverter { public double Minimum { get; set; } public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { var dvalue = (double)value; if (dvalue > Minimum) Minimum = dvalue; else if (dvalue < Minimum) dvalue = Minimum; return dvalue; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotSupportedException(); } } 

Then I configure the combo box in XAML like this:

  <Whatever> <Whatever.Resources> <my:GrowConverter x:Key="grow" /> </Whatever.Resources> ... <ComboBox MinWidth="{Binding ActualWidth,RelativeSource={RelativeSource Self},Converter={StaticResource grow}}" /> </Whatever> 

Please note that with this you need a separate instance of GrowConverter for each combo box, unless of course you want them to be set together, similar to the Grid SharedSizeScope function.

Answer 6

Follow Malak's answer: I liked this implementation so much, I wrote the actual behavior for it. Obviously, you will need the Blend SDK so you can reference System.Windows.Interactivity.

XAML:

  <ComboBox ItemsSource="{Binding ListOfStuff}"> <i:Interaction.Behaviors> <local:ComboBoxWidthBehavior /> </i:Interaction.Behaviors> </ComboBox> 

the code:

 using System; using System.Windows; using System.Windows.Automation.Peers; using System.Windows.Automation.Provider; using System.Windows.Controls; using System.Windows.Controls.Primitives; using System.Windows.Interactivity; namespace MyLibrary { public class ComboBoxWidthBehavior : Behavior<ComboBox> { protected override void OnAttached() { base.OnAttached(); AssociatedObject.Loaded += OnLoaded; } protected override void OnDetaching() { base.OnDetaching(); AssociatedObject.Loaded -= OnLoaded; } private void OnLoaded(object sender, RoutedEventArgs e) { var desiredWidth = AssociatedObject.DesiredSize.Width; // Create the peer and provider to expand the comboBox in code behind. var peer = new ComboBoxAutomationPeer(AssociatedObject); var provider = peer.GetPattern(PatternInterface.ExpandCollapse) as IExpandCollapseProvider; if (provider == null) return; EventHandler[] handler = {null}; // array usage prevents access to modified closure handler[0] = new EventHandler(delegate { if (!AssociatedObject.IsDropDownOpen || AssociatedObject.ItemContainerGenerator.Status != GeneratorStatus.ContainersGenerated) return; double largestWidth = 0; foreach (var item in AssociatedObject.Items) { var comboBoxItem = AssociatedObject.ItemContainerGenerator.ContainerFromItem(item) as ComboBoxItem; if (comboBoxItem == null) continue; comboBoxItem.Measure(new Size(double.PositiveInfinity, double.PositiveInfinity)); if (comboBoxItem.DesiredSize.Width > largestWidth) largestWidth = comboBoxItem.DesiredSize.Width; } AssociatedObject.Width = desiredWidth + largestWidth; // Remove the event handler. AssociatedObject.ItemContainerGenerator.StatusChanged -= handler[0]; AssociatedObject.DropDownOpened -= handler[0]; provider.Collapse(); }); AssociatedObject.ItemContainerGenerator.StatusChanged += handler[0]; AssociatedObject.DropDownOpened += handler[0]; // Expand the comboBox to generate all its ComboBoxItem's. provider.Expand(); } } } 

Answer 7

You can bind Width to any container you want.

 <Window x:Class="WpfApplication1.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300" x:Name="Window1"> <Grid> <ComboBox Name="ComboBox1" HorizontalAlignment="Left" VerticalAlignment="Top"> <ComboBox.Width> <Binding ElementName="Window1" Path="ActualWidth"/> </ComboBox.Width> <ComboBoxItem>ComboBoxItem1</ComboBoxItem> <ComboBoxItem>ComboBoxItem2</ComboBoxItem> </ComboBox> </Grid> 

To get exactly what you are trying to do with the C # you wrote, I would look at including IValueConverter or IMultiValueConverter.

Answer 8

Put a list containing the same content behind Dropbox. Then do the correct height with some snapping like this:

 <Grid> <ListBox x:Name="listBox" Height="{Binding ElementName=dropBox, Path=DesiredSize.Height}" /> <ComboBox x:Name="dropBox" /> </Grid> 

Answer 9

In my case, a much simpler way seemed to do the trick, I just used an extra stackPanel to pack combobox.

 <StackPanel Grid.Row="1" Orientation="Horizontal"> <ComboBox ItemsSource="{Binding ExecutionTimesModeList}" Width="Auto" SelectedValuePath="Item" DisplayMemberPath="FriendlyName" SelectedValue="{Binding Model.SelectedExecutionTimesMode}" /> </StackPanel> 

(works in visual studio 2008)

Answer 10

I myself was looking for the answer when I came across the UpdateLayout() method that every UIElement .

It is very simple, fortunately!

Just call ComboBox1.Updatelayout(); after installing or modifying ItemSource .

Answer 11

As for me, the solution for the ComboBox.Width extension for the entire column width set the ColumnDefinition width to "*" instead of "Auto":

 <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="140" /> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Label Content="List of items" Grid.Column="0" Margin="3" /> <ComboBox Grid.Column="1" ItemsSource="{Binding Path=DestinationSubDivisions}" SelectedValue="{Binding Path=TransferRequest.DestinationSubDivision}" DisplayMemberPath="Name" Margin="3" /> </Grid> 

Answer 12

Alan Harford's approach to practice:

 <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <!-- hidden listbox that has all the items in one grid --> <ListBox ItemsSource="{Binding Items, ElementName=uiComboBox, Mode=OneWay}" Height="10" VerticalAlignment="Top" Visibility="Hidden"> <ListBox.ItemsPanel><ItemsPanelTemplate><Grid/></ItemsPanelTemplate></ListBox.ItemsPanel> </ListBox> <ComboBox VerticalAlignment="Top" SelectedIndex="0" x:Name="uiComboBox"> <ComboBoxItem>foo</ComboBoxItem> <ComboBoxItem>bar</ComboBoxItem> <ComboBoxItem>fiuafiouhoiruhslkfhalsjfhalhflasdkf</ComboBoxItem> </ComboBox> </Grid> 

Answer 13

Just add the width to the combo box

 <ComboBox Name="ComboBox1" HorizontalAlignment="Left" VerticalAlignment="Top" Width="100"> 

Answer 14

Keeps the width in the widest element, but only after you open the combo box.

 <ComboBox ItemsSource="{Binding ComboBoxItems}" Grid.IsSharedSizeScope="True" HorizontalAlignment="Left"> <ComboBox.ItemTemplate> <DataTemplate> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition SharedSizeGroup="sharedSizeGroup"/> </Grid.ColumnDefinitions> <TextBlock Text="{Binding}"/> </Grid> </DataTemplate> </ComboBox.ItemTemplate> </ComboBox>