[Feature] Temporary validation control

[dim-37]

While Win UI doesn't support validation natively I propose to add validation control

Usage

<ctrl:ValildationControl x:Name="valildationControl" PropertyName="Vin">
  <TextBox
    x:Name="vinTextBox"
    Header="VIN"
    InputScope="Default"
    PlaceholderText="1AAAA111111A111111"
    Text="{Binding Vin, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
</ctrl:ValildationControl>

Implementation

public sealed partial class ValildationControl : ContentControl
{
    #region PropertyName

        /// <summary>
        /// PropertyName Dependency Property
        /// </summary>
        public static readonly DependencyProperty PropertyNameProperty =
            DependencyProperty.Register(nameof(PropertyName), typeof(string), typeof(ValildationControl),
                new PropertyMetadata((string)null));

        /// <summary>
        /// Gets or sets the PropertyName property. This dependency property
        /// indicates ....
        /// </summary>
        public string PropertyName
        {
            get => (string)GetValue(PropertyNameProperty);
            set {
                OnErrorsPropertyChange(PropertyName, value);
                SetValue(PropertyNameProperty, value);
            }
        }
        private void OnErrorsPropertyChange(string oldValue, string newValue) => ResetErrors(newValue);

        #endregion

    #region Errors

        public static readonly DependencyProperty ErrorsProperty =
            DependencyProperty.Register(
              "Errors",
              typeof(ICollection<object>),
              typeof(ValildationControl),
              new PropertyMetadata(null));

          public ICollection<object> Errors
          {
              get => (ICollection<object>)GetValue(ErrorsProperty);
              private set => SetValue(ErrorsProperty, value);
          }

        #endregion

    #region ErrorTemplate

        /// <summary>
        /// IsCreative Dependency Property
        /// </summary>
        public static readonly DependencyProperty ErrorTemplateProperty =
            DependencyProperty.Register(nameof(ErrorTemplate), typeof(DataTemplate), typeof(ValildationControl),
                new PropertyMetadata(null));

        /// <summary>
        /// Gets or sets the IsCreative property. This dependency property
        /// indicates ....
        /// </summary>
        public DataTemplate ErrorTemplate
        {
            get => (DataTemplate)GetValue(ErrorTemplateProperty);
            set => SetValue(ErrorTemplateProperty, value);
        }

        #endregion

    #region ErrorContentStyle

        /// <summary>
        /// ErrorContentStyle Dependency Property
        /// </summary>
        public static readonly DependencyProperty ErrorContentStyleProperty =
            DependencyProperty.Register(nameof(ErrorContentStyle), typeof(Style), typeof(ValildationControl),
                new PropertyMetadata((Style)null,
                    new PropertyChangedCallback(OnErrorContentStyleChanged)));

        /// <summary>
        /// Gets or sets the ErrorContentStyle property. This dependency property
        /// indicates ....
        /// </summary>
        public Style ErrorContentStyle
        {
            get => (Style)GetValue(ErrorContentStyleProperty);
            set => SetValue(ErrorContentStyleProperty, value);
        }

