WinUI3中如何让ComboBox弹窗根据可用空间调整位置？

问题分析 #

直接给Popup设置固定HorizontalOffset=50会覆盖系统的自动位置调整逻辑，导致弹窗无法根据屏幕可用空间自动切换左右方向。要实现自定义偏移+自动适配，需要把固定偏移和系统的空间检测逻辑结合起来。

XAML层面解决方案（结合值转换器） #

1. 先定义一个值转换器，用于根据当前控件位置和屏幕空间动态计算偏移量：

public class ComboBoxOffsetConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value is ComboBox comboBox)
        {
            // 获取ComboBox在屏幕上的位置
            var screenPos = comboBox.TransformToVisual(null).TransformPoint(new Point(0, 0));
            // 获取弹窗的预估宽度（可根据实际模板调整）
            var popupWidth = comboBox.ActualWidth;
            // 获取屏幕可用宽度
            var screenWidth = Window.Current.Bounds.Width;

            // 计算向右偏移50后的右边界位置
            var rightEdge = screenPos.X + comboBox.ActualWidth + 50 + popupWidth;
            // 超出屏幕则向左偏移50，否则向右偏移50
            return rightEdge > screenWidth ? -50 : 50;
        }
        return 0;
    }

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

2. 在XAML的ComboBox模板中，修改Opened状态的Setter，绑定到转换器：

<!-- 先在页面资源中声明转换器 -->
<Page.Resources>
    <local:ComboBoxOffsetConverter x:Key="ComboBoxOffsetConverter"/>
</Page.Resources>

<!-- 修改ComboBox模板中的VisualState -->
<VisualStateGroup x:Name="DropDownStates">
    <VisualState x:Name="Opened">
        <VisualState.Setters>
            <Setter Target="Popup.HorizontalOffset"
                    Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource ComboBoxOffsetConverter}}" />
        </VisualState.Setters>
        <Storyboard>
            <SplitOpenThemeAnimation OpenedTargetName="PopupBorder"
                                     ClosedTargetName="ContentPresenter"
                                     OffsetFromCenter="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOffset}" />
        </Storyboard>
    </VisualState>
    <!-- Closed状态保留原代码 -->
    <VisualState x:Name="Closed">
        <Storyboard>
            <SplitCloseThemeAnimation OpenedTargetName="PopupBorder"
                                      ClosedTargetName="ContentPresenter"
                                      OffsetFromCenter="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOffset}" />
        </Storyboard>
    </VisualState>
</VisualStateGroup>

C#代码层面解决方案（事件监听） #

通过监听ComboBox的DropDownOpened事件，在弹窗打开时动态计算并设置偏移：

private void ComboBox_DropDownOpened(object sender, EventArgs e)
{
    if (sender is ComboBox comboBox)
    {
        // 从模板中获取Popup控件
        var popup = comboBox.Template.FindName("Popup", comboBox) as Popup;
        if (popup == null) return;

        var screenPos = comboBox.TransformToVisual(null).TransformPoint(new Point(0, 0));
        var popupWidth = comboBox.ActualWidth;
        var screenWidth = Window.Current.Bounds.Width;

        var rightEdge = screenPos.X + comboBox.ActualWidth + 50 + popupWidth;
        popup.HorizontalOffset = rightEdge > screenWidth ? -50 : 50;
    }
}

然后在XAML中给ComboBox绑定事件：

<ComboBox DropDownOpened="ComboBox_DropDownOpened" />

注意事项 #

• 示例中的popupWidth如果是自定义模板的弹窗宽度，建议根据模板中PopupBorder的实际宽度获取，结果更准确。
• 如果需要适配多屏幕、任务栏位置等复杂场景，可以扩展转换器或事件处理代码，补充对应的空间判断逻辑。

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