前言

尺子在客户端开发中有一定的应用场景，比如厘米尺、白板的画线尺、视频剪辑的时间尺。一般可以采用用户控件通过自绘的方式实现，但今天我要讲一个不一样的方法，不使用自定义控件也不用用户控件，只需要ListBox即能实现一把尺子。

一、如何实现？

1、设置横向ListBox

我们实现一把水平的尺子，所以需要让ListBox横向显示

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

2、Item设为刻度样式

一个Item就是一个刻度，我们通过ItemTemplate的方式设置样式。

<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}"></TextBlock><Line x:Name="line"  HorizontalAlignment="Center" Height="20" Width="5" X1="2.5" Y1="0" X2="2.5" Y2="25" StrokeThickness="1" Stroke="#aaaaaa"></Line></StackPanel>
</ListBox.ItemTemplate>

3、绑定数据源

由于ListBox是基于数据集合来显示控件的，我们通过绑定数据源让其显示刻度。

<ListBox  ItemsSource="{Binding Chips}">

public class RulerChip
{public double Number { get; set; }public Visibility NumberVisibility { get; set; }}
public List<RulerChip> Chips { get; set; }=new List<RulerChip>();

二、完整代码

MainWindow.xaml

<Window x:Class="WpfApp7.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:WpfApp7"mc:Ignorable="d"Title="MainWindow" Height="450" Width="800"><Grid><ListBox  Background="#333333" Height="50" ItemsSource="{Binding Chips}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ><ListBox.ItemContainerStyle><Style  TargetType="{x:Type ListBoxItem}"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type ListBoxItem}"><ContentPresenterContent="{TemplateBinding Content}"ContentStringFormat="{TemplateBinding ContentStringFormat}"ContentTemplate="{TemplateBinding ContentTemplate}" /></ControlTemplate></Setter.Value></Setter></Style></ListBox.ItemContainerStyle><ListBox.ItemsPanel><ItemsPanelTemplate><VirtualizingStackPanel Orientation="Horizontal"></VirtualizingStackPanel></ItemsPanelTemplate></ListBox.ItemsPanel><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}"></TextBlock><Line x:Name="line"  HorizontalAlignment="Center" Height="20" Width="5" X1="2.5" Y1="0" X2="2.5" Y2="25" StrokeThickness="1" Stroke="#aaaaaa"></Line></StackPanel><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></DataTemplate></ListBox.ItemTemplate></ListBox></Grid>
</Window>

MainWindow.xaml.cs

using System.Collections.Generic;
using System.Windows;
namespace WpfApp7
{public class RulerChip{public double Number { get; set; }public Visibility NumberVisibility { get; set; }}/// <summary>/// Interaction logic for MainWindow.xaml/// </summary>public partial class MainWindow : Window{public List<RulerChip> Chips { get; set; }=new List<RulerChip>();public MainWindow(){InitializeComponent();DataContext = this;for (int i = 0; i < 100; i++){Chips.Add(new RulerChip() { Number=i/10.0, NumberVisibility = (i%10==0)?Visibility.Visible:Visibility.Hidden});}}}
}

三、效果预览

总结

以上就是今天要讲的内容，本文仅仅简单介绍了ListBox实现尺子控件的方法，很容易实现。而且因为使用了虚拟化容器理论上性能很好，就算是几百万刻度绘制也估计不会卡顿。所以在此基础上可以进行一定的拓展，比如利用dpi实现物理尺子，以及实现时间尺的缩放功能等。总的来说，这是一个易于实现且拓展性也不错的尺子实现方案。

C# wpf 使用ListBox实现尺子控件相关推荐

编程小问题系列（2）——为什么WPF里MediaElement等视频控件不起作用
为什么WPF里MediaElement等视频控件不起作用? 非常可能的原因是因为没有安装Microsoft Windows Media Player 10或者10以上的播放器,MSDN文档里就写有下 ...
WPF不同线程之间的控件的访问
WPF不同线程之间的控件是不同访问的,为了能够访问其他线程之间的控件,需要用Dispatcher.Invoke执行一个新的活动即可. 例如: public void SetNotes(string n ...
WPF 实现 DataGrid/ListView 分页控件
原文:WPF 实现 DataGrid/ListView 分页控件在WPF中,通常会选用DataGrid/ListView进行数据展示,如果数据量不多,可以直接一个页面显示出来.如果数据量很大,200 ...
WindowsXamlHost：在 WPF 中使用 UWP 的控件（Windows Community Toolkit）
原文 WindowsXamlHost:在 WPF 中使用 UWP 的控件(Windows Community Toolkit) Windows Community Toolkit 再次更新到 5.0. ...
【C#】wpf自定义calendar日期选择控件的样式
原文:[C#]wpf自定义calendar日期选择控件的样式首先上图看下样式原理总览 ItemsControl内容的生成实现界面的实现后台ViewModel的实现首先上图,看下样式原理 ...
WPF自定义LED风格数字显示控件
WPF自定义LED风格数字显示控件原文:WPF自定义LED风格数字显示控件版权声明:本文为博主原创文章,转载请注明作者和出处 https://blog.csdn.net/ZZZWWWPPP1119 ...
WPF实现炫酷Loading控件
原文: WPF实现炫酷Loading控件 Win8系统的Loading效果还是很不错的,网上也有人用CSS3等技术实现,研究了一下,并打算用WPF自定义一个Loading控件实现类似的效果,并可以让用 ...
C#窗体应用程序之CheckListBox复选列表与ListBox列表框控件
1.CheckListBox复选列表复选框功能类似的复选列表框 (CheckedListBox),方便用户设置和获取复选列表框中的选项,复选列表框显示的效果与复选框类似,但在选择多个选项时操作比一般 ...
【小沐学C#】WPF中嵌入web网页控件（WebBrowser、WebView2、CefSharp）
文章目录 1.简介 1.1 WPF简介 1.2 WPF 体系结构 1.3 WPF入门开发 2.WebBrowser 2.1 WebBrowser特点 2.2 WebBrowser常用的属性.方法和事件 ...

C# wpf 使用ListBox实现尺子控件

文章目录

前言