Post
Ask Question

Focus Control in Silverlight


Introduction

Today I will be writing something about focusing any element in Silverlight. Let's suppose we have a login panel as the very first screen and 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.

Setting Up Silverlight Project

Let's create a Silverlight application and name it "FocusingControlInSilverlightApplication". Let's use one textbox for username, one passwordbox for password and one login button. After designing, it will look something like the following:

FcdCntrl1.gif

So here comes the question; how to 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)
        }
 

  1. Line one is focusing the Silverlight Plugin.

  2. 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.

FcdCntrl2.gif

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 focussed
            passwordTextBox.Focus();
        }

And the screen will look like:

FcdCntrl3.gif

Click on the focus button and your passwordTextBox will be focused; the reason being is we have already focused the Plugin.

FcdCntrl4.gif

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.

FcdCntrl5.gif

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.

Hope this will help !!!!.


Similar Articles