C WPF uses listbox to implement ruler control

---

Preface

Ruler has certain application scenarios in client development , Such as centimeter ruler 、 White board drawing ruler 、 Time scale of video clip . Generally, user controls can be used to realize by self drawing , But today I want to talk about a different way , Do not use custom controls or user controls , It only needs ListBox That is, it can realize a ruler .

---

One 、 How to achieve ？

1、 Set up the landscape ListBox

We realize a horizontal ruler , So we need to let ListBox Horizontal display

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

2、Item Set to scale style

One Item It's just a scale , We go through ItemTemplate To set the style .

<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、 Bind data source

because ListBox It is based on data collection to display controls , We bind the data source to display the scale .

<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>();

---

Two 、 Complete code

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}"> <ContentPresenter Content="{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});
            }
        }
    }
}

---

3、 ... and 、 Results the preview

---

summary

That's what we're going to talk about today , This article only briefly introduces ListBox Method of implementing ruler control , Easy to implement . And because of the use of virtualization containers, theoretically, the performance is very good , It is estimated that even millions of scale drawings will not get stuck . So on this basis, we can expand , Such as the use of dpi Implement physical ruler , And realize the zoom function of the time ruler . in general , This is a ruler implementation scheme that is easy to implement and has good expansibility .