您好,登錄后才能下訂單哦!
一、前言
WPF沒有內(nèi)置IP地址輸入控件,因此我們需要通過(guò)自己定義實(shí)現(xiàn)。
我們先看一下IP地址輸入控件有什么特性:
知道以上特性,我們就可以開始動(dòng)手了。
二、構(gòu)成
Grid+TextBox*4+TextBlock*3
通過(guò)這幾個(gè)控件的組合,我們完成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>
三、驗(yàn)證輸入格式
界面中為TextBox添加了CustomTextBoxTextStyle及validationTemplate樣式,當(dāng)輸入格式不正確時(shí),控件就會(huì)應(yīng)用該樣式。
通過(guò)自定義規(guī)則IPRangeValidationRule來(lái)驗(yàn)證輸入的內(nèi)容格式是否要求。
自定義規(guī)則代碼如下:
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"); } } }
四、控制焦點(diǎn)變化
在界面代碼中我通過(guò)local:FocusChangeExtension.IsFocused附加屬性實(shí)現(xiàn)綁定屬性控制焦點(diǎn)的變化。
附加屬性的代碼如下:
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+后臺(tái)代碼混合實(shí)現(xiàn)焦點(diǎn)控制及內(nèi)容復(fù)制粘貼
1、后臺(tái)代碼主要實(shí)現(xiàn)復(fù)制粘貼內(nèi)容,另外←→移動(dòng)光標(biāo)也需要后臺(tái)代碼控制。通過(guò)PreviewKeyDown事件捕獲鍵盤左移右移,復(fù)制,刪除等事件,做出相應(yīng)處理:
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); } } }
通過(guò)DataObject.AddPastingHandler(part1, TextBox_Pasting)添加粘貼事件。使控件賦值。
2、通過(guò)ViewModel方式實(shí)現(xiàn)屬性綁定通知,來(lái)控制焦點(diǎn)變化及內(nèi)容賦值。
ViewModel類要實(shí)現(xiàn)綁定通知需要實(shí)現(xiàn)INotifyPropertyChanged接口中的方法。
我們新建一個(gè)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
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。