WPF中展示国际象棋走法的最佳可交互控件选型咨询

最适配你需求的WPF控件是搭配自定义数据模板的ItemsControl，完全匹配走法流式排版、单步点击交互、选中加粗高亮、绑定业务逻辑的全部要求，比其他富文本类控件轻量、维护成本低。

核心思路是把每一步独立走法（比如d4、Nf6、Bxf6）拆成独立的数据项，用WrapPanel做项容器实现自动流式换行，通过数据绑定控制选中样式，不需要做复杂的文本命中测试。

1. 定义走法数据模型 #

实现INotifyPropertyChanged接口，支持选中状态变更自动通知UI更新：

public class ChessMove : INotifyPropertyChanged
{
    /// <summary>
    /// 回合序号，比如1、2、3
    /// </summary>
    public int RoundNumber { get; set; }
    /// <summary>
    /// 是否为白方走法，用来控制序号显示
    /// </summary>
    public bool IsWhiteMove { get; set; }
    /// <summary>
    /// 走法文本，比如Bxf6
    /// </summary>
    public string MoveText { get; set; }

    private bool _isSelected;
    /// <summary>
    /// 是否为当前选中高亮的走法
    /// </summary>
    public bool IsSelected
    {
        get => _isSelected;
        set
        {
            _isSelected = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
    }
}

2. 编写控件XAML模板 #

用WrapPanel做ItemsPanel实现走法自动横向排列、空间不足时自动换行，和你给出的示例排版完全一致；每个走法的字体粗细直接绑定IsSelected属性，点击事件直接关联处理逻辑：

<!-- 先引入你项目里ChessMove类所在的命名空间，比如local -->
<ItemsControl x:Name="MovesContainer"
              ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal" Margin="8"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate DataType="{x:Type local:ChessMove}">
            <StackPanel Orientation="Horizontal" Margin="4,0">
                <!-- 仅白方走法前显示回合序号，比如"3. " -->
                <TextBlock Text="{Binding RoundNumber, StringFormat='{}{0}. '}"
                           Margin="0,0,2,0">
                    <TextBlock.Style>
                        <Style TargetType="TextBlock">
                            <Setter Property="Visibility" Value="Collapsed"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding IsWhiteMove}" Value="True">
                                    <Setter Property="Visibility" Value="Visible"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </TextBlock.Style>
                </TextBlock>
                <TextBlock Text="{Binding MoveText}"
                           Cursor="Hand"
                           MouseLeftButtonUp="OnMoveClicked">
                    <TextBlock.Style>
                        <Style TargetType="TextBlock">
                            <Setter Property="FontWeight" Value="Normal"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding IsSelected}" Value="True">
                                    <Setter Property="FontWeight" Value="Bold"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </TextBlock.Style>
                </TextBlock>
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

3. 编写交互逻辑 #

点击走法时更新选中状态，直接调用对应业务逻辑即可，不需要额外解析文本位置：

// 初始化时把所有走法加载到绑定的集合里
private readonly List<ChessMove> _allMoves = new();

private void OnMoveClicked(object sender, MouseButtonEventArgs e)
{
    if (sender is not TextBlock { DataContext: ChessMove clickedMove }) return;
    
    // 更新选中状态，自动触发UI加粗高亮
    foreach (var move in _allMoves)
    {
        move.IsSelected = move == clickedMove;
    }
    
    // 这里写你需要执行的业务逻辑，比如棋盘跳转到对应走法的局面
    RunMoveRelatedLogic(clickedMove);
}

以下控件不适合这个场景，别踩坑：

• 不要用RichTextBox：控件太重，需要手动管理TextRange样式，点击命中要计算字符偏移，后续关联走法数据的逻辑非常难维护
• 不要用普通TextBlock内联Run元素：Run虽然能加点击事件，但样式更新需要手动遍历UI树，数据绑定逻辑别扭，走法数量多的时候性能差
• 不要用默认ListBox：自带选中边框、列表项默认边距等冗余样式，需要重写大量模板去掉多余效果，不如直接用无内置交互包袱的ItemsControl轻便

最终实现的排版效果和你给出的示例完全一致：

1. d4 Nf6 2. Bg5 d5 3. Bxf6 gxf6 4. Nf3 Nc6 5. e3 Bg4 6. Be2 e5 7. c3 Qd7 8. Nbd2 O-O-O 9. Qa4 e4 10. Ng1 Bxe2 11. Nxe2 Qg4 12. g3 h5 13. h3 Qf5 14. h4 Kb8

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