{"id":1317,"date":"2013-09-25T10:32:50","date_gmt":"2013-09-25T09:32:50","guid":{"rendered":"http:\/\/www.minddriven.de\/?p=1317"},"modified":"2013-10-15T08:30:46","modified_gmt":"2013-10-15T07:30:46","slug":"winrt-xaml-ui-controls-for-validation","status":"publish","type":"post","link":"https:\/\/www.minddriven.de\/index.php\/technology\/windows-8\/winrt\/winrt-xaml-ui-controls-for-validation","title":{"rendered":"WinRT XAML Validation library: UI Controls for Validation"},"content":{"rendered":"<p>After you&#8217;ve <a href=\"http:\/\/www.minddriven.de\/index.php\/technology\/windows-8\/winrt\/data-annotations-validation-attributes\">defined<\/a> the validation logic for your entities and performed validation <a href=\"http:\/\/www.minddriven.de\/index.php\/technology\/windows-8\/winrt\/implicit-explicit-validation-execution\">automatically<\/a> or <a href=\"http:\/\/www.minddriven.de\/index.php\/technology\/windows-8\/winrt\/winrt-xaml-validation-library-manual-validation\">manually<\/a>, you want to show the aggregated validation messages on the UI. Unfortunately WinRT\/XAML doesn&#8217;t come with such a functionality out of the box and solutions like <a href=\"https:\/\/prismwindowsruntime.codeplex.com\/\">Prism for Windows Runtime<\/a> don&#8217;t add much value here as well.<\/p>\n<p><a href=\"https:\/\/winrtxamlvalidation.codeplex.com\/\">WinRT XAML Validation library<\/a> to the rescue: it comes with two handy UI controls <code>ValidationPanel<\/code> and <code>ValidationSummary<\/code> that give you a generic and easy-to-use approach to show validation messages to the user.<\/p>\n<h3>ValidationPanel<\/h3>\n<p>The <code>ValidationPanel<\/code> control can be used to show validation information for a single property of your data model entity. It can be wrapped around any XAML control (e.g. a <code>TextBox<\/code>) and has the following abilities:<\/p>\n<ul>\n<li>Show a red\/yellow border around the control to represent Errors\/Warnings.<\/li>\n<li>Show all validation messages for a property at the bottom of the control (optionally).<\/li>\n<\/ul>\n<p>The usage of the <code>ValidationPanel<\/code> is quite simple. In XAML, just wrap it around a normal UI control and bind the <code>ValidationMessages<\/code> collection with the corresponding entity property as key to the control&#8217;s <code>ValidationSource<\/code> property:<\/p>\n<pre class=\"brush:xml;\">&lt;Page x:Class=\"WinRTXAMLValidation.Demo.MainPage\" ...\r\n      xmlns:vc=\"using:WinRTXAMLValidation.Library.Controls\"&gt;\r\n    ...\r\n    &lt;TextBlock Text=\"Your bid\" \/&gt;\r\n    &lt;vc:ValidationPanel ValidationSource=\"{Binding Bid.ValidationMessages[NewBid]}\"&gt;\r\n        &lt;TextBox Text=\"{Binding Bid.NewBid, Mode=TwoWay}\" \/&gt;\r\n    &lt;\/vc:ValidationPanel&gt;\r\n&lt;\/Page&gt;<\/pre>\n<p>Here&#8217;s a sample output of two\u00a0<code>ValidationPanel<\/code> controls, showing warnings and errors for the wrapped user inputs:<\/p>\n<p><a href=\"http:\/\/www.minddriven.de\/wp-content\/uploads\/2013\/09\/validationpanel_example.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-1323\" title=\"ValidationPanel example\" src=\"http:\/\/www.minddriven.de\/wp-content\/uploads\/2013\/09\/validationpanel_example-600x346.png\" alt=\"\" width=\"600\" height=\"346\" srcset=\"https:\/\/www.minddriven.de\/wp-content\/uploads\/2013\/09\/validationpanel_example-600x346.png 600w, https:\/\/www.minddriven.de\/wp-content\/uploads\/2013\/09\/validationpanel_example-800x461.png 800w, https:\/\/www.minddriven.de\/wp-content\/uploads\/2013\/09\/validationpanel_example.png 975w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>There are several properties on <code>ValidationPanel<\/code> that define its behavior:<\/p>\n<ul>\n<li><strong><code>ValidationSource<\/code><\/strong>: Bind any <code>ReadOnlyCollection&lt;ValidationMessage&gt;<\/code> to this property and the control will display the corresponding validation messages (Errors\/Warnings). Normally binds to <code>ValidationBindableBase.ValidationMessages[<em>&lt;PropertyName&gt;<\/em>]<\/code>.<\/li>\n<li><strong><code>ShowValidationMessages<\/code><\/strong> (default: <code>true<\/code>): Indicates whether the validation message texts will be shown on the control. Otherwise, only a red\/orange border will be drawn on error\/warning validation messages.<\/li>\n<li><strong><code>ShowPropertyValidationMessages<\/code><\/strong> (default: <code>true<\/code>): Indicates whether simple validation messages for a property (identified by <code>ValidationMessage.ValidationMessageKind.Property<\/code>) will be shown as text at the control.<\/li>\n<li><strong><code>ShowGroupValidationMessages<\/code><\/strong> (default: <code>true<\/code>): Indicates whether property-group validation messages (identified by <code>ValidationMessage.ValidationMessageKind.Overall<\/code>) will be shown as text at the control. This can come in handy if you don&#8217;t want to use the <code>ValidationPanel<\/code> for validation messages that span several properties, but show them in the aggregating <code>ValidationSummary<\/code> instead.<\/li>\n<\/ul>\n<p>If you&#8217;ve used <a href=\"http:\/\/www.minddriven.de\/index.php\/technology\/windows-8\/winrt\/winrt-xaml-validation-library-manual-validation\">manual validation with a fake entity<\/a> that stores the validation messages for you, you can bind the fake entity to <code>ValidationPanel<\/code> and your data model entity to the wrapped control as before:<\/p>\n<pre class=\"brush:xml;\">&lt;vc:ValidationPanel ValidationSource=\"{Binding BidValidation.ValidationMessages[NewBid]}\"&gt;\r\n    &lt;TextBox Text=\"{Binding Bid.NewBid, Mode=TwoWay}\" \/&gt;\r\n&lt;\/vc:ValidationPanel&gt;<\/pre>\n<p>&nbsp;<\/p>\n<h3>ValidationSummary<\/h3>\n<p>The second control of the WinRT XAML Validation library is the <code>ValidationSummary<\/code>. While the <code>ValidationPanel<\/code> can be used to show validation messages for a single property, the <code>ValidationSummary<\/code> is there to show all aggregated validation messages of an entity.<\/p>\n<p>Usage of the <code>ValidationSummary<\/code> is very easy. Just bind its <code>ValidationSource<\/code> property to <code>ValidationBindableBase.ValidationMessages.AllMessages<\/code>, if your entity derives from <code>ValidationBindableBase<\/code>. Moreover, you can use any <code>ReadOnlyDictionary&lt;string, ReadOnlyCollection&lt;ValidationMessage&gt;&gt;<\/code> of validation messages for the properties of an entity and bind it to the control. Here&#8217;s a simple code example:<\/p>\n<pre class=\"brush:xml;\">&lt;Page x:Class=\"WinRTXAMLValidation.Demo.MainPage\" ...\r\n      xmlns:vc=\"using:WinRTXAMLValidation.Library.Controls\"&gt;\r\n    ...\r\n    &lt;vc:ValidationSummary ValidationSource=\"{Binding Bid.ValidationMessages.AllMessages}\" Header=\"General input errors\" \/&gt;\r\n&lt;\/Page&gt;<\/pre>\n<p>The following picture shows a sample output of the <code>ValidationSummary<\/code> for a validated entity, including errors and warnings.<\/p>\n<p><a href=\"http:\/\/www.minddriven.de\/wp-content\/uploads\/2013\/09\/validationsummary_example.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-1324\" title=\"ValidationSummary example\" src=\"http:\/\/www.minddriven.de\/wp-content\/uploads\/2013\/09\/validationsummary_example-600x366.png\" alt=\"\" width=\"600\" height=\"366\" srcset=\"https:\/\/www.minddriven.de\/wp-content\/uploads\/2013\/09\/validationsummary_example-600x366.png 600w, https:\/\/www.minddriven.de\/wp-content\/uploads\/2013\/09\/validationsummary_example-800x488.png 800w, https:\/\/www.minddriven.de\/wp-content\/uploads\/2013\/09\/validationsummary_example.png 975w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/a><\/p>\n<p>There are several properties of the control that can be used to define its behavior:<\/p>\n<ul>\n<li><code><strong>ValidationSource<\/strong><\/code>: Dictionary of validation messages that should be shown in the summary. Normally binds to <code>ValidationBindableBase.ValidationMessages.AllMessages<\/code>.<\/li>\n<li><code><strong>ShowPropertyValidationMessages<\/strong><\/code> (default: <code>true<\/code>): Indicates whether validation messages for single properties should be shown in the summary or not.<\/li>\n<li><code><strong>ShowGroupValidationMessages<\/strong><\/code> (default: <code>true<\/code>): Indicates whether validation messages for property groups should be shown in the summary or not. This can come in handy, if you want to show this information only in <code>ValidationPanel<\/code>, but not in the <code>ValidationSummary<\/code>.<\/li>\n<li><code><strong>AffectedPropertyNames<\/strong><\/code>: Collection of property names, whose validation messages should be shown in the summary. If no value is given, the validation messages for all properties will be shown.<\/li>\n<li><code><strong>Header<\/strong><\/code>: Header text to be shown above the summary. If no value is given, no header will be shown.<\/li>\n<li><code><strong>ShowHeader<\/strong><\/code> (default: <code>true<\/code>): Indicates whether a header will be shown above the summary or not.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>After you&#8217;ve defined the validation logic for your entities and performed validation automatically or manually, you want to show the aggregated validation messages on the UI. Unfortunately WinRT\/XAML doesn&#8217;t come with such a functionality out of the box and solutions like Prism for Windows Runtime don&#8217;t add much value here as well. WinRT XAML Validation &hellip; <a href=\"https:\/\/www.minddriven.de\/index.php\/technology\/windows-8\/winrt\/winrt-xaml-ui-controls-for-validation\" class=\"more-link\"><span class=\"screen-reader-text\">WinRT XAML Validation library: UI Controls for Validation<\/span> weiterlesen<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[302,300],"tags":[309,310,308,143,322,76],"class_list":["post-1317","post","type-post","status-publish","format-standard","hentry","category-windows-8","category-winrt","tag-dot-net","tag-c-sharp","tag-user-input","tag-validation","tag-winrt","tag-xaml"],"_links":{"self":[{"href":"https:\/\/www.minddriven.de\/index.php\/wp-json\/wp\/v2\/posts\/1317","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.minddriven.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.minddriven.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.minddriven.de\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.minddriven.de\/index.php\/wp-json\/wp\/v2\/comments?post=1317"}],"version-history":[{"count":9,"href":"https:\/\/www.minddriven.de\/index.php\/wp-json\/wp\/v2\/posts\/1317\/revisions"}],"predecessor-version":[{"id":1328,"href":"https:\/\/www.minddriven.de\/index.php\/wp-json\/wp\/v2\/posts\/1317\/revisions\/1328"}],"wp:attachment":[{"href":"https:\/\/www.minddriven.de\/index.php\/wp-json\/wp\/v2\/media?parent=1317"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.minddriven.de\/index.php\/wp-json\/wp\/v2\/categories?post=1317"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.minddriven.de\/index.php\/wp-json\/wp\/v2\/tags?post=1317"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}