Howto enable validation errors to show on TextBox on Composite Control

[EtherGhost]

I have a Composite Control with a TextBlock and a TextBox. It's a TextBox with a TextBlock Header and some other stuff. How can I make that TextBox show validation errors?
I have done this with WPF, it was pretty straight forward but I have no idea how to do it with Avalonia.
I have asked the same question here at Gitter November 11, 10:05. Hum, the time might be my local time by the way...
Project where I'm experimenting with it:
https://github.com/kvalitetskontrollMarkaryd/Avalonia.ValidationTest

[maxkatz6]

Not sure what so special about your composite control.
But in general each control, that supports validation, has DataValidationErrors inside of it.
For TextBox you can see it here https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Themes.Fluent/Controls/TextBox.xaml#L47
And I believe you have already seen from another discussion, DataValidationErrors has its own template that wraps inner control and also add error block there https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Themes.Fluent/Controls/DataValidationErrors.xaml

So, probably answering your question, you basically can do similarly with your own controls. You can wrap content of HeaderTextBox with DataValidationErrors and pass Errors array to its property.

[EtherGhost]

Not sure what so special about your composite control. But in general each control, that supports validation, has DataValidationErrors inside of it. For TextBox you can see it here https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Themes.Fluent/Controls/TextBox.xaml#L47 And I believe you have already seen from another discussion, DataValidationErrors has its own template that wraps inner control and also add error block there https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Themes.Fluent/Controls/DataValidationErrors.xaml

So, probably answering your question, you basically can do similarly with your own controls. You can wrap content of HeaderTextBox with DataValidationErrors and pass Errors array to its property.

I wouldn't say there is something special about it. It's a UserControl with some StyledProperty's, DataContext set to this.
With WPF I solved it like this (Note: Some stuff for IsChanged and OriginalValue included):

Style for the Composite Control (UserControl)

<Style x:Key="CompositeControlStyle"
               TargetType="UserControl">
            <Setter Property="Validation.ErrorTemplate"
                    Value="{StaticResource ValidationErrorHint}" />
        </Style>

<ControlTemplate x:Key="ValidationErrorHint">
            <Grid>
                <Border Background="Red"
                        Margin="0,0,0,0"
                        Width="15"
                        Height="15"
                        CornerRadius="10"
                        HorizontalAlignment="Left"
                        VerticalAlignment="Center"
                        ToolTip="{Binding ElementName=CustomAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">
                    <TextBlock Text="!"
                               VerticalAlignment="Center"
                               HorizontalAlignment="Center"
                               FontWeight="Bold"
                               Foreground="White"
                               FontSize="13" />
                </Border>
                <AdornedElementPlaceholder Name="CustomAdorner" />
            </Grid>
        </ControlTemplate>

Style for the TextBox living on that Composite Control (Not needed for the Validation)

<Style x:Key="TextBoxStyle"
               TargetType="TextBox">
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsChanged, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
                             Value="True">
                    <Setter Property="ToolTipService.InitialShowDelay"
                            Value="0" />
                    <Setter Property="Background"
                            Value="SteelBlue" />
                    <Setter Property="ToolTip"
                            Value="{Binding OriginalValue, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" />
                </DataTrigger>
            </Style.Triggers>
        </Style>-->

Result

[maxkatz6]

Or if you question was "how I can actually validate control and pass an error", it should be similar to WPF. Use INotifyDataErrorInfo interface or some framework that simplified some operations. For example ReactiveUI https://www.reactiveui.net/docs/handbook/user-input-validation/

[EtherGhost]

Yes it's similar. I got validation working the same way it can be done on WPF. That's what I find interesting, trying out what can be done the same way on Avalonia as on WPF.

[geometrikal]

@maxkatz6

I have this same problem.

I want to group some controls into a user control - a TextBox and two buttons.

I create a UserControl, layout the TextBox and buttons, and in the code-behind bind the TextBox to a Text property, then register a DirectProperty for that same Text property.

Now I add the UserControl into my Window and bind the Text property of the UserControl to a property in my ViewModel, which is a ReactiveValidationObject. In the ViewModel add validation for this property.

What is the most efficient way to pass any validation errors through to the inner TextBox in my UserControl? Do I have to implement INotifyDataErrorInfo? Is there some sub-class of UserControl that already implements this? I noticed a method "AddOwnerWithDataValidation" that creates a DirectProperty, is it useful for this? What does it do?

[timahrentlov]

I got the same problem:

If I use a single TextBox control in my "page" view, then the errors show up as red text. That is all good. I don't want to change the look.

If I place the TextBox control in a composite user control that also have a label, then I see no red text. I can wrap it in a <DataValidationErrors>, or change the editable TwoWay TextPropery from Styled to Direct, making sure the I do enableDataValidation:true, but to no avail.

Why dear lord, oh why ?

How does this data validation really work? How does - for example - the TextBox control latch on to INotifyDataErrorInfo of the DataContext ? And is placing the control inside a composite user control somehow messing with this?

