Wednesday 22 February 2012

Silverlight Validation Using INotifyPropertyChanged

If we want to perform validation in silverlight we have to use INotifyPropertyChanged interface which notifies clients that a property value has changed.

Create a user class and implement INotifyPropertyChanged interface.

public class User : INotifyPropertyChanged
{
        //Delegate.
        public event PropertyChangedEventHandler PropertyChanged;

        //Username.
        private string userName;
        public string UserName
        {
            get { return userName; }
            set
            {
                //Validate the username for 6 chars.
                if (value.Length < 6)
                {
                    throw new ArgumentException("User Name should contain atleast 6 chars");
                }
                userName = value;
                RaisePropertyChanged("UserName");
            }
        }

        //Password.
        private string password;
        public string Password
        {
            get { return password; }
            set
            {
                //Validate the password for 6 chars.
                if (value.Length < 6)
                {
                    throw new ArgumentException("Password should contain atleast 6 chars");
                }
                password = value;
                RaisePropertyChanged("Password");
            }
        }

        //Occurs when a property value changes.
        private void RaisePropertyChanged(string propertyName)
        {
            if (this.PropertyChanged != null)
            {
                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
}

In Login.xaml page:-

<Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="30"></RowDefinition>
            <RowDefinition Height="30"></RowDefinition>
            <RowDefinition Height="30"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="250"></ColumnDefinition>
                <ColumnDefinition Width="100"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <sdk:Label Height="28" Grid.Column="0" HorizontalAlignment="Left"  Name="lblUserName" Content="Enter User Name:" VerticalAlignment="Top" Width="100"/>
            <TextBox Grid.Column="0"  HorizontalAlignment="Right"  Name="txtUserName" VerticalAlignment="Top" Width="150">
                <TextBox.Text>
                    <!--Binding should be twoway-->
                    <Binding Mode="TwoWay" Path="UserName" NotifyOnValidationError="True" ValidatesOnExceptions="True"/>
                </TextBox.Text>
            </TextBox>
        </Grid>
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="250"></ColumnDefinition>
                <ColumnDefinition Width="100"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <sdk:Label Height="28" Grid.Column="0" HorizontalAlignment="Left"  Name="lblPassword" Content="Enter Password:" VerticalAlignment="Top" Width="100"/>
            <TextBox Grid.Column="0"  HorizontalAlignment="Right"  Name="txtPassword" VerticalAlignment="Top" Width="150">
                <TextBox.Text>
                    <!--Binding should be twoway-->
                    <Binding Mode="TwoWay" Path="Password" NotifyOnValidationError="True" ValidatesOnExceptions="True"/>
                </TextBox.Text>
            </TextBox>
        </Grid>
        <Button Grid.Row="2" Content="Login" Height="23" HorizontalAlignment="Left" Name="btnLogin" VerticalAlignment="Top" Width="75" />
    </Grid>

In constructor:-

public partial class Login: UserControl
    {
        public Login()
        {
            InitializeComponent();

            //User object.
            User objUser = new User();
            LayoutRoot.DataContext = objUser;
        }
    }

Run the appliction without debugging.



Let me know, if you have any feedback. Mail me for source code. Enjoy reading my articles…
sekhartechblog@gmail.com

1 comment:

  1. Explains the concept with simple skeleton code. This is what i was looking for. Thanks a lot !

    ReplyDelete