如何在XAML中设置WPF ComboBox宽度为最长项的尺寸？

我有如下ComboBox控件：

<ComboBox Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center"
          ItemsSource="{Binding Options}"
          SelectedItem="{Binding SelectedOption}"
          DisplayMemberPath="DisplayName"/>

Options集合的第一项的DisplayName始终为string.Empty，这导致ComboBox变得非常窄，因为无需空间显示空字符串。

是否可以在XAML中自动将ComboBox的宽度设置为ItemsSource中最长字符串的尺寸？我希望避免在.xaml.cs中测量最长项的宽度并设置。

若有需要，该ComboBox所在的Grid代码如下：

<Grid Margin="5" Height="500">
<Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
    <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

以下是几种无需后台代码（或仅需少量转换器代码）的纯XAML友好实现方式：

方法1：用隐藏ListBox做宽度参考 #

在Grid中添加一个隐藏的ListBox，绑定同一数据源，利用它自动适配最长内容的特性，将ComboBox的宽度绑定到这个ListBox的实际宽度：

<Grid Margin="5" Height="500">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <!-- 隐藏的ListBox，仅用于测量最长项宽度 -->
    <ListBox x:Name="HiddenWidthReference"
             Grid.Row="1"
             ItemsSource="{Binding Options}"
             DisplayMemberPath="DisplayName"
             Visibility="Collapsed"
             HorizontalAlignment="Left"/>

    <ComboBox Grid.Row="1" 
              HorizontalAlignment="Center" 
              VerticalAlignment="Center"
              ItemsSource="{Binding Options}"
              SelectedItem="{Binding SelectedOption}"
              DisplayMemberPath="DisplayName"
              Width="{Binding ActualWidth, ElementName=HiddenWidthReference}"/>
</Grid>

这个方式简单直接，ListBox隐藏后不影响界面，完美复用数据源的内容测量逻辑。

方法2：修改ComboBox模板强制宽度适配下拉项 #

自定义ComboBox的ControlTemplate，让下拉面板的最小宽度与主控件关联，同时确保主控件能容纳最长的下拉项内容：

<ComboBox Grid.Row="1" 
          HorizontalAlignment="Center" 
          VerticalAlignment="Center"
          ItemsSource="{Binding Options}"
          SelectedItem="{Binding SelectedOption}"
          DisplayMemberPath="DisplayName">
    <ComboBox.Template>
        <ControlTemplate TargetType="ComboBox">
            <Grid>
                <ToggleButton x:Name="ToggleButton"
                              IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                              ClickMode="Press"
                              Background="Transparent"
                              BorderBrush="{StaticResource {x:Static SystemColors.ControlBrushKey}}"
                              BorderThickness="1">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="20"/>
                        </Grid.ColumnDefinitions>
                        <ContentPresenter Grid.Column="0"
                                          Margin="3"
                                          Content="{TemplateBinding SelectionBoxItem}"
                                          ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"/>
                        <Path Grid.Column="1"
                              HorizontalAlignment="Center"
                              VerticalAlignment="Center"
                              Data="M0,0L4,4L8,0Z"
                              Fill="{StaticResource {x:Static SystemColors.ControlTextBrushKey}}"/>
                    </Grid>
                </ToggleButton>
                <Popup x:Name="Popup"
                       Placement="Bottom"
                       IsOpen="{TemplateBinding IsDropDownOpen}"
                       AllowsTransparency="True">
                    <Grid x:Name="DropDown"
                          MinWidth="{TemplateBinding ActualWidth}"
                          MaxHeight="{TemplateBinding MaxDropDownHeight}"
                          Background="{StaticResource {x:Static SystemColors.WindowBrushKey}}"
                          BorderBrush="{StaticResource {x:Static SystemColors.ActiveBorderBrushKey}}"
                          BorderThickness="1">
                        <ScrollViewer Margin="4">
                            <ItemsPresenter/>
                        </ScrollViewer>
                    </Grid>
                </Popup>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter Property="Foreground" Value="{StaticResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </ComboBox.Template>
</ComboBox>

核心是给Popup内的Grid设置MinWidth="{TemplateBinding ActualWidth}"，同时ComboBox会自动根据下拉项的最长内容调整自身初始宽度，避免空项导致的过窄问题。

方法3：用值转换器计算精确宽度 #

如果需要更精准的宽度控制，可以写一个轻量值转换器，在XAML中直接绑定计算结果（仅需少量转换器代码，无需在页面后台写逻辑）：

1. 首先定义转换器：

public class LongestItemWidthConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is IEnumerable items)
        {
            string longestText = string.Empty;
            foreach (var item in items)
            {
                string text = item.GetType().GetProperty("DisplayName")?.GetValue(item)?.ToString() ?? string.Empty;
                if (text.Length > longestText.Length)
                    longestText = text;
            }

            if (!string.IsNullOrEmpty(longestText))
            {
                var formattedText = new FormattedText(
                    longestText,
                    CultureInfo.CurrentCulture,
                    FlowDirection.LeftToRight,
                    new Typeface(new FontFamily("Segoe UI"), FontStyles.Normal, FontWeights.Normal, FontStretches.Normal),
                    12, // 匹配ComboBox默认字号
                    Brushes.Black);
                return formattedText.Width + 24; // 加入内边距和箭头按钮的宽度
            }
        }
        return double.NaN;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

2. 在XAML中引用并绑定：

<Window.Resources>
    <local:LongestItemWidthConverter x:Key="LongestItemWidthConverter"/>
</Window.Resources>

<ComboBox Grid.Row="1" 
          HorizontalAlignment="Center" 
          VerticalAlignment="Center"
          ItemsSource="{Binding Options}"
          SelectedItem="{Binding SelectedOption}"
          DisplayMemberPath="DisplayName"
          Width="{Binding Options, Converter={StaticResource LongestItemWidthConverter}}"/>

这种方式能精确计算最长文本的渲染宽度，加上预留空间后直接设置给ComboBox，彻底规避空项的影响。

内容的提问来源于stack exchange，提问作者eriyg