C# wpf使用ListBox實(shí)現(xiàn)尺子控件的示例代碼

更新時(shí)間：2022年07月20日 15:43:45 作者：CodeOfCC

本文主要介紹了C# wpf使用ListBox實(shí)現(xiàn)尺子控件的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

尺子在客戶(hù)端開(kāi)發(fā)中有一定的應(yīng)用場(chǎng)景，比如厘米尺、白板的畫(huà)線尺、視頻剪輯的時(shí)間尺。一般可以采用用戶(hù)控件通過(guò)自繪的方式實(shí)現(xiàn)，但今天我要講一個(gè)不一樣的方法，不使用自定義控件也不用用戶(hù)控件，只需要ListBox即能實(shí)現(xiàn)一把尺子。

一、如何實(shí)現(xiàn)？

1、設(shè)置橫向ListBox

我們實(shí)現(xiàn)一把水平的尺子，所以需要讓ListBox橫向顯示

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

2、Item設(shè)為刻度樣式

一個(gè)Item就是一個(gè)刻度，我們通過(guò)ItemTemplate的方式設(shè)置樣式。

<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、綁定數(shù)據(jù)源

由于ListBox是基于數(shù)據(jù)集合來(lái)顯示控件的，我們通過(guò)綁定數(shù)據(jù)源讓其顯示刻度。

<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}">
                                <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});
            }
        }
    }
}

三、效果預(yù)覽

在這里插入圖片描述

總結(jié)

以上就是今天要講的內(nèi)容，本文僅僅簡(jiǎn)單介紹了ListBox實(shí)現(xiàn)尺子控件的方法，很容易實(shí)現(xiàn)。而且因?yàn)槭褂昧颂摂M化容器理論上性能很好，就算是幾百萬(wàn)刻度繪制也估計(jì)不會(huì)卡頓。所以在此基礎(chǔ)上可以進(jìn)行一定的拓展，比如利用dpi實(shí)現(xiàn)物理尺子，以及實(shí)現(xiàn)時(shí)間尺的縮放功能等?？偟膩?lái)說(shuō)，這是一個(gè)易于實(shí)現(xiàn)且拓展性也不錯(cuò)的尺子實(shí)現(xiàn)方案。更多相關(guān)C# wpf尺子內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: