Click here to Skip to main content
13,407,694 members (52,812 online)
Click here to Skip to main content
Add your own
alternative version


8 bookmarked
Posted 19 Sep 2010


, 19 Sep 2010
Rate this:
Please Sign up or sign in to vote.
How to set focus inside textbox while validating using MVVM pattern


The MVVM is an architectural pattern from Microsoft. View Class has no idea about model exist however viewmodel and model don’t know about view. It is a loosely coupled design.
This separates the role of designer to focus on UI instead of programming/business logic and allows application to work in different work streams.


If interested, get more details on 5 Minute Overview of MVVM in Silverlight.

This article explains the problem of how to set focus inside textbox(View) when we use validation logic when using MVVM pattern.


One of my friends had given me a problem and asked me for a solution which I feel is required by most developers, so I decided to write an article on this which might be helpful.
As it is a general scenario that an application has some control (Textbox) which needs input from the end user and when end user performs some action (Save or move to another form), we do validation on button click. Now in Silverlight, with the help of ValidatesOnDataErrors=True attribute display UI with red border outside textbox which indicates required field/invalid data. You can see in the below Screen 1 and Screen 2.



However, it would be good if it will blink cursor inside the textbox so that user does not need to explicitly click mouse to set focus inside textbox after which only he/she can enter input.
So the point of interest here is to achieve this using MVVM model without writing any code in View code-behind file.
The below screen 3 explains more:


Using the Code

Currently Silverlight 4.0 doesn’t provide directly CommandManager, with the help of how to Creating a command manager in Silverlight as this command manager will be implemented in View which will bind the command of button with click event.

<Button Content="Click!"="3"Grid.Column="2"Grid.ColumnSpan="2"


Cmd:CommandManager.Command="{Binding ClickCommand }" />

As currently this CommandManager is created as a separated library which can be used across any other Silverlight class library.

Class TextBoxAttach

Now define a class name as TextBoxAttach which has Dependency property (TextBoxControllerProperty). This property registers a function OnTextBoxControllerChanged which will execute whenever the textbox control loads. The important point in the below code is when this property has been attached to textbox, then it has one dictionary being defined called elements1 which stores the textbox name as ID.

private static readonly Dictionary<string,TextBox> elements1 = 
				new Dictionary<string,TextBox>();

private static void OnTextBoxControllerChanged
	(DependencyObject d, DependencyPropertyChangedEventArgs e)
var element = d as TextBox;
if (element == null)
throw new ArgumentNullException("d");
var newController = e.NewValue as ITextBoxController;
if (newController != null)
elements1.Add(element.Name, element);
newController.ClickButton += ClickButton;

Now when you click on Button, the ClickButton event fires which checks if textbox is empty to those textboxes which have been attached with TextBoxControllerProperty and it will set the focus inside textbox.

private static void ClickButton(ITextBoxController sender)
foreach (KeyValuePair<string,TextBox> pair in elements1)
TextBox element;
string key = pair.Key;
element = pair.Value;
if (string.IsNullOrEmpty(element.Text))

So to use this TextBoxAttach to set focus inside a textbox, the XAML code will be something like this:

<TextBox x:Name="textBox1" loc:TextBoxAttach.TextBoxController="{Binding}" /> 

Class MyViewModel

Class MyViewModel inherits from ITextBoxController and uses event ClickEventhandler which is defined in ITextBoxController. And here in the constructor of MyViewModel initialize the ClickCommand with the help of RelayCommand which itself inherits from ICommand.

public MyViewModel()
Value1 = "My Text1";
Value2 = "My Text2";

ClickCommand = new RelayCommand(p =>
if (ClickButton != null)

Now to display validation error UI to view MyViewModel class also inherits from IDataErrorInfo which implements the indexer also known as smart arrays in C#. It is pretty much like defining properties:

public string this[string columnName]
string strMessage = string.Empty;
CustomValidation(ref strMessage, columnName);
return strMessage;

And to use this validation feature, the XAML code will be like this:

<TextBox x:Name="textBox1" Text="{Binding Path=Value1,
Mode=TwoWay,ValidatesOnDataErrors=True}" /> 

Points of Interest

  1. MVVM- How can I select text in a textbox?
  2. Model-View-ViewModel In Silverlight Apps.


As there is always scope for improvement, it would be good if you have any comments/complaints/suggestions, kindly let me know. I will try to address those points and your feedback will help me to improve my future articles on CodeProject J.


  • Posted on 18-Sep-2010


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


About the Author

Software Developer (Senior)
India India
No Biography provided

You may also be interested in...


Comments and Discussions

GeneralGreat job! Pin
Maze14-Oct-10 9:00
memberMaze14-Oct-10 9:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.180221.1 | Last Updated 19 Sep 2010
Article Copyright 2010 by Anil_Saran
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid