validation - UWP - AutoSuggestBox customization -
i need support validation on standard autosuggestbox control. idea customize autosuggestbox control changing it's textbox validatingtextbox (my implementation of validatingtextbox james croft). possible? if yes - how, , if not - alternative?
so idea customize autosuggestbox control changing it's textbox validatingtextbox
it not recommended replacing textbox
of autosuggestbox
. default functionalities might fail because of that. instead, can add function it. , winrtxamltoolkit offers great validation extension textbox
control.
you can apply extension autosuggestbox
following steps:
reference winrtxamltoolkit in project. add reference of
winrtxamltoolkit.controls.extensions
in xaml page below:<page ... xmlns:extensions="using:winrtxamltoolkit.controls.extensions" ...>
create copy of
autosuggestbox
control's style template visual studio. or can copy template here, , apply autosuggestbox control.find textbox control in template. add
extensions:fieldvalidationextensions.format="the format need"
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 want show validation error message. can change panel of
textbox
grid
stackpanel
, addtextblock
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 basic validatingautosuggestbox ready use.
Comments
Post a Comment