WinUI3桌面应用：ComboBox下拉展开/收起时显示不同属性

核心思路 #

要实现下拉展开时显示Foo、收起时显示Bar的效果，我们可以拆分两部分控制：

• 下拉列表中的项固定显示Foo属性
• ComboBox的主显示区域（选中项）根据IsDropDownOpen状态动态切换显示Foo或Bar

方案一：使用MultiBinding转换器（推荐） #

这种方式更简洁，通过转换器直接根据状态返回对应文本。

1. 创建显示转换器

实现IMultiValueConverter，接收选中的FooBar对象和IsDropDownOpen状态，返回要显示的文本：

public class FooBarDisplayConverter : IMultiValueConverter
{
    public object Convert(object[] values, Type targetType, object parameter, string language)
    {
        if (values.Length == 2 && values[0] is FooBar fooBar && values[1] is bool isDropDownOpen)
        {
            return isDropDownOpen ? fooBar.Foo : fooBar.Bar;
        }
        return string.Empty;
    }

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

2. 在XAML中配置ComboBox

• 设置ItemTemplate让下拉项显示Foo
• 通过ContentTemplate结合MultiBinding，让主显示区域根据状态切换文本
• 修正SelectedItem绑定（原代码中SelectedIndex绑定对象类型不匹配，需改为SelectedItem）

<Page.Resources>
    <local:FooBarDisplayConverter x:Key="FooBarDisplayConverter" />
</Page.Resources>

<Grid x:Name="ContentArea">
    <ComboBox x:Name="TheComboBox"
              SelectedItem="{x:Bind ViewModel.SelectedFooBar, Mode=TwoWay}"
              ItemsSource="{x:Bind classes:FooBar.FooBars}">
        <!-- 下拉列表项固定显示Foo -->
        <ComboBox.ItemTemplate>
            <DataTemplate x:DataType="classes:FooBar">
                <TextBlock Text="{x:Bind Foo}" />
            </DataTemplate>
        </ComboBox.ItemTemplate>
        <!-- 选中项动态切换显示内容 -->
        <ComboBox.ContentTemplate>
            <DataTemplate x:DataType="classes:FooBar">
                <TextBlock>
                    <TextBlock.Text>
                        <MultiBinding Converter="{StaticResource FooBarDisplayConverter}">
                            <Binding Path="." />
                            <Binding ElementName="TheComboBox" Path="IsDropDownOpen" />
                        </MultiBinding>
                    </TextBlock.Text>
                </TextBlock>
            </DataTemplate>
        </ComboBox.ContentTemplate>
    </ComboBox>
</Grid>

方案二：使用BooleanToVisibilityConverter切换文本 #

如果偏好通过可见性控制文本显示，可以用这种方式：

1. 创建布尔值转可见性转换器

public class BooleanToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value is bool boolValue)
        {
            // 支持反向转换（参数为Inverse时取反）
            if (parameter?.ToString() == "Inverse")
            {
                boolValue = !boolValue;
            }
            return boolValue ? Visibility.Visible : Visibility.Collapsed;
        }
        return Visibility.Collapsed;
    }

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

2. XAML配置

<Page.Resources>
    <local:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</Page.Resources>

<Grid x:Name="ContentArea">
    <ComboBox x:Name="TheComboBox"
              SelectedItem="{x:Bind ViewModel.SelectedFooBar, Mode=TwoWay}"
              ItemsSource="{x:Bind classes:FooBar.FooBars}">
        <ComboBox.ItemTemplate>
            <DataTemplate x:DataType="classes:FooBar">
                <TextBlock Text="{x:Bind Foo}" />
            </DataTemplate>
        </ComboBox.ItemTemplate>
        <ComboBox.ContentTemplate>
            <DataTemplate x:DataType="classes:FooBar">
                <TextBlock>
                    <!-- 收起时显示Bar -->
                    <Run Text="{x:Bind Bar}" 
                         Visibility="{x:Bind ElementName=TheComboBox, Path=IsDropDownOpen, Converter={StaticResource BooleanToVisibilityConverter}, ConverterParameter=Inverse}" />
                    <!-- 展开时显示Foo -->
                    <Run Text="{x:Bind Foo}" 
                         Visibility="{x:Bind ElementName=TheComboBox, Path=IsDropDownOpen, Converter={StaticResource BooleanToVisibilityConverter}}" />
                </TextBlock>
            </DataTemplate>
        </ComboBox.ContentTemplate>
    </ComboBox>
</Grid>

注意事项 #

• 避免动态修改ItemTemplate或ItemsSource：这会触发ComboBox重新加载项，导致SelectedItemChanged事件意外触发，也就是你之前遇到的问题。
• 绑定类型匹配：原代码中SelectedIndex绑定的是FooBar对象，类型不匹配，必须改为SelectedItem绑定对象，SelectedIndex是绑定整数索引的。

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