        /// <summary>
        /// Handles changes to the ErrorContentStyle property.
        /// </summary>
        private static void OnErrorContentStyleChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            ValildationControl target = (ValildationControl)d;
            Style oldErrorContentStyle = (Style)e.OldValue;
            Style newErrorContentStyle = (Style)e.NewValue;
            target.OnErrorContentStyleChanged(oldErrorContentStyle, newErrorContentStyle);
        }

        /// <summary>
        /// Provides derived classes an opportunity to handle changes to the ErrorContentStyle property.
        /// </summary>
        protected void OnErrorContentStyleChanged(Style oldErrorContentStyle, Style newErrorContentStyle) => TrySetStyle();

        #endregion

    public ValildationControl()
    {
        this.DefaultStyleKey = typeof(ValildationControl);
        this.DataContextChanged += OnDataContextChanged;
    }
    protected void TrySetStyle() {
        if (ErrorContentStyle != null && Errors != null)
        {
            if (Errors.Count == 0)
            {
                this.Resources.Remove(ErrorContentStyle.TargetType);
            }
            else
            {
                this.Resources[ErrorContentStyle.TargetType] = ErrorContentStyle;
            }
        }
    }

    protected INotifyDataErrorInfo cutrrentINotifyDataErrorInfo = null;
    protected void OnDataContextChanged(object element,DataContextChangedEventArgs e)
    {
        if (cutrrentINotifyDataErrorInfo != null)
        {
            cutrrentINotifyDataErrorInfo.ErrorsChanged -= OnErrorsChanged;
        }
        if (e.NewValue is INotifyDataErrorInfo DataContext)
        {
            DataContext.ErrorsChanged += OnErrorsChanged;
            cutrrentINotifyDataErrorInfo = DataContext;
        }
    }

    private void ResetErrors(string value)
    {
        if (cutrrentINotifyDataErrorInfo != null)
        {
            var errors = cutrrentINotifyDataErrorInfo.GetErrors(value);
            if (errors is ICollection<object> collection)
            {
                Errors = collection;
            }
            else
            {
                Errors = new ObservableCollection<object>(errors.Cast<object>().ToList());
            }
            TrySetStyle();
        }
    }

    private void OnErrorsChanged(object obj, DataErrorsChangedEventArgs args) => ResetErrors(PropertyName);
}

  <Style TargetType="local:ValildationControl">
  <Setter Property="HorizontalContentAlignment" Value="Stretch" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="local:ValildationControl">
        <Border
        Background="{TemplateBinding Background}"
        BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="{TemplateBinding BorderThickness}">
          <Grid>
            <Grid.RowDefinitions>
              <RowDefinition />
              <RowDefinition />
            </Grid.RowDefinitions>
            <ContentPresenter
            Margin="{TemplateBinding Padding}"
            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
            Content="{TemplateBinding Content}"
            ContentTemplate="{TemplateBinding ContentTemplate}"
            ContentTransitions="{TemplateBinding ContentTransitions}" />
            <ItemsControl
            Grid.Row="1"
            ItemTemplate="{TemplateBinding ErrorTemplate}"
            ItemsSource="{TemplateBinding Errors}" />
          </Grid>
        </Border>

      </ControlTemplate>
    </Setter.Value>
  </Setter>
  <Setter Property="ErrorTemplate">
    <Setter.Value>
      <DataTemplate>
        <muxc:InfoBar
        Title="Ошибка"
        IsClosable="False"
        IsIconVisible="True"
        IsOpen="True"
        Message="{Binding}"
        Severity="Error" />
      </DataTemplate>
    </Setter.Value>
  </Setter>
</Style>

[ghost]

Hello, 'dim-37! Thanks for submitting a new feature request. I've automatically added a vote 👍 reaction to help get things started. Other community members can vote to help us prioritize this feature in the future!

[michael-hawker]

@jamesmcroft thoughts as you've been working on something, eh?

[jamesmcroft]

This would definitely work. I'd looked into trying to do something clever with the ObservableValidator itself but this works at any level as it takes advantage of the INotifyDataErrorInfo interface.

The reason I struggled with this is the limitations of what is capable with the use of ValidationAttribute in the actual ObservableValidator. As it is based on an attribute, you're limited (without a bit of reflection) to constant values which aren't flexible enough for most input validation scenarios.

Some good examples of this would be the ability to validate a DatePicker based on a configurable minimum or maximum DateTime value in a range. Or another recent example, validating the method of contact input of a TextBox based on a type selected from a dropdown.

This is one of the reasons I built the custom data validation implementation in MADE which has the complimentary InputValidator which is similar to this implementation.

[xperiandri]

But you can always implement a custom validator for that case

[michael-hawker]

FYI @Sergio0694