How to set TextBox ErrorTemplate?

[mysteryx93]

How do I set the TextBox ErrorTemplate to display validation errors?

I want something that won't screw up the layout, a red exclamation mark at the right with the error as tooltip. Any sample of it done?

[mysteryx93]

OK found DataValidationErrors source template here
https://github.com/AvaloniaUI/Avalonia/blob/master/src/Avalonia.Themes.Fluent/Controls/DataValidationErrors.xaml

It has a nice example of it built-in showing up in the previewer!

So all I need is to add this to App.xaml

<Style Selector="DataValidationErrors">
    <Setter Property="Template" Value="{DynamicResource TooltipDataValidationContentTemplate}" />
    <Setter Property="ErrorTemplate" Value="{DynamicResource TooltipDataValidationErrorTemplate}" />
</Style>

Now... can I add DataValidationErrors to a ListBox to warn when the list is empty?

[maxkatz6]

can I add DataValidationErrors to a ListBox to warn when the list is empty

Probably. You need to add this control to the template. And set error to it when you need. You can use ComboBox as a reference, somewhat similar control.

[mysteryx93]

My first thought is adding DataValidationErrors to the template indeed.

But it's not showing the error that the list is empty.

For a situation where validation errors can't be displayed well in a control, like multi-control validations, is there another method of displaying validation errors?

<Style Selector="ListBox">
    <Setter Property="Template">
        <ControlTemplate>
            <DataValidationErrors>
                <Border Name="border"
                        ClipToBounds="{TemplateBinding ClipToBounds}"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="{TemplateBinding CornerRadius}">
                    <ScrollViewer Name="PART_ScrollViewer"
                                  HorizontalScrollBarVisibility="{TemplateBinding (ScrollViewer.HorizontalScrollBarVisibility)}"
                                  VerticalScrollBarVisibility="{TemplateBinding (ScrollViewer.VerticalScrollBarVisibility)}"
                                  AllowAutoHide="{TemplateBinding (ScrollViewer.AllowAutoHide)}">
                        <ItemsPresenter Name="PART_ItemsPresenter"
                                        Items="{TemplateBinding Items}"
                                        ItemsPanel="{TemplateBinding ItemsPanel}"
                                        ItemTemplate="{TemplateBinding ItemTemplate}"
                                        Margin="{TemplateBinding Padding}"
                                        VirtualizationMode="{TemplateBinding VirtualizationMode}" />
                    </ScrollViewer>
                </Border>
            </DataValidationErrors>
        </ControlTemplate>
    </Setter>
</Style>

[mysteryx93]

oh I would need to create a derived class to make work? I'd rather avoid going that route for something so trivial...

[maxkatz6]

DataValidationErrors.ErrorProperty just an attached property, which is used by DataValidationErrors control inside of the template.
So, it doesn't matter where you would you call DataValidationErrors.SetError(control, error).

[maxkatz6]

From what I remember, error argument should be of DataValidationException type.
Not necessary to use this specific one, but its ErrorData property is used instead of Message with exception type.

[maxkatz6]

Also, you can use bindings from XAML. See from the TextBox template:

        <TextBox Text="Sample">
          <DataValidationErrors.Error>
            <sys:Exception />
          </DataValidationErrors.Error>
        </TextBox>

you can do similarly for your control with DataValidationErrors inside of the template:

<ListBox DataValidationErrors.Error="{Binding ValidationResult}" />

or even this should work without modifying any templates:

<DataValidationErrors Error="{Binding ValidationResult}">
    <ListBox />
</DataValidationErrors>

[maxkatz6]

Basically, if you check source code of this control, it's very simple:

1. Get error from the attached error property
2. Inherit ContentControl to display child control.
3. Display error below the child control (depends on the template)

And control itself or developer are responsible to set this attached error property.

[maxkatz6]

Linking documentation issue https://github.com/AvaloniaUI/Documentation/issues/278

[mysteryx93]

DataValidationErrors.Error and DataValidationErrors.Errors exist as attached property, and I'd need to re-invent my own wheel and create DataValidationErrors.ErrorProperty just to get basic validation to work?

[maxkatz6]

basic validation to work

Basic validation already works for basic input elements. ListBox and ListBoxItem are not input elements, and validation is domain logic specific for them.

I'd need to re-invent my own wheel

From what I understand, you don't need to create your own DataValidationErrors control, but you can. It's simple.
What you need is to tell this control, what error to display - DataValidationErrors.Error/Errors property. It can be set directly (with SetError method) or binded.

[maxkatz6]

I will prepare some simple sample now

[maxkatz6]

ListBox with DataValidationErrors controls inside of the template. Validation rules are defined with an attached property.

CustomValidationDemo.zip

[mysteryx93]

Thanks for the sample, but setting validation rule in the UI is a big no-no. Validation rule goes in the ViewModel.

If we create an extension method, it needs to listen to INotifyDataErrorInfo.ErrorsChanged to bridge it with DataValidationErrors.SetError.

Something like...

<ListBox Items="{Binding Sources}" err:ErrorExtension.Property="Items" />

or perhaps to make a specific text block display the error

<TextBlock err:ErrorExtension.Binding="{Binding Sources}" />

Either way, accessing the INotifyDataErrorInfo.ErrorsChanged through the binding will be a little bit complicated, need to know the architecture of bindings to program with it.

[mysteryx93]

By setting this in App.xaml

<Style Selector="DataValidationErrors">
    <Setter Property="Template" Value="{DynamicResource TooltipDataValidationContentTemplate}" />
    <Setter Property="ErrorTemplate" Value="{DynamicResource TooltipDataValidationErrorTemplate}" />
</Style>

The textbox gets partially hidden when an error is displayed.

<StackPanel Orientation="Horizontal">
    <TextBlock Text="Rate Multiplier  " VerticalAlignment="Center" />
    <Grid Width="80">
        <TextBox Text="{Binding Settings.Rate}" Classes="compact" />
    </Grid>
</StackPanel>

Version: 0.10.15
OS: Linux (Garuda)

[maxkatz6]

You can check it with devtools what's wrong. Probably some min width or something like this is set on some control of the visual tree.

[mysteryx93]

Indeed, MinWidth=64 set by TextBoxThemeMinWidth. If I remove that, it works.

[Nicker991]

How to open devtools in VS?

[timunie]

run your App in debug mode. Then press [F12] https://docs.avaloniaui.net/docs/getting-started/developer-tools

[Nicker991]

Thanks.

[alaingaudreau]

For those who land here like me trying to get a TextBox to display the errors in a tooltip in order to stop it from affecting your layout, you can simply set the DataValidationErrors Theme property to TooltipDataValidationErrors within App.axaml or a custom axaml file with all of your styles etc...

This may not be appropriate for all situations but it works for us with the controls we use with Avalonia 11-Pre6

<Style Selector="DataValidationErrors">
        <Setter Property="Theme" Value="{StaticResource TooltipDataValidationErrors}" />
</Style>

[Cacsjep]

love it, took some time to found this, would be great if this are in docs or so

[zangetsudo]

btw, how to change the default Icons of Error Indicator??

[timunie]

best to lookup the original style used in the source code or use DevTools