WPF：自定义IP地址输入框的实现

最新推荐文章于 2024-07-24 22:23:25 发布
最新推荐文章于 2024-07-24 22:23:25 发布
阅读量2.1k 收藏 10
点赞数 3
分类专栏： WPF c#
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pandawangyt/article/details/115321044
版权

c# wpf ui
WPF 同时被 2 个专栏收录
13 篇文章 16 订阅
订阅专栏
c#
13 篇文章 2 订阅
订阅专栏

先看效果图：

在这里插入图片描述
仿照电脑以太网属性那里的IP地址输入框设计的
在这里插入图片描述

实现的主要功能有：

1、只能输入数字、Delete、Enter、Back、Tab、左右方向键，且数字在0-255之间。
2、输入数字最多三位，超过三位自动跳转到下一个输入框；如果输入框中有数字，则全选数字。
3、Delete就正常从后面删除；Enter暂时无操作（）；Tab自动跳转焦点；
4、Back往前删除，如果当前输入框为空，则跳转到前面一个输入框；如果前面一个输入框有数字，则删除一位数字；左右方向键就控制光标移动。

布局

4个TextBox构成4个数字输入框，3个Label构成3个点。

布局文件

新建UserControl，布局如下:

<Grid>
    <Border Name="Border"
            BorderBrush="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}, Path=BorderBrush}"
            Background="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}, Path=Background}"
            BorderThickness="1"
            RenderOptions.EdgeMode="Aliased">
        <Grid Name="GridIPAddress">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="15"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="15"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="15"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <TextBox Grid.Column="0" Name="TbxIP1" HorizontalContentAlignment="Center" Background="Transparent" InputMethod.IsInputMethodEnabled="False" MaxLength="3" PreviewKeyDown="TbxIP1_PreviewKeyDown" PreviewKeyUp="TbxIP1_PreviewKeyUp" Style="{StaticResource TextBoxWithoutBorderStyle}"/>
            <TextBox Grid.Column="2" Name="TbxIP2" HorizontalContentAlignment="Center" Background="Transparent" InputMethod.IsInputMethodEnabled="False" MaxLength="3" PreviewKeyDown="TbxIP1_PreviewKeyDown" PreviewKeyUp="TbxIP1_PreviewKeyUp" Style="{StaticResource TextBoxWithoutBorderStyle}"/>
            <TextBox Grid.Column="4" Name="TbxIP3" HorizontalContentAlignment="Center" Background="Transparent" InputMethod.IsInputMethodEnabled="False" MaxLength="3" PreviewKeyDown="TbxIP1_PreviewKeyDown" PreviewKeyUp="TbxIP1_PreviewKeyUp" Style="{StaticResource TextBoxWithoutBorderStyle}"/>
            <TextBox Grid.Column="6" Name="TbxIP4" HorizontalContentAlignment="Center" Background="Transparent" InputMethod.IsInputMethodEnabled="False" MaxLength="3" PreviewKeyDown="TbxIP1_PreviewKeyDown" PreviewKeyUp="TbxIP1_PreviewKeyUp" Style="{StaticResource TextBoxWithoutBorderStyle}"/>
            <Label Grid.Column="1" Style="{StaticResource LabelDotStyle}"/>
            <Label Grid.Column="3" Style="{StaticResource LabelDotStyle}"/>
            <Label Grid.Column="5" Style="{StaticResource LabelDotStyle}"/>
        </Grid>
    </Border>
</Grid>

注意：
1、设置 InputMethod.IsInputMethodEnabled=false，禁用输入法，也就是不能中文输入，不然的话不能识别按键事件
2、PreviewKeyDown、PreviewKeyUp，在按下按键之前，以及释放按键之前两个事件中处理上述的主要功能。
3、个人体会，当想输入例如数字1时，1显示在屏幕上，是发生在PreviewKeyDown、PreviewKeyUp这两个事件中间的。例如输入1，在PreviewKeyDown判断是不是那些允许的按键，判断是的，那么屏幕中显示1，PreviewKeyUp判断输入1以后，要不要跳转到下一个输入框，以及数字在不在0-255之间。
4、资源文件 LabelDotStyle、TextBoxWithoutBorderStyle就不贴代码了

实现代码

/// <summary>
/// 按下按键键前，判断哪些能输入
/// 只能输入数字 删除键 回车键 返回键 Tab键 左右方向键
/// 删除键、左右方向键 控制光标位置
/// </summary>
private void TbxIP1_PreviewKeyDown(object sender, KeyEventArgs e)
{
    Key key = e.Key;
    TextBox tbx = sender as TextBox;
    if ((key >= Key.D0 && key <= Key.D9) || (key >= Key.NumPad0 && key <= Key.NumPad9))
    {
    }
    else if (key == Key.Delete)
    {
    }
    else if (key == Key.Enter)
    {
    }
    else if (key == Key.Back)
    {
        // 删除光标前面的数字，如果光标前没有数字，会跳转到前面一个输入框
        // 先Focus到了前面一个输入框，再执行的删除操作，所以会删除前面输入框中的一个数字
        if (tbx.CaretIndex == 0)
        {
            SetTbxFocus(tbx, false, false);
        }
    }
    else if (key == Key.Tab)
    {
    }
    else if (key == Key.Left)
    {
        // 光标已经在当前输入框的最左边，则跳转到前面一个输入框
        if (tbx.CaretIndex == 0)
        {
            SetTbxFocus(tbx, false, false);
            // 得设置true，不然光标在前面一个输入框里也会移动一次
            // 例如前一个输入框中的数字是123，Focus后，光标在数字3右边
            // 不设置true，会移动到数字2和数字3之间
            e.Handled = true;
        }
    }
    else if (key == Key.Right)
    {
        // 光标已经在当前输入框的最右边，则跳转到后面一个输入框
        if (tbx.SelectionStart == tbx.Text.Length)
        {
            SetTbxFocus(tbx, true, false);
            // true同理
            e.Handled = true;
        }
    }
    else
    {
        // 不是上述按键，就不处理
        e.Handled = true;
    }
}
/// <summary>
/// 释放按键前，判断光标要做什么操作
/// </summary>
private void TbxIP1_PreviewKeyUp(object sender, KeyEventArgs e)
{
    Key key = e.Key;
    TextBox tbx = sender as TextBox;
    if ((key >= Key.D0 && key <= Key.D9) || (key >= Key.NumPad0 && key <= Key.NumPad9))
    {
        // 当前输入框满三个数字后
        // 跳转到后面一个输入框
        if (tbx.Text.Length == 3)
        {
            if(Int32.Parse(tbx.Text) <0 || Int32.Parse(tbx.Text) > 255)
            {
                tbx.Text = "255";
                MessageBox.Show(tbx.Text + "不是有效项。请指定一个介于0和255间的值。", "错误", MessageBoxButton.OK, MessageBoxImage.Exclamation);
                return;
            }
            SetTbxFocus(tbx, true, true);
        }
    }
    else if (key == Key.Delete)
    {
        // 无操作
    }
    else if (key == Key.Enter)
    {
        // 暂时不做操作
    }
    else if (key == Key.Back)
    {
    }
    else if (key == Key.Tab)
    {
        // 暂时不做操作
    }
    else if (key == Key.Left)
    {
    }
    else if (key == Key.Right)
    {
    }
    else
    {
        // 不是上述按键，就不处理
        e.Handled = true;
    }
}

/// <summary>
/// 设置当前输入框的前面或后面的输入框获取焦点，以及是否全选内容
/// </summary>
/// <param name="curretTbx">当前输入框</param>
/// <param name="isBack">是否是后面的输入框（false为前面的输入框）</param>
/// <param name="isSelectAll">是否全选内容</param>
private void SetTbxFocus(TextBox curretTbx, bool isBack, bool isSelectAll)
{
    // 所有的ip输入框
    List<TextBox> TbxIPList = new List<TextBox>(); 
    foreach (UIElement item in GridIPAddress.Children)
    {
        if(item.GetType() == typeof(TextBox))
        {
            TbxIPList.Add(item as TextBox);
        }
    }
    // 要聚焦的输入框
    TextBox nextTbx = null;
    // 往后
    if (isBack)
    {
        // 当前输入框是前三个，那么就取后一个输入框
        int index = TbxIPList.IndexOf(curretTbx);
        if (index <= 2)
        {
            nextTbx = TbxIPList[index + 1];
        }
    }
    // 往前
    else
    {
        // 当前输入框是后三个，那么就取前一个输入框
        int index = TbxIPList.IndexOf(curretTbx);
        if (index >= 1)
        {
            nextTbx = TbxIPList[index - 1];
        }
    }
    // 设置焦点 全选内容
    if(nextTbx != null)
    {
        nextTbx.Focus();
        if (isSelectAll)
        {
            nextTbx.SelectAll();
        }
    }
}

额，主要的解释都在注释里面了。

如何使用

在布局文件中直接引用就好啦

<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
    <Label Content="IPv4" Margin="200,0,20,0"/>
    <local:UC_IPAddress x:Name="UC_ipaddress" Width="200" Height="30" Background="White" BorderBrush="Black"/>
</StackPanel>
pandawangyt
关注
专栏目录
C# 编写自定义 IP 输入框控件
遇见--专栏
01-08 8687
场景: 做一些网络设备应用时，需要有ip地址的输入，这就需要ip地址输入框控件 思路: 1 重写TextBox 为IpInputBox。 2 重写TextBox为SubIpInputBox 3 一个IpInputBox 添加4个SubIpInputBox 和3个Label 控件图：
模拟Windows的IP输入框（IPBox）
06-02
本文将深入探讨“模拟Windows的IP输入框（IPBox）”这一主题，该控件由C#语言编写，旨在为开发者提供一个与Windows系统原生IP地址输入框体验一致的自定义控件。 IP输入框在许多网络配置或者网络相关的应用程序中是...
WPF仿windows自带ip输入控件
12-19
主要功能：1.手动输入验证合法性；2.自动跳转下一格；3.直接粘帖ip赋值；4.检验粘帖数据的合法性；5.去除首位的0，windows系统自带的可以输入00;
Winform / WPF 自定义控件 —— IPV4 地址输入框
YMGogre的博客
11-14 879
仿 Window 原生风格 IPV4 地址输入框。
【WPF开发】控件介绍-TextBox（文本输入框）
最新发布
qq_39150957的博客
07-24 1620
本文详细介绍了 WPF 中 TextBox 控件的基本功能、UI 设计技巧和样式化技巧。TextBox 控件作为接收和显示文本输入的重要控件，能够应用于各种用户交互场景。在 UI 设计中，合理布局和样式化 TextBox 可以提升用户体验，包括选择合适的大小、字体和颜色，以及添加输入反馈和水印文本等技巧。通过示例代码和高级用法，读者可以学习如何实现数据绑定、自定义样式和使用 Triggers 等技术来优化和定制 TextBox 控件，从而更好地适应复杂的应用程序需求。
WPF自定义实现IP地址输入控件
12-26
一、前言 WPF没有内置IP地址输入控件，因此我们需要通过自己定义实现。 我们先看一下IP地址输入控件有什么特性： 输满三个数字焦点会往右移 键盘←→可以空光标移动 任意位置可复制整段IP地址，且支持x.x.x.x格式的粘贴赋值 删除字符会自动向左移动焦点 知道以上特性，我们就可以开始动手了。 二、构成 Grid+TextBox*4+TextBlock*3 通过这几个控件的组合，我们完成IP地址输入控件的功能。 界面代码如下： <UserControl x:Class="IpAddressControl.IpAddressControl" xmlns="http:/
WPF数字输入框和IP地址输入框
weixin_38168786的博客
10-30 486
数字输入框 简介 在业务中，我们经常需要限制用户的输入，比如限制输入长度，限制只能输入数字等等。限制输入长度WPF内置的TextBox已经帮我们解决了，但是限制输入数字却并未在WPF中内置解决方案。使用第三方的控件又要多增加一个引用，于是决定自己写一个。 在写的过程中发现需要考虑的问题比较多，比如限制输入法、部分限制输入小数点和负号、限制输入字母和其它符号、粘贴时做特殊处理等等。值...
WPF IP_TextBox
12-11
WPF开发的IP地址输入控件，手动输入验证合法性、自动跳转下一格、直接粘帖ip赋值、检验粘帖数据的合法性、去除首位的0，windows系统自带的可以输入00
WPF UI开发教程IP地址输入控件
liaohaiyin的专栏
08-21 919
WPF没有内置IP地址输入控件，因此我们需要通过自己定义实现。 我们先看一下IP地址输入控件有什么特性： 输满三个数字焦点会往右移 键盘←→可以空光标移动 任意位置可复制整段IP地址，且支持x.x.x.x格式的粘贴赋值 删除字符会自动向左移动焦点 知道以上特性，我们就可以开始动手了。 IP地址控件样式代码： <Style TargetType="{x:Type local:NbIpBox}"> <Setter Property="IPAddress" V
wpf 自定义IP地址输入框
05-26
下面是一份示例代码，实现了一个简单的自定义IP地址输入框： IPAddressInputBox.xaml: ```xaml <UserControl x:Class="WpfCustomControls.IPAddressInputBox" xmlns=...
wpf IPtextbox
08-20
wpf中的简单IP输入控件，只实现了很简单的功能所以代码也很少，可根据实际情况进行添加
C# wpf ip控件
09-12
Ip控件，由于wpf中没有专门的ip控件自己写了一个，参照了codeproject上的一个例子。
C# WPF autoCompleteTextBox控件，自定义 ，智能输入，自动提醒输入框，类似百度搜索提醒，类似google
05-13
自动输入，我写的时候录了视频，也交代了我的博客地址和参考的原作者博客地址。为了方便大家使用，增加了ADDSource方法，也提供完整样例，可以直接使用
WPF自定义控件（按钮文本框组合框等等）
08-27
WPF 自定义控件（包含全部代码） 自定义按钮、自定义文本框、自定义组合框、自定义日期控件等等
IP地址格式输入文本框
08-04
可以直接将IP地址粘贴到输入框中，可以将IP地址转化为整数，及将整数表示的IP地址转化为IP地址填充到文本输入框中。
WPF自定义控件与样式(3)-TextBox & RichTextBox & PasswordBox样式、水印、Label标签、功能扩展...
weixin_33811539的博客
11-17 281
一．前言.预览 　　申明：WPF自定义控件与样式是一个系列文章，前后是有些关联的，但大多是按照由简到繁的顺序逐步发布的等，若有不明白的地方可以参考本系列前面的文章，文末附有部分文章链接。 本文主要是对文本输入控件进行样式开发，及相关扩展功能开发，主要内容包括： 基本文本框TextBox控件样式及扩展功能，实现了样式、水印、Label标签、功能扩展； 富文本框RichTextBox...
WPF IP地址输入控件的实现
weixin_34290631的博客
06-02 562
一、前言 WPF没有内置IP地址输入控件，因此我们需要通过自己定义实现。 我们先看一下IP地址输入控件有什么特性： 输满三个数字焦点会往右移 键盘←→可以空光标移动 任意位置可复制整段IP地址，且支持x.x.x.x格式的粘贴赋值 删除字符会自动向左移动焦点 知道以上特性，我们就可以开始动手了。 二、构成 Grid+TextBox*4+TextBlock*3 通过这几...
WPF-自定义计算文本数量输入框
qq_37875849的博客
12-26 382
1.创建TextBoxHasCountStyle.xaml。注意：需要添加到样式库里面，代码不能照抄，更改为自己的项目。2.创建TextBoxHasCount.cs。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值