WinUI 3：创建集成结果计数标签的SearchTextBox控件

你需要创建一个直接继承WPF原生TextBox的自定义控件，集成搜索结果数量显示标签，且不能仅以资源样式形式存在。以下是完整实现方案：

1. 自定义控件XAML结构 #

直接继承TextBox，通过重写ControlTemplate重构布局，嵌入结果数量标签：

<TextBox x:Class="YourProjectNamespace.SearchTextBox"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:local="clr-namespace:YourProjectNamespace">
    <TextBox.Style>
        <Style TargetType="{x:Type local:SearchTextBox}" 
               BasedOn="{StaticResource {x:Type TextBox}}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type local:SearchTextBox}">
                        <Grid>
                            <!-- 保留原生TextBox核心输入区域 -->
                            <Border x:Name="border"
                                    Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    CornerRadius="4">
                                <ScrollViewer x:Name="PART_ContentHost" Margin="0"/>
                            </Border>
                            <!-- 结果数量标签，定位在输入框右下角 -->
                            <TextBlock x:Name="ResultCountLabel"
                                       Text="{TemplateBinding Tag}"
                                       HorizontalAlignment="Right"
                                       VerticalAlignment="Bottom"
                                       Margin="0 0 8 3"
                                       FontSize="10"
                                       Foreground="#666"/>
                        </Grid>
                        <!-- 保留原生TextBox的状态触发器 -->
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="border" Property="BorderBrush" Value="#FF7EB4EA"/>
                            </Trigger>
                            <Trigger Property="IsFocused" Value="True">
                                <Setter TargetName="border" Property="BorderBrush" Value="#FF569DE5"/>
                                <Setter TargetName="border" Property="BorderThickness" Value="2"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </TextBox.Style>
</TextBox>

2. 后台代码（可选，封装结果数量属性） #

如果不想用Tag传递结果数，可以自定义依赖属性实现更清晰的绑定：

using System.Windows;
using System.Windows.Controls;

namespace YourProjectNamespace
{
    public partial class SearchTextBox : TextBox
    {
        public static readonly DependencyProperty ResultCountProperty =
            DependencyProperty.Register(nameof(ResultCount), typeof(int), typeof(SearchTextBox),
                new PropertyMetadata(0, OnResultCountChanged));

        public int ResultCount
        {
            get => (int)GetValue(ResultCountProperty);
            set => SetValue(ResultCountProperty, value);
        }

        private static void OnResultCountChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            var textBox = (SearchTextBox)d;
            textBox.ResultCountLabel.Text = $"共 {e.NewValue} 条结果";
        }

        public SearchTextBox()
        {
            InitializeComponent();
        }
    }
}

修改XAML中标签的绑定为：Text="{TemplateBinding ResultCount}"即可。

3. 样式对比 #

• 原生TextBox：仅包含基础输入区域，无附加信息
  
• 自定义SearchTextBox：在输入框右下角集成结果数量标签，完全保留原生输入功能
  

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