UWP - AutoSuggestBox customization - validation

Question

I need to support validation on some standard AutoSuggestBox control. So my idea was to customize AutoSuggestBox control by changing it's TextBox to ValidatingTextBox (my implementation of ValidatingTextBox by James Croft). Is that even possible? If yes - how, and if not - what is the alternative?

Answer 1

So my idea was to customize AutoSuggestBox control by changing it's TextBox to ValidatingTextBox
It is not recommended replacing the TextBox of AutoSuggestBox. Some default functionalities might fail because of that. Instead, you can add some function to it. And WinRTXamlToolkit offers a great validation extension to TextBox control.
You can apply this extension to AutoSuggestBox by following steps:
Reference WinRTXamlToolkit in your project. Add reference of WinRTXamlToolkit.Controls.Extensions in your XAML page like below:
<Page
...
xmlns:extensions="using:WinRTXamlToolkit.Controls.Extensions"
...>
Create a copy of your AutoSuggestBox control's style template with Visual Studio. Or you can copy the template from here, and apply it to your AutoSuggestBox control.
Find the TextBox Control in the template. Add extensions:FieldValidationExtensions.Format="the format you need" to it like below:
<TextBox extensions:FieldValidationExtensions.Format="Numeric"
x:Name="TextBox" ScrollViewer.BringIntoViewOnFocusChange="False" DesiredCandidateWindowAlignment="BottomEdge" Header="{TemplateBinding Header}" Margin="0" PlaceholderText="{TemplateBinding PlaceholderText}" Style="{TemplateBinding TextBoxStyle}" Width="{TemplateBinding Width}" Canvas.ZIndex="0"/>
If you want to show validation error message. You can change the panel of this TextBox from Grid to StackPanel and add a TextBlock like below:
<StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Orientation">
<VisualState x:Name="Landscape"/>
<VisualState x:Name="Portrait"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBox extensions:FieldValidationExtensions.Format="Numeric"
x:Name="TextBox" ScrollViewer.BringIntoViewOnFocusChange="False" DesiredCandidateWindowAlignment="BottomEdge" Header="{TemplateBinding Header}" Margin="0" PlaceholderText="{TemplateBinding PlaceholderText}" Style="{TemplateBinding TextBoxStyle}" Width="{TemplateBinding Width}" Canvas.ZIndex="0"/>
<TextBlock Text="{Binding (extensions:FieldValidationExtensions.ValidationMessage), ElementName=TextBox}"
Visibility="{Binding (extensions:FieldValidationExtensions.ValidationMessageVisibility), ElementName=TextBox}" />
...
</StackPanel>
Now you get a basic validatingAutoSuggestBox ready for use.