Fix validation error icon

Author: Sergio0694

samples/MvvmSampleUwp/Controls/ValidationTextBox.cs

@@ -2,17 +2,52 @@
 // The .NET Foundation licenses this file to you under the MIT license.
 // See the LICENSE file in the project root for more information.
 
+using System.ComponentModel;
+using System.ComponentModel.DataAnnotations;
+using System.Linq;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
-using Windows.UI.Xaml.Input;
 
 namespace MvvmSampleUwp.Controls;
 
 /// <summary>
 /// A simple control that acts as a container for a documentation block.
 /// </summary>
+[TemplatePart(Name = "PART_TextBox", Type = typeof(TextBox))]
+[TemplatePart(Name = "PART_WarningIcon", Type = typeof(FontIcon))]
 public sealed class ValidationTextBox : ContentControl
 {
+    /// <summary>
+    /// The <see cref="TextBox"/> instance in use.
+    /// </summary>
+    private TextBox textBox;
+
+    /// <summary>
+    /// The <see cref="MarkdownTextBlock"/> instance in use.
+    /// </summary>
+    private FontIcon warningIcon;
+
+    /// <summary>
+    /// The previous data context in use.
+    /// </summary>
+    private INotifyDataErrorInfo oldDataContext;
+
+    public ValidationTextBox()
+    {
+        DataContextChanged += ValidationTextBox_DataContextChanged;
+    }
+
+    /// <inheritdoc/>
+    protected override void OnApplyTemplate()
+    {
+        base.OnApplyTemplate();
+
+        textBox = (TextBox)GetTemplateChild("PART_TextBox");
+        warningIcon = (FontIcon)GetTemplateChild("PART_WarningIcon");
+
+        textBox.TextChanged += TextBox_TextChanged;
+    }
+
     /// <summary>
     /// Gets or sets the <see cref="string"/> representing the text to display.
     /// </summary>
@@ -68,20 +103,91 @@ public string PlaceholderText
         new PropertyMetadata(default(string)));
 
     /// <summary>
-    /// Gets or sets the <see cref="string"/> representing the input scope to use.
+    /// Gets or sets the <see cref="string"/> representing the text to display.
     /// </summary>
-    public InputScope InputScope
+    public string PropertyName
     {
-        get => (InputScope)GetValue(InputScopeProperty);
-        set => SetValue(InputScopeProperty, value);
+        get => (string)GetValue(PropertyNameProperty);
+        set => SetValue(PropertyNameProperty, value);
     }
 
     /// <summary>
-    /// The <see cref="DependencyProperty"/> backing <see cref="InputScope"/>.
+    /// The <see cref="DependencyProperty"/> backing <see cref="PropertyName"/>.
     /// </summary>
-    public static readonly DependencyProperty InputScopeProperty = DependencyProperty.Register(
-        nameof(InputScope),
-        typeof(InputScope),
+    public static readonly DependencyProperty PropertyNameProperty = DependencyProperty.Register(
+        nameof(PropertyName),
+        typeof(string),
         typeof(ValidationTextBox),
-        new PropertyMetadata(default(InputScope)));
+        new PropertyMetadata(PropertyNameProperty, OnPropertyNamePropertyChanged));
+
+    /// <summary>
+    /// Invokes <see cref="RefreshErrors"/> whenever <see cref="PropertyName"/> changes.
+    /// </summary>
+    private static void OnPropertyNamePropertyChanged(object sender, DependencyPropertyChangedEventArgs args)
+    {
+        if (args.NewValue is not string { Length: > 0 } propertyName)
+        {
+            return;
+        }
+
+        ((ValidationTextBox)sender).RefreshErrors();
+    }
+
+    /// <summary>
+    /// Updates the bindings whenever the data context changes.
+    /// </summary>
+    private void ValidationTextBox_DataContextChanged(FrameworkElement sender, DataContextChangedEventArgs args)
+    {
+        if (oldDataContext is not null)
+        {
+            oldDataContext.ErrorsChanged -= DataContext_ErrorsChanged;
+        }
+
+        if (args.NewValue is INotifyDataErrorInfo dataContext)
+        {
+            oldDataContext = dataContext;
+
+            oldDataContext.ErrorsChanged += DataContext_ErrorsChanged;
+        }
+
+        RefreshErrors();
+    }
+
+    /// <summary>
+    /// Invokes <see cref="RefreshErrors"/> whenever the data context requires it.
+    /// </summary>
+    private void DataContext_ErrorsChanged(object sender, DataErrorsChangedEventArgs e)
+    {
+        RefreshErrors();
+    }
+
+    /// <summary>
+    /// Updates <see cref="Text"/> when needed.
+    /// </summary>
+    private void TextBox_TextChanged(object sender, TextChangedEventArgs e)
+    {
+        Text = ((TextBox)sender).Text;
+    }
+
+    /// <summary>
+    /// Refreshes the errors currently displayed.
+    /// </summary>
+    private void RefreshErrors()
+    {
+        if (this.warningIcon is not FontIcon warningIcon ||
+            PropertyName is not string propertyName ||
+            DataContext is not INotifyDataErrorInfo dataContext)
+        {
+            return;
+        }
+
+        ValidationResult result = dataContext.GetErrors(propertyName).OfType<ValidationResult>().FirstOrDefault();
+
+        warningIcon.Visibility = result is not null ? Visibility.Visible : Visibility.Collapsed;
+
+        if (result is not null)
+        {
+            ToolTipService.SetToolTip(warningIcon, result.ErrorMessage);
+        }
+    }
 }

