Click here to Skip to main content
11,578,524 members (61,558 online)
Click here to Skip to main content

A post about Silverlight Focusing Issue

, 22 Feb 2011 CPOL 7.1K 4
Rate this:
Please Sign up or sign in to vote.
Silverlight Focusing Issue
As a developer or designer, making data entry simpler for users is our job. One of the most used techniques in this process is giving focus to a control. Because, when a user navigates to a page, then user can start data entry without clicking to a control in the page. This technique is also available in Silverlight applications.

Issue Demonstration



Let’s demonstrate focusing technique in a Silverlight Application.

Firstly, we are adding 2 textbox control in a stackpanel and then giving focus to second textbox control.

<Stackpanel>
    <TextBox Width="208" x:name="txtOne" Margin="0,10,0,0"/>
    <textbox Width="208" x:name="txtTwo" Margin="0,10,0,0"/>
</Stackpanel>

Code - Behind

public MainPage()
{
    InitializeComponent();
    this.Loaded += new RoutedEventHandler(MainPage_Loaded);
}
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    txtTwo.Focus();
}
When we run our Silverlight application, we will see an unexpected behavior.




If we click somewhere in the page, second textbox will take focus as expected. But why do we have to click? It seems an unnecessary action.

The exact reason behind this behavior is so obvious. Because our Silverlight plugin does not have focus. We provide giving focus to plugin by clicking the page. After this process, Silverlight could behave as expected. But how can we solve this problem ?

Solutions

Actually, we have 2 different solution techniques for his problem. First one is giving focus to Silverlight plugin using JavaScript. The other one is doing the same operation using Silverlight.

First Solution

We can give focus to Silverlight plugin using this JavaScript code like below:

var SlElement = document.getElementById('silverlightControlHost');
 if (SlElement)
     SlElement.focus(); 
Second Solution

In this solution, we will use HtmlPage type that is in System.Windows.Browser namespace. As you know, we can make some HTML DOM operations using this type. At this point, we will use static Focus method of HtmlPage’s Plugin property.

Final Code-Behind

public MainPage()
{
    InitializeComponent();
    this.Loaded += new RoutedEventHandler(MainPage_Loaded);
}
 
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    System.Windows.Browser.HtmlPage.Plugin.Focus();
    txtTwo.Focus();
} 
When we run this application, we can see expected behavior like below:



Hope this helps...

License

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

Share

About the Author

İlkay İlknur
Software Developer Innova
Turkey Turkey
İlkay İlknur has been working at Innova IT Solutions in Turkey.
Also he is a MCTS - WCF 4.0,Silverlight 4.0.

Generally,he writes articles about C#,WCF,WPF and Silverlight.

You can follow my blog at http://www.ilkayilknur.com/en
My twitter account http://twitter.com/ilkayilknur

You may also be interested in...

Comments and Discussions

 
GeneralReason for my vote of 5 Really Nice Pin
Ali Taghvajou1-Mar-11 18:30
memberAli Taghvajou1-Mar-11 18:30 
GeneralReason for my vote of 5 Nice and simple. Thanks! Pin
Rob Siklos22-Feb-11 5:57
memberRob Siklos22-Feb-11 5:57 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150603.1 | Last Updated 23 Feb 2011
Article Copyright 2011 by İlkay İlknur
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid