WinUI 3中如何创建可超出父控件范围展开的自定义控件

嘿，我完全懂你想要的效果！就是做一个类似系统AutoSuggestBox那样的控件——输入内容后，能展开一块不受父容器限制的悬浮区域，和输入框无缝衔接，还能放按钮这类交互元素对吧？你之前尝试用Flyout的思路其实挺靠谱的，我给你细化下实现方案，再补充另一种更灵活的Popup方案，你可以按需选~

方案一：基于Flyout实现（贴合你已有的尝试） #

Flyout本身就是为弹出式内容设计的，只要调整样式和触发逻辑，就能做出“展开延伸”的效果，而且自带系统级的交互体验（比如点击外部自动收起）。

实现步骤： #

1. 把TextBox和Flyout绑定，让Flyout的触发和输入内容、焦点状态关联
2. 调整FlyoutPresenter的样式，让它和TextBox视觉上连为一体，并且不受父控件约束
3. 编写简单的后台逻辑，控制展开/收起的时机

完整代码示例： #

<TextBox x:Name="InputBox" PlaceholderText="输入内容展开菜单"
         GotFocus="InputBox_GotFocus" TextChanged="InputBox_TextChanged">
    <TextBox.Flyout>
        <Flyout x:Name="ExpandFlyout" Placement="Bottom"
                IsOpen="{Binding ElementName=InputBox, Path=IsFocused, Mode=TwoWay}">
            <Flyout.FlyoutPresenterStyle>
                <Style TargetType="FlyoutPresenter">
                    <!-- 去掉默认边距，让Flyout和TextBox无缝衔接 -->
                    <Setter Property="Margin" Value="0"/>
                    <Setter Property="Padding" Value="4"/>
                    <!-- 匹配TextBox的边框，只保留底部和左右边框，模拟延伸效果 -->
                    <Setter Property="BorderThickness" Value="1,0,1,1"/>
                    <Setter Property="BorderBrush" Value="{ThemeResource TextControlBorderBrush}"/>
                    <!-- 强制Flyout宽度和TextBox一致，避免宽度错乱 -->
                    <Setter Property="MinWidth" Value="{Binding ElementName=InputBox, Path=ActualWidth}"/>
                </Style>
            </Flyout.FlyoutPresenterStyle>
            <!-- 这里放你需要展开的内容，比如按钮组、列表等 -->
            <StackPanel Orientation="Vertical">
                <Button Content="快速操作1" Margin="0,2,0,2"/>
                <Button Content="快速操作2" Margin="0,2,0,2"/>
                <Button Content="更多选项" Margin="0,2,0,2"/>
            </StackPanel>
        </Flyout>
    </TextBox.Flyout>
</TextBox>

后台C#逻辑：

private void InputBox_TextChanged(object sender, TextChangedEventArgs e)
{
    if (sender is TextBox textBox)
    {
        // 输入内容不为空时展开，为空则自动收起
        ExpandFlyout.IsOpen = !string.IsNullOrWhiteSpace(textBox.Text);
    }
}

private void InputBox_GotFocus(object sender, RoutedEventArgs e)
{
    if (sender is TextBox textBox && !string.IsNullOrWhiteSpace(textBox.Text))
    {
        // 获得焦点时如果已有内容，自动展开
        ExpandFlyout.IsOpen = true;
    }
}

方案二：基于Popup实现（更灵活的自定义） #

如果需要更复杂的自定义逻辑，Popup是更好的选择——它天生就可以突破父控件的布局限制，完全自由控制位置和内容。

实现步骤： #

1. 在布局中添加TextBox和Popup，把Popup的PlacementTarget绑定到TextBox
2. 调整Popup的样式，让它和TextBox视觉统一
3. 同样通过后台逻辑控制IsOpen状态

完整代码示例： #

<Grid>
    <TextBox x:Name="InputBox" PlaceholderText="输入内容展开菜单"
             TextChanged="InputBox_TextChanged" GotFocus="InputBox_GotFocus"
             LostFocus="InputBox_LostFocus"/>
    <Popup x:Name="ExpandPopup" PlacementTarget="{x:Bind InputBox}" Placement="Bottom"
           IsOpen="False">
        <!-- Popup的内容容器，样式匹配TextBox -->
        <Border Width="{Binding ElementName=InputBox, Path=ActualWidth}"
                BorderThickness="1,0,1,1"
                BorderBrush="{ThemeResource TextControlBorderBrush}"
                Background="{ThemeResource TextControlBackground}">
            <StackPanel Orientation="Vertical" Padding="4">
                <Button Content="选项A" Margin="0,2,0,2"/>
                <Button Content="选项B" Margin="0,2,0,2"/>
                <Button Content="选项C" Margin="0,2,0,2"/>
            </StackPanel>
        </Border>
    </Popup>
</Grid>

后台C#逻辑：

private void InputBox_TextChanged(object sender, TextChangedEventArgs e)
{
    if (sender is TextBox textBox)
    {
        ExpandPopup.IsOpen = !string.IsNullOrWhiteSpace(textBox.Text);
    }
}

private void InputBox_GotFocus(object sender, RoutedEventArgs e)
{
    if (sender is TextBox textBox && !string.IsNullOrWhiteSpace(textBox.Text))
    {
        ExpandPopup.IsOpen = true;
    }
}

private void InputBox_LostFocus(object sender, RoutedEventArgs e)
{
    // 失去焦点时自动收起
    ExpandPopup.IsOpen = false;
}

一些实用小技巧： #

• 样式统一：尽量使用WinUI 3的主题资源（比如TextControlBorderBrush、TextControlBackground），这样你的控件会自动适配系统的浅色/深色模式
• 复用性优化：如果这个控件需要在多个页面使用，建议把它封装成UserControl，把逻辑和UI都打包进去，方便调用
• 交互细节：可以添加动画效果（比如展开/收起的淡入淡出），提升用户体验，用WinUI的ImplicitAnimation就能轻松实现

备注：内容来源于stack exchange，提问作者Eric Nien