使用纯 MVVM 模式（带事件）的 IP 地址控件
3.17/5 (9投票s)
使用 MVVM 模式，自动焦点更改，各种验证和完全自定义的 IP 地址控件
引言
在开始做任何事情之前，四处看看总是好的。我需要创建一个类似 Windows 框的 IP 地址控件。我搜索并找到了很多，但没有一个是完整的，并且都破坏了 MVVM 模式。 大部分逻辑都在 XAML 的代码背后处理，但是 MVVM 说代码背后文件里不能有任何代码。所以这激发了我更进一步去创建一个。现在与大家分享，这样如果有人需要它，他们就可以从中受益。
特点
此 IP 地址控件的功能包括：
- 纯 MVVM
- 最小值-最大值验证 0-255。 它可以被定制。
- 如果输入无效，则高亮显示错误红色背景和“！”。 它可以被定制。
- 错误的工具提示
- 如果框中有有效条目并且已达到该框的限制，则自动移动到下一个框
- “.”字符将焦点移动到下一个框
- 没有第三方依赖
功能逐一介绍
1. 纯 MVVM
没有代码隐藏。 在 ViewModel 中没有 View 引用。 这对于代码质量和设计非常重要。
有一个单独的视图模型IpAddressViewModel ，它包含任何其他视图在正常情况下工作所需的所有字段或事件。 字段如下所示
这些字段公开了实时应用程序开发所需的所有数据。
AddressText是包含用户输入的IPAddress的属性。
2. 最小值-最大值限制和数字限制
目前，限制设置为 0 到 255。 可以为控件中的每个框单独自定义这些限制。
验证仅允许范围内的数字。 您也可以键入“.”点字符。 点字符的行为将在本博客的后面部分中描述。
3. 将错误突出显示为红色背景和感叹号“！”
如果任何框有任何错误，则会突出显示为红色背景，并且在末尾带有红色感叹号“!”。
警告在实时中，您可能使用任何一种验证显示（背景或感叹号）。 我只为了演示目的保留了这两种验证突出显示器。
感叹字符可以更改为您选择的任何字符。 实际上，您可以使用任何您选择的控件。 您只需要使用以下代码即可
<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>
4. 错误的工具提示
在以下两种情况下都显示了两种类型的错误，我们在两种情况下都有工具提示来显示。
- 输入了无效字符。 这是使用数字以外的任何其他字符的情况。
- 数字不在定义的范围内，例如，用户输入超出范围的数字。
5. 自动移动到下一个框
输入就像 Windows IP 地址配置框一样。 此控件会自动将焦点移动到下一个框，这样您就不需要移动鼠标并获得焦点。 它会检测到您已输入有效的三个字符，然后自动将光标移动到下一个框以进一步输入。
6. 输入“.” （点字符）
允许键入点字符（.），因为它在 Windows 标准 IP 地址对话框中是允许的。 点字符会将光标移动到下一个块以进行键入，例如，可以直接不间断地键入 IP 地址 127.0.0.1。
7. 没有第三方依赖
关于这个控件，最好的事情是，“它是纯 WPF”。 没有使用第三方控件/库。 您可以轻松地自定义类，控件，样式和重用类等。
引用有趣的是要知道“如何从 View Model 管理 View 上的焦点”和“如何设置验证规则并通过一些特殊情况控制流程”。
有趣不是吗。 试试看。 看看代码。
源代码和演示
关注点
我只有在找不到任何好的东西时才创作。 没有写作的爱好！ 是的，爱好是“编码和学习”！
历史
- 更新，因为发布后图像链接已损坏