Click here to Skip to main content
11,702,396 members (73,613 online)
Click here to Skip to main content

Types Of Validation with AutoComplete TextBoxes

, 14 Aug 2015 CPOL 114.4K 4
Rate this:
Please Sign up or sign in to vote.
AutoComplete Textbox with Validations

Introduction

Today I will show you types of validtaion with different styles which can be done with Textboxes.
Here I had also used autocomplete textbox. which I would be explaining later in this reference.
Displaying Error can be done with different styling like using in TextBlock with using static resources or by Tooltip by using Tiggers.

For the UI, I will use several textboxes elements for only validation purposes & I think we can do better.
The application is built with the aim to provide an overview of the many simple best practices used in .NET programming for the newbie developer.

 

OverView

:::: MVVM List Collections ::::

This is one  of the very useful features for collections in WPF applications.
In this application example, I am making the collections of Strings in List Collections .
Here I had taken the name of Model Class as "Model" and ViewModel class as "UserViewModel3".

Now coming on to Validations we have to take IDataErrorInfo Interface with UserViewModel Class because it is binded with DataContext & INotifyPropertyChanged
In this String Property    i am matching columnName with my Property of Member Variables and using Regular Expressions for different Conditions as needed.

Using the code

####### UserViewModel3.cs #######

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Text.RegularExpressions;
using System.Threading.Tasks;
using System.Windows.Data;
using System.Windows.Input;

namespace DatePickerDemo
{ 
   public class UserViewModel3 : INotifyPropertyChanged, IDataErrorInfo
    {
        public List<String> _UsersList;

        //Constructor for View Model Class 
        public UserViewModel3()
        {
            _UsersList = new List<String>
            {
             "Sujit","Sumit","8093593365"
            };
        }

        public String valitxtbx;
        public String ValiTxtBx
        {
            get { return valitxtbx; }
            set
            {
                valitxtbx = value;
                NotifyPropertyChanged("ValiTxtBx");
            }
        }

        // INotify PropertyChange Command
        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged(String info)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(info));
            }
        }

        //For Displaying Errors as a String
        public string Error
        {
            get
            {
                return this[string.Empty];
            }
        }

        // String Errors Checking for TextBoxes
        public string this[string columnName]
        {
            get
            {
                string result = null;
                // Conditions for the TextBox Validations with Model Name Property
                if (columnName == "ValiTxtBx")
                {
                    //For Empty
                    if (ValiTxtBx == null)
                    {
                        result = "Dont Leave Blank";
                        return result.ToString();
                    }
                    // For Alphabets
                    string str = @"^[A_Za-z]+$";
                    if (Regex.IsMatch(ValiTxtBx, str))
                    {
                        result = "Enter in Digits ";
                        return result.ToString();
                    }
                    //You Can add more conditions as per yopur Convenience/Requirements
                }
                return result;
            }
        }

    } //End of UserView Class3

 

In a Model Class I had taken a single Member with property named as ValiTxtBx which is being binded by all the textboxes in the UI.

:::: Model Class ::::

 public class Model
    {  
public String valitxtbx;
        public String ValiTxtBx
        {
            get { return valitxtbx; }
            set { valitxtbx = value; }
        }
   }   // End Of Model Class

Now coming onto UI I will drag 4 textboxes and bind it with my Member property ValiTxtBx.
The last TextBox is AutoComplete TextBox.For this we have to install 3rd Party Reference from NugetPackages.
Just go to your solution Right Click on Manage Nuget Packages. Search for WPFToolkit and istall it.

Now Add this in your UI -  XAML.

xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit"

Later we can use Autocomplete TextBox anywhere in UI.        