samples/MvvmSampleUwp/Controls/ValidationTextBox.xaml

@@ -9,18 +9,27 @@
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="local:ValidationTextBox">
-                    <Grid>
+                    <Grid ColumnSpacing="12">
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="560" />
                             <ColumnDefinition Width="Auto" />
                         </Grid.ColumnDefinitions>
                         <TextBox
+                            Name="PART_TextBox"
                             HorizontalAlignment="Stretch"
                             Header="{TemplateBinding HeaderText}"
-                            InputScope="{TemplateBinding InputScope}"
                             IsSpellCheckEnabled="False"
                             PlaceholderText="{TemplateBinding PlaceholderText}"
                             Text="{TemplateBinding Text}" />
+                        <FontIcon
+                            Name="PART_WarningIcon"
+                            Grid.Column="1"
+                            Margin="0,32,0,0"
+                            VerticalAlignment="Center"
+                            FontSize="18"
+                            Foreground="Orange"
+                            Glyph="&#xE814;"
+                            Visibility="Collapsed" />
                     </Grid>
                 </ControlTemplate>
             </Setter.Value>

samples/MvvmSampleUwp/Views/ObservableValidatorPage.xaml

@@ -14,24 +14,28 @@
     <ScrollViewer Padding="{StaticResource DocumentationPageContentPadding}" CanContentRenderOutsideBounds="True">
         <StackPanel Spacing="16">
             <controls:ValidationTextBox
+                DataContext="{x:Bind ViewModel.Form}"
                 HeaderText="Enter your first:"
-                InputScope="NameOrPhoneNumber"
                 PlaceholderText="First name"
+                PropertyName="FirstName"
                 Text="{x:Bind ViewModel.Form.FirstName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
             <controls:ValidationTextBox
+                DataContext="{x:Bind ViewModel.Form}"
                 HeaderText="Enter your last name:"
-                InputScope="NameOrPhoneNumber"
                 PlaceholderText="Last name"
+                PropertyName="LastName"
                 Text="{x:Bind ViewModel.Form.LastName, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
             <controls:ValidationTextBox
+                DataContext="{x:Bind ViewModel.Form}"
                 HeaderText="Enter your email address:"
-                InputScope="EmailNameOrAddress"
                 PlaceholderText="Email"
+                PropertyName="Email"
                 Text="{x:Bind ViewModel.Form.Email, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
             <controls:ValidationTextBox
+                DataContext="{x:Bind ViewModel.Form}"
                 HeaderText="Enter your phone number:"
-                InputScope="NameOrPhoneNumber"
                 PlaceholderText="Phone number"
+                PropertyName="PhoneNumber"
                 Text="{x:Bind ViewModel.Form.PhoneNumber, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
 
             <Button Command="{x:Bind ViewModel.Form.SubmitCommand}" Content="Submit" />