C# WPF使用ListBox快速实现高性能尺子控件

Oliver

发布时间：2026-10-15 | 4人浏览过

原创

在客户端开发中，尺子控件常用于白板和视频编辑等场景。本文分享一种基于WPF ListBox虚拟化容器实现的轻量级水平尺子方案，通过DataTemplate定义刻度样式并绑定数据，无需自定义控件即可获得高性能绘制效果。

结果与目标

在WPF应用中实现一个水平的、支持平滑滚动的标尺控件。该控件应能根据数据模型动态渲染刻度线和数字，并针对大数量级数据（如百万刻度）保持流畅的滚动性能，避免界面卡顿。

准备条件

Windows 操作系统及 .NET Framework/.NET Core/5+ WPF 环境
C# 基础编程能力与 XAML 语法熟悉度
理解 ListBox 的数据绑定机制与 VirtualizingStackPanel 的虚拟化原理

真实操作顺序

第1步：设置横向虚拟化容器

目的：将默认的垂直 ListBox 改为横向显示，并使用虚拟化面板提升性能。

入口：XAML UI 布局代码

动作：重写 ItemsPanel，将默认的堆叠面板替换为 VirtualizingStackPanel，并将 Orientation 属性设置为 Horizontal。

<ListBox.ItemsPanel>
    <ItemsPanelTemplate>
        <VirtualizingStackPanel Orientation="Horizontal"/>
    </ItemsPanelTemplate>
</ListBox.ItemsPanel>

第2步：定义刻度的可视化样式

目的：通过 DataTemplate 描述每个刻度项的外观，包括刻度线长度、数字文本及交互状态。

入口：ListBox 的 ItemTemplate 属性

动作：创建一个包含 TextBlock 和 Line 的垂直排列 StackPanel。利用 Binding 映射数据源中的数值和可见性。

<ListBox.ItemTemplate>
    <DataTemplate>
        <StackPanel Width="10" Height="46" Orientation="Vertical" Background="Transparent">
            <!-- 数字文本 -->
            <TextBlock x:Name="text" Margin="0,6,0,6" HorizontalAlignment="Center" 
                       FontSize="16" Text="{Binding Number}" 
                       Foreground="#ffffff" Visibility="{Binding NumberVisibility}" />
            <!-- 刻度线 -->
            <Line x:Name="line" HorizontalAlignment="Center" Height="20" Width="5" 
                  X1="2.5" Y1="0" X2="2.5" Y2="25" StrokeThickness="1" Stroke="#aaaaaa" />
        </StackPanel>
    </DataTemplate>
</ListBox.ItemTemplate>

第3步：构建数据模型

目的：定义用于驱动 UI 展示的基础数据结构。

入口：C# 后端逻辑类 (MainWindow.xaml.cs)

动作：创建 RulerChip 类，包含 Number（当前刻度值）和 NumberVisibility（是否显示数字）属性。在 MainWindow 中实例化一个 List 集合。

public class RulerChip
{
    public double Number { get; set; }
    public Visibility NumberVisibility { get; set; }
}

// 在 Window 类中暴露集合
public List<RulerChip> Chips { get; set; } = new List<RulerChip>();

第4步：填充数据并连接视图

目的：生成实际的刻度数据，并将 DataContext 绑定到视图。

入口：Window 构造函数或 Loaded 事件

动作：初始化 DataContext，通过循环添加 RulerChip 对象。利用取模运算 (i % 10 == 0) 决定每隔 10 个单位显示一次数字，其余隐藏以保持界面整洁。

DataContext = this;
for (int i = 0; i < 100; i++)
{
    // 每10个单位显示一次数字，其余隐藏
    Chips.Add(new RulerChip() {
        Number = i / 10.0,
        NumberVisibility = (i % 10 == 0) ? Visibility.Visible : Visibility.Hidden
    });
}

第5步：完善整体结构与交互反馈

目的：提供完整的 XAML 结构，增强鼠标悬停时的视觉提示。

入口：完整 MainWindow.xaml

动作：配置 ScrollViewer.HorizontalScrollBarVisibility="Disabled" 以隐藏默认滚动条，允许通过拖拽或触摸滑动。在 DataTemplate 中添加 Triggers，当鼠标悬停 (IsMouseOver="True") 时改变刻度线和文字颜色；当数值不可见时，缩短刻度线长度以适应精细刻度。

<ListBox ItemsSource="{Binding Chips}" Background="#333333" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    
    
    <DataTemplate.Triggers>
        <!-- 数值隐藏时缩短刻度线 -->
        <DataTrigger Binding="{Binding NumberVisibility}" Value="Hidden">
            <Setter TargetName="line" Property="Y1" Value="3" />
        </DataTrigger>
        <!-- 鼠标悬停高亮 -->
        <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="line" Property="Stroke" Value="RoyalBlue" />
            <Setter TargetName="text" Property="Foreground" Value="RoyalBlue" />
        </Trigger>
    </DataTemplate.Triggers>
    
</ListBox>