I've tried making it a templated control. Same result. The Label and the TextBox displays and works fine, setting the template with style (thanks @timunie for your guide), but the red validation text still don't show.

What am I missing here?

(I'm using v11 RC1 and ObservableValidator from CT MVVM)

[timahrentlov]

I made it really simple. No errors er displayed.

This is my "control":

<Grid x:Class="MyApp.CustomControls.EditTextField4"
      xmlns="https://github.com/avaloniaui"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      x:Name="Root"
      RowDefinitions="*,2,*">

    <Label Classes="fieldlabel" Content="{Binding #Root.LabelText}" />
    <TextBox Grid.Row="2"
             Classes="fielddata"
             Text="{Binding #Root.ContentText, Mode=TwoWay}" />
</Grid>

public partial class EditTextField4 : Grid
{
    public static readonly DirectProperty<EditTextField4, string> LabelTextProperty =
        AvaloniaProperty.RegisterDirect<EditTextField4, string>(
            nameof(LabelText),
            o => o.LabelText,
            (o, v) => o.LabelText = v,
            defaultBindingMode:BindingMode.Default,
            enableDataValidation:false
        );
    
    private string _labelText;
    public string LabelText
    {
        get => _labelText;
        set => SetAndRaise(LabelTextProperty, ref _labelText, value);
    }
    
    public static readonly DirectProperty<EditTextField4, string> ContentTextProperty =
        AvaloniaProperty.RegisterDirect<EditTextField4, string>(
            nameof(ContentText),
            o => o.ContentText,
            (o, v) => o.ContentText = v,
            defaultBindingMode:BindingMode.TwoWay,
            enableDataValidation:true
        );
    
    private string _contentText;
    public string ContentText
    {
        get => _contentText;
        set => SetAndRaise(ContentTextProperty, ref _contentText, value);
    }
    
    public EditTextField4()
    {
        InitializeComponent();
    }

    private void InitializeComponent()
    {
        AvaloniaXamlLoader.Load(this);
    }
}

[timahrentlov]

I also tried this. No errors are displayed.

<Styles
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:cc="using:MyApp.CustomControls">

    <Design.PreviewWith>
        <cc:EditTextField2 />
    </Design.PreviewWith>

    <Style Selector="cc|EditTextField2">
        <Setter Property="Template">
            <ControlTemplate>
                <DataValidationErrors>
                    <Grid RowDefinitions="*,2,*">
                        <Label
                            Classes="fieldlabel"
                            Content="{TemplateBinding LabelText}"
                            Foreground="{TemplateBinding Foreground}" />
                        <TextBox
                            Grid.Row="2"
                            Classes="fielddata"
                            Foreground="{TemplateBinding Foreground}"
                            Text="{TemplateBinding ContentText,
                                                   Mode=TwoWay}" />
                    </Grid>
                </DataValidationErrors>
            </ControlTemplate>
        </Setter>
    </Style>
</Styles>

using Avalonia;
using Avalonia.Controls.Primitives;
using Avalonia.Data;

namespace SlingTrackerApp.CustomControls;

public partial class EditTextField2 : TemplatedControl
{
    public static readonly DirectProperty<EditTextField2, string> LabelTextProperty =
        AvaloniaProperty.RegisterDirect<EditTextField2, string>(
            nameof(LabelText),
            o => o.LabelText,
            (o, v) => o.LabelText = v,
            defaultBindingMode:BindingMode.Default,
            enableDataValidation:false);
    
    private string _labelText;
    public string LabelText
    {
        get => _labelText;
        set => SetAndRaise(LabelTextProperty, ref _labelText, value);
    }
    
    public static readonly DirectProperty<EditTextField2, string> ContentTextProperty =
        AvaloniaProperty.RegisterDirect<EditTextField2, string>(
            nameof(ContentText),
            o => o.ContentText,
            (o, v) => o.ContentText = v,
            defaultBindingMode:BindingMode.TwoWay,
            enableDataValidation:true);
    
    private string _contentText;
    public string ContentText
    {
        get => _contentText;
        set => SetAndRaise(ContentTextProperty, ref _contentText, value);
    }
    
    public EditTextField2()
    {
    }
}

[timahrentlov]

Many of the examples and advice given relates to v0.10. I wonder if something has changed.

[oshelton]

I wound up figuring out how to make this work. The docs definitely appear to be missing some details.

One aspect is that you have to make sure to actually pass through the validation errors to your custom/composite control similar to how Avalonia's own TextBox does. It looks like your control's ContentTextProperty is correctly set up so you just need to modify the condition in your version of the method to check for that property instead.

The other is that your control's template has to specify a DataValidationErrors control in its XAML that actually binds to the controls errors like this example from the Material.Avalonia project.

[timunie]

please open an issue in docs repo if you think there is missing information. And even better, if you think you know what is missing, file a PR to the docs 😄.

[oshelton]

