AutomationProperties in Silverlight

debal_saha-9451
Posted by in Silverlight category on for Intermediate level | Points: 250 | Views : 7225 red flag
Rating: 5 out of 5  
 1 vote(s)

In my mail I have got one question that How to use AccesKey in Silverlight. I see the problem and spent some hours in that .AutomationProperties contain the following attached properties . They are AcceleratorKey , Accesskey , AutomationId , HelpText ,IsRequiredForForm, ItemStatus, Itemtype,LabeledBy and Name respectively. In this small article I only discuss about AccessKey and HelpText properties . For more details about other member please read the MSDN article in Microsoft site . So let’s start…………


 Download source code for AutomationProperties in Silverlight

Introduction

In my mail I have got one question that How to use AccesKey in Silverlight. I see the problem and spent some hours in that . I also search in Google and other resoures . I find msdn article about this Automation properties. In this AutomationProperties contain the following attached properties . They are AcceleratorKey , Accesskey , AutomationId , HelpText ,IsRequiredForForm, ItemStatus, Itemtype,LabeledBy and Name respectively. In this small article I only discuss about AccessKey and HelpText properties . For more details about other member please read the MSDN article in Microsoft site . So let’s start…………

What is AutomationProperties?

MSDN Saying :

“ AutomationProperties Class Provides support for getting or setting the value of instance-level values of automation properties. These property values are set as attached properties (typically in XAML) and supplement or override automation property values from a control's AutomationPeer”

The namespace of this class is System.Windows.Automation and the related assembly is System.Windows. This is supported in Silverlight 3, 4 version. See I’m using Silverlight 4. So, lets start with a New project .Before going to make the project I’m describing the below pic -1 where You can see what we shall do  in Our Project.

1. Open Visual Studio 2010 make a Silverlight project , name it what you wish I give it the name of AutomationProperties. Besure to select your Silverlight Version 4. Also look at the pic -1 that I have unselect the “Host the Silverlight Application in a new Website”. Because I don’t have any work with server side.


2. Now your Project is ready . Just make two folder in the name of Vedio and Resources . In the Vedio I keep vedio File and the in the resource folder I add a .resx file.  I’m not going in deep about this as we shall discuss on the accessibility in Silverlight Application.

3. In the MainPage.xaml file Add a media element and stack panel . I keep the orientation of this Horizontal and set the HorizontalAlignment = “center”. Now  add three button in the stack panel and give the name of them play, pause, stop. In the xaml page we shall write in the button AutomationProperties class’s Accesskey property .  With this accessibility features  user can use access key in their key board to play the song .  AutomationProperties.AccessKey="P". With this user need not to necessary to mouse click on the button to play the song . Just press “P” in the keyboard and Song will start to play.

4. Now one intelligent guy can ask how the user will became to know that use the “p” keyword the song will play ? ? How ?  ok, to provide this facility AutomationProperties also gives us one property member that is HelpText .  Help text is any text or label that might assist a user to determine how an element in the UI should be used. Usually, we see in the image that there is a “alt” option to mention what the pic is . Similarly for Silverlight accessibility, you can apply this help text to any UI  element that is visible and reports itself to mouse-over and hit testing. For example you can see the our Song , when you muse over on it , a gray color text is telling to you that “You are watching Mohabatein Song” . see in pic -1  .

5. We also set this property in button . So that user when mouse over any button among three , a text should tell the user that what to do with that button. See in Pic -3 when user mouse over the  stop button , then it will say that “Press S to Stop Song”.

6. So , to do all this what to do in xaml page ? your intelligent mind can say that I’m using tooltip . But actually this is not true. I use Automation properties’ HelpText . See,

AutomationProperties.HelpText="{Binding String2, Source={StaticResource tooltipbinding}}"

7. Ok, one thing I want to say that if you think that only in xaml page if you write the AutoamtionProperties.HelpText = “You are watching Song” or if you write AutomationProperties.Accesskey = “p”  and this two line will do work for you. Then I will  you are wrong. And So my one beloved reader code is not working . Because unfortunately , in SIlverlight this can’t be done directly. So, you need to do some additional work . We will do this now.

8. As I previously mentioned that I use Myresourse.resx file. You can find this Under resources folder .See pic – 4. In the Button we already add the Accesskey and Help text Property . In Step 3 and 6 the code is showing how to use them.****Ok , onething I want to say is that if you download the code from the avobe link, and run the application then you will not be able to see the vedio file. I remove this to reduce the downloadable file size because it including the vedio file it is not possible to publishing in Server. **** . I suggest you to load any vedio file and give the path same , just change the name of your file .

 

