Silverlight manipulating HTML elements

Source: Internet
Author: User


Applicability: silverlight1.1 language: C #

Imagine accessing HTML elements like JavaScript? We all know that HTML elements can be accessed through javascript. This technology is the Document Object Model that we all know now-developed by W3C standards.

In fact, in Silverlight, you can also use C # code to easily access HTML elements.

First, you need to reference the following namespace:

C # code
  1. Using system. Windows. browser;


First, let's take a look at a static (static) object htmlpage, which provides attributes about the browser information. You can easily jump to other web pages by using the methods provided by the htmpage object as a program:

Htmlpage object

Browserinformation attributes: Browserversion browser information; platform operating system. useragent, such as MSIE or Firefox, has a version number;

Navigate Method: Jump to another page or website, such as htmlpage. navigate ( );

You can also access the core of Dom through htmlpage.Document Object (htmldocument type), and then you can access HTML elements of the page through htmldocument.

For example, htmldocument Doc = htmlpage. Document.

Modify page properties:

For example, modify the page title:

Doc. setproperty ("title", "Bad blog ");

Or modify the background color:

Doc. setproperty ("bgcolor", "Red ");

Access HTML elements

Now, let's use the getattribute/setattribute, getstyleattribute/setstyleattribute method to access/modify the specified HTML element.

HTML element: <span id = "MSG"> Hello </span>

Silverlight in C #:

C # code
  1. Htmlelement ELEM = Doc. getelementbyid ("MSG ");
  2. // Modify content
  3. ELEM. setattribute ("innerhtml", "new text ");
  4. // Modify the background color
  5. ELEM. setstyleattribute ("background", "green ");
  6. // Modify the text color
  7. ELEM. setstyleattribute ("color", "White ");


HTML element: <input id = "tbname" type = "text"/>

Silverlight in C #:

C # code
  1. Htmlelement ELEM = Doc. getelementbyid ("tbname ");
  2. // Read value
  3. String S = ELEM. getattribute ("value ");
  4. // Modify the value
  5. ELEM. setattribute ("value", "Your name ");


HTML element:

Silverlight in C #;

C # code
  1. Htmlelement ELEM = Doc. getelementbyid ("imgme ");
  2. // Modify the image
  3. ELEM. setattribute ("src", "you.jpg ");

HTML element:

<Select id = "Cities"> <option> Beijing </option> <option> Shanghai </opiton> <option> Shenzhen </option> </SELECT>

Silverlight in C #:

C # code
  1. Htmlelement ELEM = Doc. getelementbyid ("Cities ");
  2. // Obtain the index of the selected Select Content
  3. String S = ELEM. getattribute ("selectedindex ");


Event binding

Register the event to the managed code (C #) for processing, to replace the previous JavaScript for processing. (PS: It seems that the flash can also be used, and the compiler still prefers the C # syntax and vs development IDE)

For example, use C # to handle a button event:

C # code
  1. Htmlelement ELEM = Doc. getelementbyid ("btbgo ");
  2. ELEM. attachevent ("onclick", new eventhandler
  3. .....
  4. // E. sourceelement reference time trigger object
  5. Void btngo_onclick (Object sender, htmleventargs E)
  6. {
  7. .....
  8. }


OK, complete. Silverlight makes the client's rich coal and client programming so easy. Ga, come on.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.