:::: Xaml Code Here ::::

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vali="clr-namespace:DatePickerDemo" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="DatePickerDemo.Validation" 
        Title="Validation" Height="293" Width="305" 
        xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit"
           >

    <Window.Resources>

        <!--##### Style for Error Displayed Validation Textboxes #####-->
        <ControlTemplate x:Key="eTemplate1">
            <DockPanel LastChildFill="True">
                <TextBlock DockPanel.Dock="Bottom" Foreground="White" Background="Black"  FontSize="11" Text="{Binding AdornedElement.(Validation.Errors)[0].ErrorContent, ElementName=adorned}" />
                <Border BorderBrush="Transparent" BorderThickness="1">
                    <AdornedElementPlaceholder x:Name="adorned"/>
                </Border>
            </DockPanel>
        </ControlTemplate>

        <ControlTemplate x:Key="eTemplate2">
            <DockPanel LastChildFill="True">
                <Border BorderBrush="Red" BorderThickness="2">
                    <AdornedElementPlaceholder x:Name="adorned"/>
                </Border>
            </DockPanel>
        </ControlTemplate>

        <Style x:Key="eTemplate3" TargetType="{x:Type TextBox}">
            <Style.Triggers>
                <Trigger Property="Validation.HasError" Value="true">
                    <Setter Property="ToolTip" Value="{Binding (Validation.Errors)[0].ErrorContent, RelativeSource={RelativeSource Self}}"/>
                </Trigger>
            </Style.Triggers>
        </Style>

    </Window.Resources>

    <Grid>
        <TextBlock HorizontalAlignment="Left" Margin="95,10,0,0" TextWrapping="Wrap" Text="Types of Validation" VerticalAlignment="Top" Width="105"/>

        <TextBox Text="{Binding ValiTxtBx, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=true}"  Validation.ErrorTemplate="{StaticResource ResourceKey=eTemplate1}"  HorizontalAlignment="Left" Height="20" Margin="72,48,0,0" TextWrapping="Wrap"   VerticalAlignment="Top" Width="150" />
        <TextBox Text="{Binding ValiTxtBx, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=true}"  Validation.ErrorTemplate="{StaticResource ResourceKey=eTemplate2}"  HorizontalAlignment="Left" Height="20" Margin="72,101,0,0" TextWrapping="Wrap"   VerticalAlignment="Top" Width="150" />
        <TextBox Text="{Binding ValiTxtBx, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=true}"  Style="{StaticResource ResourceKey=eTemplate3}"  HorizontalAlignment="Left" Height="20" Margin="72,149,0,0" TextWrapping="Wrap"   VerticalAlignment="Top" Width="150" />
       

        <toolkit:AutoCompleteBox x:Name="ATxtBox2" Text="{Binding ValiTxtBx,  Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=true}" HorizontalAlignment="Left" Validation.ErrorTemplate="{StaticResource ResourceKey=eTemplate2}" ItemsSource="{Binding Path=_UsersList4}" Margin="72,200,0,0" Height="26"  VerticalAlignment="Top" Width="150"   />

    </Grid>

</Window>

Bind your UI AutoComplete-TextBoxes ItemSources with the ListCollection Object that you have Created.
Here I had took the name of AutoComplete-TextBox as ATxtBox2.

:::: Add datacontext to ur cs files ::::

public partial class Validation : Window
   {
       public Validation()
       {
           InitializeComponent();

           UserViewModel3 obj3 = new UserViewModel3();
           this.DataContext = obj3;

           ATxtBox2.ItemsSource = obj3._UsersList3;
       }
   }

ScreenShots

If you loved the way in which I explained to you, then stay tuned. I will soon be uploading more articles for you!!

I must Serve you to lead all ~ Sumit Anand

 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

1sumitanand
Software Developer
India India
All about me is that i am Quick Learner,Love to work in free Environment.
Core focus is to meet clients real business needs through initial consultation, followed by a communicative and collaborative approach.
Delivers applications using C# .net and MS SQL Server. Comfortable working independently, in a team, or mentoring to meets deadlines irrelevant of pressure


Cofounder @Opusway --> Hard Issues Soft Work
www.opusway.com
Group type: Social Group (No members)



You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150819.1 | Last Updated 14 Aug 2015
Article Copyright 2015 by 1sumitanand
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid