Click here to Skip to main content
15,860,972 members
Articles / Desktop Programming / XAML
Tip/Trick

A post about Silverlight Focusing Issue

Rate me:
Please Sign up or sign in to vote.
5.00/5 (6 votes)
22 Feb 2011CPOL1 min read 15K   4   2
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.

XML
<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


C#
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:

JavaScript
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

C#
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)


Written By
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

Comments and Discussions

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

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.