Saturday 1 March 2014

How to Create a Textbox with validation - WPF (Xaml)

In this post we are going to see how to create a textbox with handling a  validation in wpf (xaml). For this we are going to create a textbox, whenever user enter the values in the textbox it checks and validates the value and notify to the user in the UI, based on the element Binding.ValidationRules, which specifes the UI that we have some validation on the data binding, then we have to add the validation rule in this example we are added the   <ExceptionValidationRule />  , which make the textbox in red colored border on the application exception , yes we have to throw the application exception.

create a Employee model class, set the condition in the name property with throw as application exception when name is given as empty or null in the UI,


XAML :

<Window x:Class="AdornerSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>             
        <Style x:Key="txt" TargetType="TextBlock">
            <Setter Property="HorizontalAlignment" Value="Right"></Setter>
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="FontSize" Value="14" />           
            <Setter Property="FontFamily" Value="Arial" />                
        </Style>
        <Style TargetType="TextBox" x:Key="mantxt">
            <Setter Property="Margin" Value="5"    />
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Height" Value="50" />
            <Setter Property="Width" Value="250"/>
        </Style>
       
        <Style TargetType="TextBox" x:Key="katxt" BasedOn="{StaticResource mantxt}">
            <Setter Property="Foreground" Value="Green" />
        </Style>
       
        <Style x:Key="acc" TargetType="AccessText">
            <Setter Property="HorizontalAlignment" Value="Right"></Setter>
            <Setter Property="VerticalAlignment" Value="Center" />
            <Setter Property="FontSize" Value="20" />
            <Setter Property="FontFamily" Value="Arial" />
        </Style>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="2*" />          
        </Grid.ColumnDefinitions>
        <AccessText Grid.Row="0" Style="{StaticResource acc}">Name</AccessText>
        <TextBox Style="{StaticResource mantxt}" Grid.Column="1">
            <TextBox.Text>
                <Binding Path="Name">
                    <Binding.ValidationRules>
                        <ExceptionValidationRule />
                    </Binding.ValidationRules>
                </Binding>
            </TextBox.Text>
        </TextBox>
        <TextBlock Style="{StaticResource txt}" Grid.Row="1">Designation</TextBlock>
        <TextBox Text="{Binding Designation}"  Style="{StaticResource katxt}" Grid.Row="1" Grid.Column="1"></TextBox>
    </Grid>
</Window>



C#:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace AdornerSample
{
    public class Employee
    {

        private string _name;
        public string Name
        {
            set { _name = value;
                if(string.IsNullOrEmpty(value))
                    throw new ApplicationException("Employee Name is Mandatory");
            }
            get { return _name; }
        }

        private int _id;
        public int Id {

            set
            {
                _id = value;
            }
            get {
                return _id;
            }
       
        }

        private string _designation;
        public String Designation
        {
            set { _designation = value; }
            get { return _designation; }
        }

        private int _salary;
        public int Salary {

            set { _salary = value; }
            get { return _salary; }
        }
    }
}


Output:
In this UI you can see how the values are validate and changes the border of the name textbox in different color , when user doesn't enter the value.



From this post you can see how to validate the property in the UI with out IDataErrorInfo interface implmentation.



No comments:

Post a Comment