如何在TokenizingTextBox中添加按钮触发DialogBox或修改默认+按钮行为？

一、修改默认“+”按钮（QueryIcon）的点击行为 #

TokenizingTextBox 自带的 QueryIconClick 事件就是用来响应右上角“+”图标的点击操作，直接绑定该事件即可实现弹窗需求：

1. XAML 中添加事件绑定 #

修改你的 TokenizingTextBox 标签，新增 QueryIconClick 事件绑定：

<!--Add tokenized text box-->
<controls:TokenizingTextBox
    x:Name="TokenBox"   
    ItemsSource="{x:Bind  ViewModel.SelectedTokens  }"
    PlaceholderText="Add Locations"                  
    MaxHeight="104"
    HorizontalAlignment="Stretch"
    TextMemberPath="Text"
    TokenDelimiter=","
    MaximumTokens="3" 
    Grid.Row="1" Grid.Column="0"
    Text="{x:Bind ViewModel.StateMachineScanPath}"
    QueryIconClick="TokenBox_QueryIconClick"> <!-- 添加事件绑定 -->
    <controls:TokenizingTextBox.SuggestedItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <SymbolIcon Symbol="Accept"/>
                <TextBlock Text="{x:Bind Mode=TwoWay}" Padding="4,0,0,0"/>
            </StackPanel>
        </DataTemplate>
    </controls:TokenizingTextBox.SuggestedItemTemplate>
    <controls:TokenizingTextBox.QueryIcon >
        <SymbolIconSource Symbol="Add"/>                        
    </controls:TokenizingTextBox.QueryIcon>
</controls:TokenizingTextBox>

2. 后台代码实现弹窗逻辑 #

在对应的 .xaml.cs 文件中添加事件处理方法：

private async void TokenBox_QueryIconClick(object sender, RoutedEventArgs e)
{
    // 创建并弹出自定义弹窗，这里以 ContentDialog 为例
    var dialog = new ContentDialog
    {
        Title = "添加位置",
        Content = "请输入或选择目标位置",
        PrimaryButtonText = "确认",
        CloseButtonText = "取消"
    };

    var result = await dialog.ShowAsync();
    if (result == ContentDialogResult.Primary)
    {
        // 这里可添加确认后的逻辑，比如将选中内容加入 Token 列表
        // ViewModel.SelectedTokens.Add(new YourTokenModel { Text = "新位置" });
    }
}

二、在 TokenizingTextBox 中添加额外独立按钮 #

如果需要在控件内新增独立按钮，需自定义 TokenizingTextBox 的 ControlTemplate，将按钮插入到合适的布局位置：

1. 自定义 ControlTemplate #

复制官方默认模板并修改，添加自定义按钮（示例中在原“+”按钮右侧新增按钮）：

<controls:TokenizingTextBox
    x:Name="TokenBox"   
    ItemsSource="{x:Bind  ViewModel.SelectedTokens  }"
    PlaceholderText="Add Locations"                  
    MaxHeight="104"
    HorizontalAlignment="Stretch"
    TextMemberPath="Text"
    TokenDelimiter=","
    MaximumTokens="3" 
    Grid.Row="1" Grid.Column="0"
    Text="{x:Bind ViewModel.StateMachineScanPath}">
    <controls:TokenizingTextBox.SuggestedItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <SymbolIcon Symbol="Accept"/>
                <TextBlock Text="{x:Bind Mode=TwoWay}" Padding="4,0,0,0"/>
            </StackPanel>
        </DataTemplate>
    </controls:TokenizingTextBox.SuggestedItemTemplate>
    <controls:TokenizingTextBox.QueryIcon >
        <SymbolIconSource Symbol="Add"/>                        
    </controls:TokenizingTextBox.QueryIcon>
    <!-- 自定义控件模板 -->
    <controls:TokenizingTextBox.Template>
        <ControlTemplate TargetType="controls:TokenizingTextBox">
            <Grid x:Name="LayoutRoot">
                <VisualStateManager.VisualStateGroups>
                    <!-- 保留原有的视觉状态，可从官方模板复制完整内容 -->
                </VisualStateManager.VisualStateGroups>
                <Border x:Name="BorderElement"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="{TemplateBinding CornerRadius}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/> <!-- 新增列放置自定义按钮 -->
                        </Grid.ColumnDefinitions>
                        <!-- 原有 Token 展示与输入区域 -->
                        <controls:TokenPanel x:Name="TokenPanel"
                                             Margin="{TemplateBinding Padding}"
                                             HorizontalAlignment="Left"
                                             VerticalAlignment="Center"
                                             AllowDrop="True"
                                             CanReorderItems="{TemplateBinding CanReorderItems}"
                                             ItemsSource="{TemplateBinding ItemsSource}"
                                             ItemTemplate="{TemplateBinding TokenTemplate}"
                                             PlaceholderText="{TemplateBinding PlaceholderText}"
                                             TextMemberPath="{TemplateBinding TextMemberPath}"/>
                        <!-- 原有 QueryIcon 按钮 -->
                        <Button x:Name="QueryIconButton"
                                Grid.Column="1"
                                Margin="4"
                                Style="{StaticResource IconButtonStyle}"
                                Visibility="{TemplateBinding QueryIconVisibility}">
                            <IconElementPresenter x:Name="QueryIconPresenter"
                                                  IconSource="{TemplateBinding QueryIcon}"
                                                  Foreground="{TemplateBinding Foreground}"/>
                        </Button>
                        <!-- 新增的自定义按钮 -->
                        <Button x:Name="CustomAddButton"
                                Grid.Column="2"
                                Margin="4"
                                Style="{StaticResource IconButtonStyle}"
                                Click="CustomAddButton_Click">
                            <SymbolIcon Symbol="Add"/>
                        </Button>
                    </Grid>
                </Border>
            </Grid>
        </ControlTemplate>
    </controls:TokenizingTextBox.Template>
</controls:TokenizingTextBox>

2. 后台处理自定义按钮点击事件 #

在 .xaml.cs 文件中添加按钮点击逻辑：

private async void CustomAddButton_Click(object sender, RoutedEventArgs e)
{
    // 弹窗逻辑与之前一致
    var dialog = new ContentDialog
    {
        Title = "添加位置",
        Content = "请输入或选择目标位置",
        PrimaryButtonText = "确认",
        CloseButtonText = "取消"
    };

    var result = await dialog.ShowAsync();
    if (result == ContentDialogResult.Primary)
    {
        // 处理确认后的 Token 添加逻辑
        // ViewModel.SelectedTokens.Add(new YourTokenModel { Text = "新位置" });
    }
}

注意：自定义模板时建议先复制官方 TokenizingTextBox 的完整默认模板，再在其基础上修改，避免丢失原有交互逻辑与视觉状态。

内容的提问来源于stack exchange，提问作者Maks V. Zaikin