如何修改Windows Community Toolkit中TokenizingTextBox的样式？

步骤1：提取默认样式模板 #

直接新建空Style会因缺少控件模板结构而无效，必须基于TokenizingTextBox的默认控件模板调整。操作方式：

• 在Visual Studio中打开包含TokenizingTextBox的XAML页面
• 右键设计器中的TokenizingTextBox控件 → 选择「编辑模板」→「编辑副本」
• 在弹出对话框中选择样式存放位置（当前页面Resources或应用级Resources），输入样式名称（如CustomTokenizingTextBoxStyle），点击确定
• Visual Studio会自动生成完整的默认样式及模板代码到指定资源区域

步骤2：调整核心样式属性 #

根据需求修改模板中对应元素的属性：

调整输入区域的字号、颜色与内边距 #

找到模板中命名为InputTextBox的TextBox元素，修改相关属性：

<TextBox x:Name="InputTextBox"
         FontSize="16"  <!-- 修改输入框字号 -->
         Foreground="#FF333333"  <!-- 修改输入文本颜色 -->
         Padding="8,6"  <!-- 修改输入框内边距 -->
         ... />

调整已选中Token的外观 #

找到模板中的DataTemplate（用于渲染Token），修改Token容器与文字属性：

<DataTemplate x:Key="CustomTokenTemplate">
    <Grid Background="#FFE0E0E0"  <!-- Token背景色 -->
          Padding="6,4"  <!-- Token内边距 -->
          CornerRadius="4">
        <TextBlock Text="{Binding}"
                   FontSize="14"  <!-- Token文字字号 -->
                   Foreground="#FF222222"  <!-- Token文字颜色 -->
                   Margin="0"/>
    </Grid>
</DataTemplate>

确保TokenizingTextBox引用该模板：

<controls:TokenizingTextBox x:Name="TokenizingTextBox"
                            TokenItemTemplate="{StaticResource CustomTokenTemplate}"
                            ... />

调整控件整体内边距 #

找到模板最外层命名为ControlRoot的Border元素，修改内边距：

<Border x:Name="ControlRoot"
        Padding="4"  <!-- 控件整体内边距 -->
        ... />

步骤3：应用自定义样式 #

在页面的TokenizingTextBox控件上，通过Style属性引用自定义样式：

<controls:TokenizingTextBox x:Name="MyTokenizingTextBox"
                            Style="{StaticResource CustomTokenizingTextBoxStyle}"
                            PlaceholderText="输入并按回车添加标签" />

完整示例代码 #

以下是整合后的XAML代码示例：

<Page
    x:Class="TokenizingTextBoxDemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <DataTemplate x:Key="CustomTokenTemplate">
            <Grid Background="#FFE8F4FD"
                  Padding="8,4"
                  CornerRadius="6">
                <TextBlock Text="{Binding}"
                           FontSize="14"
                           Foreground="#FF165DFF"
                           FontWeight="Medium"/>
            </Grid>
        </DataTemplate>

        <Style x:Key="CustomTokenizingTextBoxStyle" TargetType="controls:TokenizingTextBox">
            <Setter Property="TokenItemTemplate" Value="{StaticResource CustomTokenTemplate}"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="controls:TokenizingTextBox">
                        <Border x:Name="ControlRoot"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Padding="6"
                                CornerRadius="8">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <ScrollViewer x:Name="ScrollViewer"
                                              VerticalScrollBarVisibility="Hidden"
                                              HorizontalScrollBarVisibility="Auto"
                                              HorizontalScrollMode="Auto"
                                              VerticalScrollMode="Disabled"
                                              ZoomMode="Disabled"
                                              AutomationProperties.AccessibilityView="Raw">
                                    <controls:TokenPanel x:Name="TokenPanel"
                                                          Margin="0"
                                                          Padding="0"
                                                          HorizontalAlignment="Left"
                                                          VerticalAlignment="Center"
                                                          TokenRemoved="TokenPanel_TokenRemoved">
                                        <TextBox x:Name="InputTextBox"
                                                 Style="{StaticResource TokenizingTextBoxTextBoxStyle}"
                                                 FontSize="16"
                                                 Foreground="#FF2D2D2D"
                                                 Padding="8,6"
                                                 PlaceholderText="{TemplateBinding PlaceholderText}"
                                                 Text="{TemplateBinding Text}"
                                                 SelectionStart="{TemplateBinding SelectionStart}"
                                                 SelectionLength="{TemplateBinding SelectionLength}"
                                                 AcceptsReturn="False"
                                                 HorizontalAlignment="Left"
                                                 VerticalAlignment="Center"
                                                 MinWidth="{ThemeResource TextThemeMinWidth}"
                                                 UseSystemFocusVisuals="True"/>
                                    </controls:TokenPanel>
                                </ScrollViewer>
                                <Button x:Name="DeleteButton"
                                        Grid.Column="1"
                                        Style="{StaticResource TokenizingTextBoxDeleteButtonStyle}"
                                        Visibility="Collapsed"
                                        Width="32"
                                        Height="32"
                                        VerticalAlignment="Center"
                                        Margin="4,0,0,0"/>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <controls:TokenizingTextBox x:Name="DemoTokenTextBox"
                                    Style="{StaticResource CustomTokenizingTextBoxStyle}"
                                    PlaceholderText="输入标签，按回车添加"
                                    Margin="40"/>
    </Grid>
</Page>

注意事项 #

• 确保已安装Microsoft.Toolkit.Uwp.UI.Controls NuGet包
• 修改样式时保留模板原有命名与结构，避免破坏控件交互逻辑
• 若需修改焦点、hover等状态样式，可在模板的VisualStateManager中调整对应VisualState

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