WinUI3自定义AutoSuggestBox：弹窗宽度与内部控件访问问题

1. 让弹出的ListView宽度超过TextBox本身 #

WinUI3的AutoSuggestBox默认会使弹出面板宽度与TextBox保持一致，直接设置ListView的Width不会生效，需要修改弹出层容器的宽度：

• 方法一：通过SuggestionsFlyout直接设置
  显式定义SuggestionsFlyout，给内部的FlyoutPresenter指定固定宽度：

  <AutoSuggestBox PlaceholderText="输入内容">
      <AutoSuggestBox.SuggestionsFlyout>
          <Flyout>
              <FlyoutPresenter Width="250">
                  <ListView ItemsSource="{Binding Suggestions}" />
              </FlyoutPresenter>
          </Flyout>
      </AutoSuggestBox.SuggestionsFlyout>
  </AutoSuggestBox>
  

• 方法二：修改AutoSuggestBox自定义样式
  提取AutoSuggestBox的默认样式，找到其中的Popup或FlyoutPresenter元素，覆盖其默认的宽度绑定（默认绑定TextBox的ActualWidth），直接设置固定宽度：

  <!-- 在自定义样式的Popup节点内修改 -->
  <Popup x:Name="SuggestionsPopup">
      <FlyoutPresenter Width="250" ...>
          <ListView x:Name="SuggestionsList" ... />
      </FlyoutPresenter>
  </Popup>
  

2. 访问TextBox内部的QueryButton元素 #

要访问AutoSuggestBox模板内的QueryButton，需在自定义控件中使用TemplatePart标记，并在OnApplyTemplate方法中获取目标元素：

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;

[TemplatePart(Name = QueryButtonPartName, Type = typeof(Button))]
public class CustomAutoSuggestBox : AutoSuggestBox
{
    private const string QueryButtonPartName = "QueryButton";
    private Button _queryButton;

    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        
        // 卸载旧事件避免内存泄漏
        if (_queryButton != null)
        {
            _queryButton.Click -= QueryButton_Click;
        }
        
        // 获取模板内的QueryButton元素
        _queryButton = GetTemplateChild(QueryButtonPartName) as Button;
        
        if (_queryButton != null)
        {
            // 添加自定义逻辑，比如绑定点击事件
            _queryButton.Click += QueryButton_Click;
        }
    }

    private void QueryButton_Click(object sender, RoutedEventArgs e)
    {
        // 此处编写自定义处理逻辑
    }
}

注意：需确保模板内的QueryButton元素名称为QueryButton，可通过WinUI默认样式文件确认该名称。

3. AutoSuggestBox的源码是否公开 #

是的，WinUI3的AutoSuggestBox源码完全公开，属于Windows App SDK（WinUI）项目的一部分。

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