I'll see what I can do.

Sadly I barely have time to write documentation for my own projects 😆

[timahrentlov]

I wound up figuring out how to make this work. The docs definitely appear to be missing some details.

It works! Thanks @oshelton

To the those looking for help on the same issue, the code below is what ended up working for me:

using Avalonia;
using Avalonia.Controls;
using Avalonia.Controls.Primitives;
using Avalonia.Data;

namespace MyApp.CustomControls;

public partial class EditTextField2 : TemplatedControl
{
    public static readonly DirectProperty<EditTextField2, string> LabelTextProperty =
        AvaloniaProperty.RegisterDirect<EditTextField2, string>(
            nameof(LabelText),
            o => o.LabelText,
            (o, v) => o.LabelText = v,
            defaultBindingMode:BindingMode.Default,
            enableDataValidation:false);
    
    private string _labelText;
    public string LabelText
    {
        get => _labelText;
        set => SetAndRaise(LabelTextProperty, ref _labelText, value);
    }
    
    public static readonly DirectProperty<EditTextField2, string> ContentTextProperty =
        AvaloniaProperty.RegisterDirect<EditTextField2, string>(
            nameof(ContentText),
            o => o.ContentText,
            (o, v) => o.ContentText = v,
            defaultBindingMode:BindingMode.TwoWay,
            enableDataValidation:true);
    
    private string _contentText;
    public string ContentText
    {
        get => _contentText;
        set => SetAndRaise(ContentTextProperty, ref _contentText, value);
    }
    
    protected override void UpdateDataValidation(AvaloniaProperty property, BindingValueType state, Exception? error)
    {
        if (property == ContentTextProperty)
        {
            DataValidationErrors.SetError(this, error);
        }
    }
    
    public EditTextField2()
    {
    }
}

<Styles
    xmlns="https://github.com/avaloniaui"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:cc="using:MyApp.CustomControls">

    <Design.PreviewWith>
        <cc:EditTextField2 />
    </Design.PreviewWith>

    <Style Selector="cc|EditTextField2">
        <Setter Property="Template">
            <ControlTemplate>
                <DataValidationErrors Errors="{TemplateBinding (DataValidationErrors.Errors)}">
                    <Grid RowDefinitions="*,2,*">
                        <Label
                            Classes="fieldlabel"
                            Content="{TemplateBinding LabelText}"
                            Foreground="{TemplateBinding Foreground}" />
                        <TextBox
                            Grid.Row="2"
                            Classes="fielddata"
                            Foreground="{TemplateBinding Foreground}"
                            Text="{TemplateBinding ContentText,
                                                   Mode=TwoWay}" />
                    </Grid>
                </DataValidationErrors>
            </ControlTemplate>
        </Setter>
    </Style>
</Styles>

Would have loved to have something simpler that did not require a templated control though.

[timahrentlov]

It was. "[..] validation errors to show on TextBox on Composite Control", not templated control. But here we are

[timunie]

is a CompositeControl a UserControl for you? If you still need support on it, please attach a minimal sample of what you have so far and a sketch what you would like to see.

[timahrentlov]

Not necessarily. It could be something like this #6939 (comment) which is simply a "shortcut" to bundle controls internally to your app for reuse purposes. But for now, I can only get validation to work with a templated control.

[timunie]

Maybe you are after something like this? #12212 (comment)

Note: You can base on Grid, but instead of adding the XAML directly, add a style with a control template via style like in the templated control.

[timahrentlov]

Initially I was after a composite or compound "control" with textbox validation intact inside. Because that was what I needed. I ended up using a templated control, because that was what worked.

I would still prefer the former because the later is - to me - an example of overthinking what I actually need.

However. The latter works. I will double back later when time permits :)

[timahrentlov]

@timunie

Another related issue I'm having is the "double issue" that you've been reporting here: CommunityToolkit/WindowsCommunityToolkit#3763.

I'm getting that right now. It's an odd story.

First I had some simple code like this:

[ObservableProperty] 
[Required]
[StringLength(14, MinimumLength = 10)]
private string? _serial;

which worked ok and displayed the error message once, but it did not notify the issue via NotifyDataErrorInfo.ErrorsChanged - and INotifyDataErrorInfo.HasErrors was empty.

Then I changed the attributes to

[ObservableProperty] 
[NotifyDataErrorInfo]
[Required]
[StringLength(14, MinimumLength = 10)]
private string? _serial;

Now the NotifyDataErrorInfo came alive, and my event dependant code fired, but it also displayed error message twice.

Any ideas why?

[timunie]

https://docs.avaloniaui.net/docs/next/guides/development-guides/data-validation#manage-validationplugins

[timahrentlov]

Ha! Brilliant :)

However, ExpressionObserver looks internal. A change in v11 ?

[timahrentlov]

#10209

[timunie]

Updated the docs. Thanks for pointing this out.

[trashhacker]

yea its old but maybe u like somthing like that
#17130