MaterialDesignInXAML
Validation error is annoying
Bug explanation
Firstly I would like the validation error to be placed to the left like in this picture(i edited in paint)without the padding on the left.
Secondly, I would like the error message to be capped at max the line width of the input.(one line) as seen in the picture below.
if the error message is to big, then make the error message line a dropdown that opens on click or hover to show the whole message(or contained in a scrollview??)....
In any case, the issue(bug) which is very annoying, is the fact that the error message container currently has padding on the left, comes on top of other content(as seen in the first picture) instead of taking up its own space, and thus pushing the content below down.
Can this be changed in an error message container that is permanent there, but toggles visibility to collapsed if there is
no error to be shown? preferably an error message container that expands(if error message is to long)
kind of like the expanders
Version
4.8.1
@nivle There are definitely some improvements that could be done to the validation error; no doubt.
The validation error was added before I started contributing to the project, but I would assume it was a deliberate decision to make it "float on top" of existing content. Having your UI elements jump around based on a validation error, in my opinion, is not desireable.
Regarding the padding: material.io specs the validation error to left-align with the text being entered, not the left edge of the control. So I'd say the current behavior is correct. There are however definitely issues with the right-edge of the validation message in some cases.
@nicolaihenriksen oh, my bad, didn't think that the error message placement was also part of the material design. so I take it then that the error messages hovering over the the other inputs, placed under, is also part of the material design then?? as I read on the link you provided, so I have to provide myself enough padding for the possible error messages :/
@nivle Yeah I think you are right. I had not looked this deep into the error text spec before, but the caution in that section definitely seems to indicate that you need to "design for it" by allowing space for an (optional) error message 😐
You probably could get the "jumpy" UI to work if you wanted it to; such that the control below is pushed down a bit if the error text is visible. You would probably need to add a trigger of sorts on each control that can move, and make the Margin.Top dependent on the Validation.HasError attached property value being either true or false on the control above it. This will quickly become a mess to maintain though I could fear. Especially if your app has multi-language support where the error text length is dependent on the language; That is of course an issue regardless of which approach you go with 😞
@nicolaihenriksen I checked docs on material 3 and found this The errors actually do seem to take their own space, and push the content down, though next to it, it says that you need to keep padding in mind if the error is to long(probably to prevent the content below it from jumping around) :D
@nivle That's very interesting. Probably something worth considering for the MaterialDesign3 styles in the library then.
@Keboo Do you have any knowledge of why the validation texts are placed in adorner layers? My guess is because that is the default in WPF (if I am not mistaken). And do you think it should be moved our of that adorner layer and be a (collapsible) part of the control template instead? And lastly, should this be consistent across MaterialDesign2 and MaterialDesign3 styles, or is it ok that they differ in this regard?
The helper text is a little different. It is actually part of the control template, but it is placed inside of a Canvas (with no height/width) which allows it to render outside (i.e. below) the bounds of the control.