Click here to Skip to main content
Click here to Skip to main content
Go to top

A post about Silverlight Focusing Issue

, 22 Feb 2011
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
Follow on   Twitter

Comments and Discussions

 
GeneralReason for my vote of 5 Really Nice PinmemberAli Taghvajou1-Mar-11 18:30 
GeneralReason for my vote of 5 Nice and simple. Thanks! PinmemberRob Siklos22-Feb-11 5:57 
Reason for my vote of 5
Nice and simple. Thanks!

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 | Mobile
Web01 | 2.8.140905.1 | Last Updated 23 Feb 2011
Article Copyright 2011 by İlkay İlknur
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid