WPF自定义实现IP地址输入控件
一、前言
WPF没有内置IP地址输入控件,因此我们需要通过自己定义实现。
我们先看一下IP地址输入控件有什么特性:
- 输满三个数字焦点会往右移
- 键盘←→可以空光标移动
- 任意位置可复制整段IP地址,且支持x.x.x.x格式的粘贴赋值
- 删除字符会自动向左移动焦点
知道以上特性,我们就可以开始动手了。
二、构成
Grid+TextBox*4+TextBlock*3
通过这几个控件的组合,我们完成IP地址输入控件的功能。
界面代码如下:
<UserControl x:Class="IpAddressControl.IpAddressControl" 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:local="clr-namespace:IpAddressControl" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" Margin="10,0" d:DesignHeight="50" d:DesignWidth="800" mc:Ignorable="d" Background="White"> <UserControl.Resources> <ControlTemplate x:Key="validationTemplate"> <DockPanel> <TextBlock Margin="1,2" DockPanel.Dock="Right" FontSize="{DynamicResource ResourceKey=Heading4}" FontWeight="Bold" Foreground="Red" Text="" /> <AdornedElementPlaceholder /> </DockPanel> </ControlTemplate> <Style x:Key="CustomTextBoxTextStyle" TargetType="TextBox"> <Setter Property="MaxLength" Value="3" /> <Setter Property="HorizontalAlignment" Value="Stretch" /> <Setter Property="VerticalAlignment" Value="Center" /> <Style.Triggers> <Trigger Property="Validation.HasError" Value="True"> <Trigger.Setters> <Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource Self}, Path=(Validation.Errors)[0].ErrorContent}" /> <Setter Property="BorderBrush" Value="Red" /> <Setter Property="Background" Value="Red" /> </Trigger.Setters> </Trigger> </Style.Triggers> </Style> </UserControl.Resources> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition MinWidth="30" /> <ColumnDefinition Width="10" /> <ColumnDefinition MinWidth="30" /> <ColumnDefinition Width="10" /> <ColumnDefinition MinWidth="30" /> <ColumnDefinition Width="10" /> <ColumnDefinition MinWidth="30" /> </Grid.ColumnDefinitions> <!-- Part 1 --> <TextBox Grid.Column="0" BorderThickness="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" x:Name="part1" PreviewKeyDown="Part1_PreviewKeyDown" local:FocusChangeExtension.IsFocused="{Binding IsPart1Focused, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, NotifyOnSourceUpdated=True}" Style="{StaticResource CustomTextBoxTextStyle}" Validation.ErrorTemplate="{StaticResource validationTemplate}"> <TextBox.Text> <Binding Path="Part1" UpdateSourceTrigger="PropertyChanged"> <Binding.ValidationRules> <local:IPRangeValidationRule Max="255" Min="0" /> </Binding.ValidationRules> </Binding> </TextBox.Text> </TextBox> <TextBlock Grid.Column="1" HorizontalAlignment="Center" FontSize="15" Text="." VerticalAlignment="Center" /> <!-- Part 2 --> <TextBox Grid.Column="2" x:Name="part2" BorderThickness="0" VerticalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" PreviewKeyDown="Part2_KeyDown" local:FocusChangeExtension.IsFocused="{Binding IsPart2Focused}" Style="{StaticResource CustomTextBoxTextStyle}" Validation.ErrorTemplate="{StaticResource validationTemplate}"> <TextBox.Text> <Binding Path="Part2" UpdateSourceTrigger="PropertyChanged"> <Binding.ValidationRules> <local:IPRangeValidationRule Max="255" Min="0" /> </Binding.ValidationRules> </Binding> </TextBox.Text> </TextBox> <TextBlock Grid.Column="3" HorizontalAlignment="Center" FontSize="15" Text="." VerticalAlignment="Center"/> <!-- Part 3 --> <TextBox Grid.Column="4" x:Name="part3" BorderThickness="0" VerticalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" PreviewKeyDown="Part3_KeyDown" local:FocusChangeExtension.IsFocused="{Binding IsPart3Focused}" Style="{StaticResource CustomTextBoxTextStyle}" Validation.ErrorTemplate="{StaticResource validationTemplate}"> <TextBox.Text> <Binding Path="Part3" UpdateSourceTrigger="PropertyChanged"> <Binding.ValidationRules> <local:IPRangeValidationRule Max="255" Min="0" /> </Binding.ValidationRules> </Binding> </TextBox.Text> </TextBox> <TextBlock Grid.Column="5" HorizontalAlignment="Center" FontSize="15" Text="." VerticalAlignment="Center"/> <!-- Part 4 --> <TextBox Grid.Column="6" x:Name="part4" BorderThickness="0" VerticalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" PreviewKeyDown="Part4_KeyDown" local:FocusChangeExtension.IsFocused="{Binding IsPart4Focused}" Style="{StaticResource CustomTextBoxTextStyle}" Validation.ErrorTemplate="{StaticResource validationTemplate}"> <TextBox.Text> <Binding Path="Part4" UpdateSourceTrigger="PropertyChanged"> <Binding.ValidationRules> <local:IPRangeValidationRule Max="255" Min="0" /> </Binding.ValidationRules> </Binding> </TextBox.Text> </TextBox> </Grid> </UserControl>
三、验证输入格式
界面中为TextBox添加了CustomTextBoxTextStyle及validationTemplate样式,当输入格式不正确时,控件就会应用该样式。
通过自定义规则IPRangeValidationRule来验证输入的内容格式是否要求。
自定义规则代码如下:
public class IPRangeValidationRule : ValidationRule { private int _min; private int _max; public int Min { get { return _min; } set { _min = value; } } public int Max { get { return _max; } set { _max = value; } } public override ValidationResult Validate(object value, CultureInfo cultureInfo) { int val = 0; var strVal = (string)value; try { if (strVal.Length > 0) { if (strVal.EndsWith(".")) { return CheckRanges(strVal.Replace(".", "")); } // Allow dot character to move to next box return CheckRanges(strVal); } } catch (Exception e) { return new ValidationResult(false, "Illegal characters or " + e.Message); } if ((val < Min) || (val > Max)) { return new ValidationResult(false, "Please enter the value in the range: " + Min + " - " + Max + "."); } else { return ValidationResult.ValidResult; } } private ValidationResult CheckRanges(string strVal) { if (int.TryParse(strVal, out var res)) { if ((res < Min) || (res > Max)) { return new ValidationResult(false, "Please enter the value in the range: " + Min + " - " + Max + "."); } else { return ValidationResult.ValidResult; } } else { return new ValidationResult(false, "Illegal characters entered"); } } }
四、控制焦点变化
在界面代码中我通过local:FocusChangeExtension.IsFocused附加属性实现绑定属性控制焦点的变化。
附加属性的代码如下:
public static class FocusChangeExtension { public static bool GetIsFocused(DependencyObject obj) { return (bool)obj.GetValue(IsFocusedProperty); } public static void SetIsFocused(DependencyObject obj, bool value) { obj.SetValue(IsFocusedProperty, value); } public static readonly DependencyProperty IsFocusedProperty = DependencyProperty.RegisterAttached( "IsFocused", typeof(bool), typeof(FocusChangeExtension), new UIPropertyMetadata(false, OnIsFocusedPropertyChanged)); private static void OnIsFocusedPropertyChanged( DependencyObject d, DependencyPropertyChangedEventArgs e) { var control = (UIElement)d; if ((bool)e.NewValue) { control.Focus(); } } }
五、VM+后台代码混合实现焦点控制及内容复制粘贴
1、后台代码主要实现复制粘贴内容,另外←→移动光标也需要后台代码控制。通过PreviewKeyDown事件捕获键盘左移右移,复制,删除等事件,做出相应处理:
private void Part2_KeyDown(object sender, System.Windows.Input.KeyEventArgs e) { if (e.Key == Key.Back && part2.Text == "") { part1.Focus(); } if (e.Key == Key.Right && part2.CaretIndex == part2.Text.Length) { part3.Focus(); e.Handled = true; } if (e.Key == Key.Left && part2.CaretIndex == 0) { part1.Focus(); e.Handled = true; } if (e.KeyboardDevice.Modifiers.HasFlag(ModifierKeys.Control) && e.Key == Key.C) { if (part2.SelectionLength == 0) { var vm = this.DataContext as IpAddressViewModel; Clipboard.SetText(vm.AddressText); } } }
通过DataObject.AddPastingHandler(part1, TextBox_Pasting)添加粘贴事件。使控件赋值。
2、通过ViewModel方式实现属性绑定通知,来控制焦点变化及内容赋值。
ViewModel类要实现绑定通知需要实现INotifyPropertyChanged接口中的方法。
我们新建一个IpAddressViewModel类继承INotifyPropertyChanged,代码如下:
public class IpAddressViewModel : INotifyPropertyChanged { public event EventHandler AddressChanged; public string AddressText { get { return $"{Part1??"0"}.{Part2??"0"}.{Part3??"0"}.{Part4??"0"}"; } } private bool isPart1Focused; public bool IsPart1Focused { get { return isPart1Focused; } set { isPart1Focused = value; OnPropertyChanged(); } } private string part1; public string Part1 { get { return part1; } set { part1 = value; SetFocus(true, false, false, false); var moveNext = CanMoveNext(ref part1); OnPropertyChanged(); OnPropertyChanged(nameof(AddressText)); AddressChanged?.Invoke(this, EventArgs.Empty); if (moveNext) { SetFocus(false, true, false, false); } } } private bool isPart2Focused; public bool IsPart2Focused { get { return isPart2Focused; } set { isPart2Focused = value; OnPropertyChanged(); } } private string part2; public string Part2 { get { return part2; } set { part2 = value; SetFocus(false, true, false, false); var moveNext = CanMoveNext(ref part2); OnPropertyChanged(); OnPropertyChanged(nameof(AddressText)); AddressChanged?.Invoke(this, EventArgs.Empty); if (moveNext) { SetFocus(false, false, true, false); } } } private bool isPart3Focused; public bool IsPart3Focused { get { return isPart3Focused; } set { isPart3Focused = value; OnPropertyChanged(); } } private string part3; public string Part3 { get { return part3; } set { part3 = value; SetFocus(false, false, true, false); var moveNext = CanMoveNext(ref part3); OnPropertyChanged(); OnPropertyChanged(nameof(AddressText)); AddressChanged?.Invoke(this, EventArgs.Empty); if (moveNext) { SetFocus(false, false, false, true); } } } private bool isPart4Focused; public bool IsPart4Focused { get { return isPart4Focused; } set { isPart4Focused = value; OnPropertyChanged(); } } private string part4; public string Part4 { get { return part4; } set { part4 = value; SetFocus(false, false, false, true); var moveNext = CanMoveNext(ref part4); OnPropertyChanged(); OnPropertyChanged(nameof(AddressText)); AddressChanged?.Invoke(this, EventArgs.Empty); } } public void SetAddress(string address) { if (string.IsNullOrWhiteSpace(address)) return; var parts = address.Split('.'); if (int.TryParse(parts[0], out var num0)) { Part1 = num0.ToString(); } if (int.TryParse(parts[1], out var num1)) { Part2 = parts[1]; } if (int.TryParse(parts[2], out var num2)) { Part3 = parts[2]; } if (int.TryParse(parts[3], out var num3)) { Part4 = parts[3]; } } private bool CanMoveNext(ref string part) { bool moveNext = false; if (!string.IsNullOrWhiteSpace(part)) { if (part.Length >= 3) { moveNext = true; } if (part.EndsWith(".")) { moveNext = true; part = part.Replace(".", ""); } } return moveNext; } private void SetFocus(bool part1, bool part2, bool part3, bool part4) { IsPart1Focused = part1; IsPart2Focused = part2; IsPart3Focused = part3; IsPart4Focused = part4; } public event PropertyChangedEventHandler PropertyChanged; protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } }
到这里基本就完成了,生成控件然后到MainWindow中引用该控件
六、最终效果
————————————————————
代码地址:https://github.com/cmfGit/IpAddressControl.git
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对猪先飞的支持。
相关文章
- 这篇文章主要给大家介绍了关于C#创建自定义控件及添加自定义属性和事件使用的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用C#具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧...2020-06-25
c# WPF中通过双击编辑DataGrid中Cell的示例(附源码)
这篇文章主要介绍了c# WPF中通过双击编辑DataGrid中Cell的示例(附源码),帮助大家更好的理解和学习使用c#,感兴趣的朋友可以了解下...2021-03-03- 这篇文章主要介绍了C#实现跨线程操作控件方法,主要采用异步访问方式实现,需要的朋友可以参考下...2020-06-25
- 最近在网上看到了新版的360安全卫士,感觉界面还不错,于是用WPF制作了一个,时间有限,一些具体的控件没有制作,用图片代替了。感兴趣的朋友一起跟着小编学习WPF实现类似360安全卫士界面的程序源码分享...2020-06-25
学习使用bootstarp基本控件(table、form、button)
这篇文章主要教会大家学习使用bootstarp基本控件,如table、form、button控件,感兴趣的小伙伴们可以参考一下...2016-04-16- 这篇文章主要介绍了C# 如何设置label(标签)控件的背景颜色为透明,帮助大家更好的理解和使用c#,感兴趣的朋友可以了解下...2020-12-08
- 本篇文章是对C#中自定义控件的制作与使用实例进行了详细的分析介绍,需要的朋友参考下...2020-06-25
- 这篇文章主要为大家详细介绍了Bootstrap树形控件使用方法,感兴趣的小伙伴们可以参考一下...2016-01-29
- 这篇文章主要介绍了C#实现根据指定容器和控件名字获得控件的方法,其中包括了遍历与递归的应用,需要的朋友可以参考下...2020-06-25
Repeater事件OnItemCommand取得行内控件的方法
这篇文章主要介绍了Repeater事件OnItemCommand取得行内控件的方法,有需要的朋友可以参考一下...2021-09-22- 这篇文章主要为大家详细介绍了利用jmSlip编写移动端顶部日历选择组件的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-10-25
- 这篇文章主要介绍了C#多线程与跨线程访问界面控件的方法,实例分析了C#多线程与跨线程访问空间的技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要为大家详细介绍了WPF仿三星手机充电界面实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- activex控件以前也叫做ole控件,它是微软ie支持的一种软件组件或对象,可以将其插入到web页面中,实现在浏览器端执行动态程序功能,以增强浏览器端的动态处理能力。通常activex控件都是用c++或vb语言开发,本文介绍另一种方式,使用c#语言开发activex控件。...2020-06-25
- 这篇文章主要介绍了C#自定义控件添加右键菜单的方法,本文用到control控件,专门自定义右键菜单,下面小编给大家整理下,有需要的小伙伴可以来参考下...2020-06-25
- 这篇文章主要介绍了C# WPF 通过委托实现多窗口间的传值的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
- 下面小编就为大家分享一篇基于C#调用OCX控件的常用方法推荐,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-06-25
C++ Custom Control控件向父窗体发送对应的消息
这篇文章主要介绍了C++ Custom Control控件向父窗体发送对应的消息的相关资料,需要的朋友可以参考下...2020-04-25- 这篇文章主要为大家详细介绍了javascript特殊日历控件的使用方法,展示了javascript日历控件实现效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-03-09
- PHP IP地址格式检测函数复制代码 代码如下:function checkIp($ip){ $ip = str_replace(" ", "", $ip); $ip = strtolower($ip); $ip= str_replace("http://", "", $ip); $ip= str_replace("https://", ""...2013-10-04