WINUI 3自定义带左侧图标的TextBox无法输入内容问题求助

你实现的带左侧图标的TextBox视觉效果符合预期，但无法输入内容，核心问题出在模板布局和PART_ContentHost的空间分配上。

问题根源 #

1. 原模板用StackPanel作为容器，它不会自动将剩余空间分配给内部的ScrollViewer，导致输入区域没有可交互的空间。
2. Border作为独立元素放在Grid里，没有作为布局根节点，可能导致焦点获取异常。

修正后的TextBox代码 #

<TextBox Width="250" Height="32" IsEnabled="True">
    <TextBox.Template>
        <ControlTemplate TargetType="TextBox">
            <!-- Border作为根元素，确保布局和焦点区域正确 -->
            <Border Background="{TemplateBinding Background}" 
                    BorderBrush="{TemplateBinding BorderBrush}" 
                    BorderThickness="{TemplateBinding BorderThickness}" 
                    CornerRadius="5">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <!-- 图标列占自动宽度 -->
                        <ColumnDefinition Width="Auto"/>
                        <!-- 输入区域占剩余全部宽度 -->
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <!-- 左侧图标 -->
                    <TextBlock FontFamily="Segoe MDL2 Assets" 
                               Text="&#xF180;" 
                               FontSize="16" 
                               Margin="15,0,5,0" 
                               VerticalAlignment="Center"/>
                    <!-- 输入内容容器，必须命名为PART_ContentHost，且占据剩余空间 -->
                    <ScrollViewer x:Name="PART_ContentHost" 
                                  Grid.Column="1" 
                                  Margin="0,0,15,0" 
                                  VerticalAlignment="Center"/>
                </Grid>
            </Border>
        </ControlTemplate>
    </TextBox.Template>
</TextBox>

密码框（PasswordBox）的实现 #

如果需要做密码输入框，只需要替换控件类型，模板逻辑一致：

<PasswordBox Width="250" Height="32" IsEnabled="True">
    <PasswordBox.Template>
        <ControlTemplate TargetType="PasswordBox">
            <Border Background="{TemplateBinding Background}" 
                    BorderBrush="{TemplateBinding BorderBrush}" 
                    BorderThickness="{TemplateBinding BorderThickness}" 
                    CornerRadius="5">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <!-- 密码图标 -->
                    <TextBlock FontFamily="Segoe MDL2 Assets" 
                               Text="&#xF1F9;" 
                               FontSize="16" 
                               Margin="15,0,5,0" 
                               VerticalAlignment="Center"/>
                    <ScrollViewer x:Name="PART_ContentHost" 
                                  Grid.Column="1" 
                                  Margin="0,0,15,0" 
                                  VerticalAlignment="Center"/>
                </Grid>
            </Border>
        </ControlTemplate>
    </PasswordBox.Template>
</PasswordBox>

关键修正点 #

• 用Grid替代StackPanel：通过列定义精确分配图标和输入区域的空间，确保输入区域能占据剩余宽度。
• 将Border作为模板根元素：保证点击输入框时能正确获取焦点，同时统一背景和边框样式。
• 正确设置PART_ContentHost的位置：让它处于输入区域，确保用户输入的内容能正确显示和交互。

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