In this article I will going to show you about focusing any element in Silverlight, Silverlight 5 is an application framework for writing and running rich Internet applications, with features and purposes similar to those of Adobe Flash. Just supposed that we had a login panel as he very first screen after validation we will navigate to another page. So when I am talking about the login panel we will have two input fields (textboxes) to insert username and password and looking from thge user's point of view we want that the username textbox field is to be focused.
Create a Silverlight Application
Before we jump more into the content about focus control first we should create a Silverlight application, just named it (for example: "FocusingControlInSilverlightApplication", use one textbox, passwordbox and button for the login interface.
It will looked like below:
Set Focus to the username textbox
So as we know we have a function something like Focus() to make it focused but it is not going to work for the very first time. Here is the reason, when we will run the application the Silverlight Plugin is not yet focused. Unless until we focus that Plugin in we can't focus any control in Silverlight application. To make it happen we have to simply add a single line of code on the loaded event which will look like and focus the Plugin
public MainPage()
{
InitializeComponent();
this.Loaded += new RoutedEventHandler(MainPage_Loaded);
}
void MainPage_Loaded(object sender, RoutedEventArgs e)
{
//First focus the silverlight plogin and than focus the control.
HtmlPage.Plugin.Focus(); (1)
userNameTextBox.Focus();(2)
}
Line one is focusing the Silverlight Plugin.
Focus that element.
But we need to add the following to the namespace import section.
using System.Windows.Browser;
Now run the application and you will find the control focused.
Once the Silverlight Plugin is focused, the simple Focus() function will work. Suppose we want to set the focus to the passwordbox; now after the Silverlight Plugin is focused so any event let say we add a focus button beside the login button and on click event of that button let's add the following
void focusButton_Click(object sender, RoutedEventArgs e)
{
//After Silverlight Plug in is focused
passwordTextBox.Focus();
}
And the screen will look like:
Click on the focus button and your passwordTextBox will be focused; the reason being is we have already focused the Plugin.
I just want to point to that since our login page is the very first page so we need to focus it using code behind. If suppose you have already clicked any of the Silverlight controls or the page itself, we have gotten the Plugin focused; after that if we want to focus any control, we can simply use the control.Focus() method.
Alternative
We do have an alternative to focus the Plugin at the very first moment of page load. As we know for every Silverlight application we get a .aspx and .html page created automatically.
This page has got the .xap file integrated in them which looks like:
<body>
<form id="form1" runat="server" style="height:100%">
<div id="silverlightControlHost">
<object id="focusingControlInSilverlightApplicationTestPageXaml" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/FocusingControlInSilverlightApplication.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50826.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
</form>
</body>
Including some JavaScript. So let's include the id attribute for the object tag and give some name; in my case it is "focusingControlInSilverlightApplicationTestPageXaml" and add the following function to the JavaScript section:
function FocusPlugin() {
document.getElementById('focusingControlInSilverlightApplicationTestPageXaml').focus();
}
And on the body part of HTML add the following:
<body onload="FocusPlugin()">
This will do the work; you don't need to write anything in the code behind. At the very first moment when the .aspx or .html (test pages) loads it will focus the corresponding Plugin and there after only control.focus() method will focus the control.