9. In the Code Behind of the file under constructor we  shall write we shall write an event of Mainpage keydown. 

LayoutRoot.KeyDown += new KeyEventHandler(LayoutRoot_KeyDown);

10. So,  this event will handle the key board press and do our desired work . Layout root is our main page grid name.

 

void LayoutRoot_KeyDown(object sender, KeyEventArgs e)

{

switch (e.Key)

{

case Key.P: media.Play();

break;

case Key.S: media.Stop();

break;

case Key.F: media.Pause();

break;

default:

break;

}

}

 

 

11. Add one namespace using System.Windows.Browser;  and write the following code so that when the page loading is finish , at that time if user press “P” key word the song start to play .

 

private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)

{

HtmlPage.Plugin.Focus();

}

 

 

12. Now we shall do work in the HelpText properties of the AutomationProperties . This is mostly same as like ToolTip but we never use any Tooltip word in our application.

13. To add a vedio file in Silverlight Application you need to add an mediaelement in your xaml page  and give the source path of your file. Dowload the source code and see how I add this. I give the name of the media element is “media”. In the code behind of xaml page under constructor I add an event handler. Though you can also do this in xaml like MouseEnter="media_MouseEnter" .But I write in code behind both are same . See the Code :

 

media.MouseEnter += new MouseEventHandler(media_MouseEnter);

media.MouseLeave += new MouseEventHandler(media_MouseLeave);

 

 

14. Under MouseEnter we need to write some code . Mouse Leave event I use because when your mouse leave the vedio portion then the message should not visible that “You are watching Mohabatien Song.” Ok, I make  a private method to perform the task . The name of the method is DisplayText which take one parameter .

15. In AutoamationProperties Class there is one method GetHelptext(). This also take one parameter which should be an object of DependencyObject Class. This method contain the helptext for the Specified element .For example , if you set the AutomationProperties.helpText for button it will take the string from the button element .

16. So, in the method DisplayText we do our necessary work so that the text message should display whenever the Mouse Enter in the Specific UIElement

private void DisplayText(DependencyObject obj)

{

UIElement element = (UIElement)obj;

string ss = AutomationProperties.GetHelpText(element);

 

DisplayPopUp = new Popup()

{

IsHitTestVisible = true,

HorizontalAlignment = System.Windows.HorizontalAlignment.Center,

 

IsOpen = true,

Child = new Border()

{

CornerRadius = new CornerRadius(10),

BorderBrush = new SolidColorBrush(Colors.Black),

 

BorderThickness = new Thickness(2),

Background = new SolidColorBrush(Colors.Gray),

 

Child = new TextBlock()

{

Margin = new Thickness(10),

HorizontalAlignment = System.Windows.HorizontalAlignment.Center,

Text = ss.Replace("\\r\\n", "\r\n"),

FontSize = 14,

Foreground = new SolidColorBrush(Colors.White),

 

FontWeight = FontWeights.Normal

}

}

};

DisplayPopUp.IsOpen = true;

}

 

17. Look at the Code there is a DisplayPopUp. Actually, this is a Property of the PopUp Class. Under this PopUp window Class I take one Border give it corner radius and also  Borderbrush ,BorderThickness,Background. I also take one child element of Border that is text block. Add the Text property of the textblock with the AutomationProperties.GetHelpText(DependencyObject element). See I use ss string and add this with the text property of the textblock.

 

18. Now the finishing touch . Add some Mouse_Enter event for the play button,pause, and stop button and write the following code.

19. I also add one Mouse_leave event . So that when user don’t mouse over a specific element then there should not be any message text

Today,  upto this. Hope You get idea about the accessibility. Search google for more information. If u find this is helpful pl give me feedback . Enjoy …….

Page copy protected against web site content infringement by Copyscape

About the Author

debal_saha-9451
Full Name: DEBAL SAHA
Member Level: Starter
Member Status: Member
Member Since: 3/15/2011 4:01:43 AM
Country: India

http://silverlightpractice.blogspot.com/

Login to vote for this post.

Comments or Responses

Posted by: Vuyiswamb on: 11/21/2011 | Points: 25
nice article. please check the spelling on "Video" , nice Job

Login to post response

Comment using Facebook(Author doesn't get notification)